JavaScript Koans 정리

Types

• == : 느슨한 동치연산자. 왜 같은지 모르는 것들도 true를 반환한다. 쓰지말자. 잊어라.

[] == ![] // true
1 + 1 == '2' // true

• === : 엄격한 동치연산자. 타입과 값(또는 주소값) 등 완전히 같아야 true를 반환한다.

Let / Const

• let : 재선언 불가능. 재할당 가능. 여기서 재선언은 동일한 스코프 내에서만 불가능. 다른 스코프에서 재선언할 경우, 다른 변수로 취급.
• const : 재선언 불가능. 재할당 불가능. 변수의 값을 일종의 상수로 만들어주기 때문에 실수로 값을 변경할 일이 없고, 코드의 가독성을 높여줌(값이 변하지 않는다는 걸 알면 해당 변수를 다루는 코드를 이해하기 쉬워짐).

함수선언식 / 함수표현식

• 함수선언식

function add(a, b) {
  return a + b;
}

함수 선언을 해당 스코프 최상단으로 끌어 올리는 것처럼 보이는 것을 호이스팅이라고 한다. 함수선언식은 호이스팅이 가능하다. 즉 함수를 호출한 뒤에 해당 함수를 선언하는게 가능하다는 뜻이다.

• 함수표현식

const add = function(x, y) {
  return x + y;
};

함수표현식은 호이스팅이 불가능하다. let이나 const로 선언된 변수는 해당 블록 스코프 내에서만 사용이 가능하기 때문이다. 따라서 함수를 호출하기 전에 반드시 선언해야 한다.

lexical scope (언어적 환경)

• 함수를 작성할 때, 함수 내부에서 변수에 접근할 수 있는 범위를 말한다. 현재 함수에서 변수를 찾을 수 없는 경우, 상위 스코프에서 변수를 찾는다. 이러한 행위는 함수가 최초 선언된 위치에서 이루어진다.

closure (클로저)

• 함수와 함수가 선언된 언어적 환경의 조합을 말한다. 이 환경은 클로저가 생성된 유효 범위 내에 있는 모든 지역 변수로 구성된다.

function outer() {
  const x = 10;
  
  function inner() {
    const y = 20;
    console.log(x + y);
  }

outer(); // undefined

위 코드를 보면, outer에서는 inner의 y 및 console.log(x + y)를 출력하지 못하고 undefined를 출력하게 된다. outer의 언어적 환경에 따라, 내부에 있는 inner로는 접근을 할 수 없기 때문이다.

function outer() {
  const x = 10;
  
  function inner() {
    const y = 20;
    console.log(x + y);
  }
  
  inner(); // outer함수 내부에서 inner함수 호출
}

outer(); // 30

하지만 outer 함수 내부에서 inner 함수를 호출하면, outer 함수는 inner 함수에 접근할 수 있게 되고, inner 함수가 선언된 최초의 언어적 환경에서 클로저를 찾기 때문에 inner 함수 내부에 있는 변수들에 접근할 수 있게된다.

ArrowFunction

• function 키워드 대신 => 연산자를 사용한 함수이다. 기존의 함수보다 간결하게 작성할 수 있다는 장점이 있다. 다른 함수식과는 다르게 자신의 this를 가지지 않고 자신이 정의된 위치에서의 this를 상속받는다.

const double = x => x * 2;

Spread syntax

• ... 연산자를 사용해 배열이나 객체를 펼쳐서 새로운 배열이나 객체를 만들 수 있다.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const newArr = [...arr1, ...arr2];
console.log(newArr); // [1, 2, 3, 4, 5, 6]

• 함수의 매개변수에 ... 연산자를 사용하여 rest parameter를 표현할 수 있다.

function myFunction(a, b, ...rest) {
  console.log(a);
  console.log(b);
  console.log(rest);
}

myFunction(1, 2, 3, 4, 5);
// 출력:
// 1
// 2
// [3, 4, 5]

위와 같이 나머지 매개변수를 하나의 배열로 반환한다.
rest parmeter는 항상 배열이기 때문에 위 코드에서 매개변수가 두개만 주어진다면 console.log(rest)에서는 [] 이 출력된다.

Destructuring (구조 분해)

• 배열이나 객체의 구조를 분해할 수 있다.

const arr = [1, 2, 3];

const [a, , b] = arr;
console.log(a); // 1
console.log(b); // 3

위와 같이 배열의 0, 2번째 인덱스에 해당하는 요소를 추출하여 a, b에 할당할 수 있다.

객체에도 적용할 수 있다

const obj = { a: 1, b: 2, c: 3 };

const { a: x, c: y } = obj;
console.log(x); // 1
console.log(y); // 3

이처럼 a와 c 프로퍼티를 추출하여 x, y에 할당하거나

const { a, b } = { a: 1, b: 2, c: 3 };
console.log(a); // 1
console.log(b); // 2

변수 이름을 생략하면, 프로퍼티 이름으로 자동으로 변수가 생성된다.