23/10/12

JavaScript

새로운걸 잔뜩잔뜩 배웠다!

자료형

• exp: 지수형

let num=2.5e5

라고 적으면 이 숫자는 2.5*10^5 를 의미한다.
exp는 exponential의 exp일까...?

• str1.concat(str2) // str1과 str2를 합친다

let str1 = "hello";
let str2 = "world";
let result = str1.concat(str2);

라고 하면 result는 helloworld 가 된다. 띄어쓰기가 안되어있는것도 깨알point. 띄어쓰기는 직접 넣어야한다.

• str.substr(a,b) a번째부터 b개만 출력해줘

• str.slice(a,b) a번째부터 b번째까지 출력해줘

• str.search(‘abc’) str내에서 abc가 시작되는 지점이 뭔지 알려줘

• str.replace(“abc”,”xyz”) str 내에 있는 abc를 xyz로 바꿔줘

• str.split(“,”) str 내부에 있는 , 를 기준으로 자르고 잘린 조각들을 array에 넣어서 출력해줘

중요!! string 에서도 0 부터 센다. 예를들어

let Str="abcd"
Str.substr(1,2)

하면 첫번째인 a 부터 a,b의 두개를 출력해서 ab 가 나오지 않는다. ab가 나오게 하려면 Str.substr(0,2) 이어야 한다.

• !== 불일치 연산자. 불린 값을 뒤집는다.
  ===가 일치 연산자인데 불일치 연산자가 !===가 아니라는게 아쉽게 느껴진다.

기타 문법

• 스위치문

let fruit = "키위";
switch (fruit) {
  case "사과":
    console.log("사과입니다");
    break;
  case "바나나":
    console.log("바나나입니다");
    break;

  case "키위":
    console.log("키위입니다");
    break;

  default:
    console.log("아무것도 아닙니다");
    break;
}

여기서 break; 는 필수다. 이게 없으면 의도대로 실행되지 않는다. default는 맞는 조건이 없을때 실행된다.

---

[follow up 10/15]
처리해야 하는 조건이 복잡하거나 단순 일치가 아닌 >,< 등이 포함되는 경우라면 if문을 사용하는 것이 낫다. switch 문은 단일 조건의 일치만 여러번 따져야 하는 경우 사용하는 것이 가장 효과적이다. 또한 코드에 드러나진 않지만 switch는 항상 === 연산자를 사용한다는것도 알아두면 좋다.

---

• 조건문안의 조건문

let age = 15;
let gender = "여성";

// 미성년자 구분
if (age >= 18) {
  if (gender === "여성") {
    console.log("성인 여성입니다");
  } else {
    console.log("성인 남성입니다");
  }
} else {
  if (gender === "여성") {
    console.log("미성년 여성입니다");
  } else {
    console.log("미성년 남성입니다");
  }
}

조건문 안에 조건문을 넣는것도 얼마든지 가능하다.

• 조건부실행(?)

let x = 10;
x > 0 && console.log("x는 양수입니다.");
// 이거랑 if문을 아래와 같이 작성하는거랑 완전 같음

if (x > 0) {
  console.log("x는 양수입니다.");
}

오늘 배운것중 "이해 안감" 1위의 빛나는 조건부 실행.
if문과 똑같고 코드 길이도 별 차이 없다면 이게 왜 필요한걸까?
그리고 &&는 분명 and를 의미하는 연산자였는데 &&를 좌측의 조건이 성립하면 우측의 코드를 실행하라는 의미로 쓰는 이유가 뭘까?

근데 심지어 이걸 or을 의미했던 || 를 가지고도 한다!

let y;
let z = y || 20; 
console.log(z);

그래도 그나마 여기선 or 의 의미가 좀 남아있다. y가 정의되어있지 않으면 20을 할당하라는 의미이기 때문. 적어도 y or 20 둘중 하나가 할당된다는 의미는 있는거지.

Object

• Object.keys(객체명) 키들을 배열 형태로 반환

• Object.values(객체명) 밸류를 배열 행태로 반환

• Object.entries(객체명) key 와 value를 배열로 만든 배열(2차원 배열)

• Object.assign(어디다 복사할래, 뭐를 복사할래)
  target에다가 기존에 존재하는 객체를 복사해서 넣음. 아래가 예시

let newPerson = {};
Object.assign(newPerson, person);
//person 이라는 기존에 존재하던 객체를 복사해서 newPerson
에 넣음!

(빈 객체를 일단 { } 로 만들수 있다는 사실 자체가 귀중한 발견이다!!)
심지어 복사는 하는데 원하는 값을 마음대로 바꿀수도 있다

Object.assign(newPerson, person, { age: 31 });
console.log("newPerson=>", newPerson);

이러면 복사를 하긴 하되 person의 age값은 31세로 복사됨.

• 객체 병합 using spread operator

let person1 = {
  name: "홍길동",
  age: 30,
};

let person2 = {
  gender: "남자",
};

let perfectMan = { ...person1, ...person2 };

간단하면서도 유용하다.

Array

• let number =new Array(5) 크기가 5인 배열을 새로 만들어줘
  비어있고 크기만 정의된 배열을 만들 이유가 뭐가 있을까..?아직은 모르겠다

• 배열.push(“a”) a를 배열의 마지막에 추가함

• 배열.pop() 마지막 요소를 배열에서 삭제함 () 안에는 아무것도 안적어도 됨.

• 배열.shift() 첫 요소를 삭제함.

• 배열.unshift(‘a’) 맨앞에 a 를 추가함.

• 배열.splice 는 예시를 보면서 이해하자

let fruits = ["사과", "바나나", "키위"];
fruits.splice(1, 1, "포도");
console.log(fruits);

이러면 1번째 요소부터 1개를 삭제하고 그자리에 ‘포도’를 넣어줘 라는 의미가 된다.
fruits.splice(1,2,”포도”)면 1번째부터 2개를 지우고 포도를 넣어줘 가 되니까 바나나 키위가 둘다 삭제되고 [사과, 포도] 가되겠지

• 배열.slice(a,b) 주어진 배열에서 a번index 부터 b번 index 까지 잘라서 새로운 배열로 만들어줘
  (주의!!! b는 포함이 되지 않음.)

let fruits = ["사과", "바나나", "키위"];
let slicedFruits = fruits.slice(1, 2);
console.log(slicedFruits);

이러면 slicedFruits는 [‘바나나’]가 됨. 1번 index바나나부터 2번 index인 키위 까지 지정했는데 slice 에서는 마지막은 포함하지 않기 때문. 키위도 넣고 싶으면 slice(1,3)을 하면 되겠지.

이제 드디어 배열의 영원한 친구 forEach를 배울 때가 되었다.

• 배열.forEach
  기본적으로 배열의 각 요소를 순회하면서 코드를 반복실행한다고 생각하자.

let numbers = [4, 2, 3, 1, 5];
numbers.forEach(function (item) {
  console.log("item입니다->" + item);
});

이러면 콘솔에 4,2,3,1,5를 전부 띄울수 있다. 이때 하나하나 따로 실행되는 것이기 때문에 각각 새로운 줄에 표기된다.

• 배열.map

let newNumbers = numbers.map(function (item) {
  return item * 2;
});
console.log(newNumbers);//[8,4,6,2,10]

주의! map은 반드시 retrun문을 가져야 한다 -> map은 기존의 배열을 가공해서 새로운 배열을 생산하는 역할을 하기 때문. 새로운 배열을 return으로 받아줘야 한다.
주의2! map 에서는 항상 원본 배열의 길이만큼이 리턴된다.

• 배열.filter

let numbers = [4, 2, 3, 1, 5];
let filteredNumbers = numbers.filter(function (item) {
  return item === 5;
});
console.log(filteredNumbers); // [5]

map과 유사하게 return 을 통해 새로운 배열을 반환한다. 근데 이제 그게 조건에 맞는 새로운 배열인거임.
원본 배열의 길이와 달라질 수 있다.

• 배열.find

let numbers = [4, 2, 3, 1, 5];
let result = numbers.find(function (item) {
  return item > 3;
});
console.log(result); // 4   ([4]가 아님에 주의)

이름값을 제대로 한다. 정말 딱 조건에 맞는걸 찾고 리턴해준다.
주의! 조건에 맞는게 여럿이어도 처음 찾은것만 리턴한다.

function

• for
  for(초기값; 조건식; 증감식) { 실행코드 } 이게 기본구조.

const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
for (let i = 0; i < arr.length; i++) {
  if (arr[i] % 2 === 0) {
    console.log(arr[i]); 
  }
} // arr에서 짝수인것들만 콘솔에 찍어줌

---

[follow up 10/15]
증감식은 일반적으로 { } 안의 코드가 실행된 '이후'에 적용된다. 따라서 모종의 이유로 코드가 실행되기 전에 증감식이 적용되길 바란다면 증감식 부분을 공란으로 두고 실행할 코드 윗줄에 증감식을 적으면 된다. 위 예시를 그대로 들고오면,

for (let i = 0; i < arr.length; ) {
  i++;	
  if (arr[i] % 2 === 0) {
    console.log(arr[i]); 
  }
}

이렇게 하는 방법도 있다는 의미.
또한 i처럼 반복할때마다 변경되어야 하는 변수에는 const를 사용하면 안된다. 오류가 뜸Assignment to constant variable.

---

• for ~in : 객체의 속성을 출력

let person = {
  name: "John",
  age: 30,
  gender: "male",
};

for (let key in person) {
  console.log(key + ": " + person[key]);
}

let key in person 에 주목할 것. person이라는 객체의 key 하나하나 마다 돌면서 저 코드를 실행하게됨.

• while

let i = 4;
while (i < 100) {
  if (i % 5 === 0) {
    console.log(i);
  }
  i++;
}

주의! 무한 루프 만들기 딱좋다! 위 코드에서 i++ 빼면 i가 4로 고정이 되어서 영원히 i<100 조건에 부합하게 되고 무한 루프에 빠져든다 ㄷㄷ

• break 문 : for 문을 중간에 부수고 밖으로 나감

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break; //break를 만난 순간 for문 블록을 벗어나게 됨.
  }
  console.log(i); // 0,1,2,3,4
}

break 는 재밌는게 얘가 등장하는 위치가 완전히 다른 결과를 만든다. 아래를 보자

for (let i = 0; i < 10; i++) {
  console.log(i);
  if (i === 5) {
    break; 
  }
}

첫 break 문 예시와 break의 위치만 다르다. 하지만 이경우 콘솔에 5까지 찍히고 탈출한다.

• continue : break 랑 비슷한데 딱 그 조건에 맞는애만 없앰.

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    continue; // 5만 없애고 코드가 continue 된다
  }
  console.log(i); // 0,1,2,3,4,6,7,8,9 (5가 안찍혔다)
}

좀 구체적이게 말하면, 조건에 맞는 것을 만나면 그 아래로 더 진행 안시키고 다음 i로 넘어간거임. 그래서 아래처럼 코드를 짜면

for (let i = 0; i < 10; i++) {
  console.log(i);
  if (i === 5) {
    continue; 
  }
}

continue 가 의미가 없게된다. 0~9까지 다 찍힘 5까지 포함해서. 컨티뉴 만나서 다음 i로 넘어가지만 이미 continue 만나기 전에 할거 다 한 상태라 달라지는게 없는 것.

• this
  드디어 마침내 this 가 뭔지 알게 되었다. this가 중괄호 안에서 쓰였을때 this는 항상 자기 자신을 가리킨다.

const person = {
  name: "John",
  age: 31,
  isMarried: true,
  sayHello: function () {
    console.log(`Hello, my name is ${this.name}`);
  },
};
person.sayHello(); // Hello, my name is John

• 배열속 함수

const myArr = [
  function (a, b) {
    return a + b;
  },
  function (a, b) {
    return a - b;
  },
];

console.log(myArr[0](1, 2)); //3
console.log(myArr[1](10, 8)); //2

원하는 요소에 접근하는 방식까진 여타 배열이랑 똑같고 그 함수에서 사용할 argument만 따로 [ ] 옆에 적어준다고 기억하면 된다.

personal remark

JS 문법을 본격적으로 배우기 시작하니 갑자기 너무 많은 정보가 한번에 흘러들어와서 난처하기도 하지만 계속 궁금하고 신경쓰였던 부분들이 너무 많이 해소되어서 기쁘다!