클로저

---

클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다.

클로저 함수의 특징은 함수를 리턴하는 함수라는 것이다. 함수를 리턴하는 함수가 클로저의 형태를 만들게 된다.

클로저 함수는 데이터를 보존하는 함수로서, 외부 함수의 실행이 끝나더라도 외부함수 내 변수를 사용할 수 있다. 클로저를 통해 데이터와 메서드를 같이 묶어서 다룰 수 있다. 클로저는 모듈화에 유리하다.

클로저 사용의 예시를 하나 들자면,

const Counter = () => {
  let count = 0
  
  return {
    increase: () => {
      count += 1
    },
    decrease: () => {
      count -= 1
    },
    countnow: () => count
  }
}

const Count0 = Counter();
Count0.increase();
Count0.increase();
Count0.decrease();
Count0.countnow(); // 1

처럼 사용할 수 있다.

위의 식은 객체 안에 함수를 담아서 리턴하도록 만든것으로, 스코프 규칙으로 count 변수에 값을 새롭게 할당할 수 없게 만든다. 이렇게 count를 전역변수가 아니게 만듬으로서, 의도치 않은 side effect를 최소화하여 오류를 줄이는 효과가 있다.

ES6 문법

---

Spread / rest

spread

주로 배열을 풀어서 인자로 전달하거나, 각각의 요소로 넣을때 사용된다.

const arr = [1,2,3]
function log(a,b,c){
  return console.log(a), console.log(b), console.log(c)
}

log(...arr) // 1 2 3

rest

rest는 spread와 유사한 형태지만, 하는 역할은 반대로 여러 인자를 하나의 배열로 반환하는 것이다.

함수 파라미터에서

function sum(...rest) {
  return rest;
}

const result = sum(1, 2, 3);
console.log(result); // [1,2,3]

구조 분해 할당

구조분해할당은 값을 해체한 후, 개별 값은 변수에 할당하는 과정으로, 예시를 보고 이해하는 편이 빠른데, 객체와 배열을 나누어 보자면 다음과 같다.

객체에서

const numbers = {
  first: '1',
  second: '2',
  third: '3'
};

const { first, ...rest } = numbers;

console.log(first); // '1'
console.log(rest); // { second: '2', third: '3' }

배열에서

const numbers = [0, 1, 2, 3];

const [one, ...rest] = numbers;

console.log(one); // 0
console.log(rest); // [1,2,3]