1/3 일일정리 클로저, ES6 주요문법

1. 클로저

  클로저 란?

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

 특이하게도 자바스크립트는 함수가 호출되는 환경과 별개로 기존에 선언되어 있던 환경, 즉 어휘적 환경(렉시컬 환경)을 기준으로 변수를 조회하려고 한다. 이와 같은 이유로 "외부 함수의 변수에 접근할 수 있는 내부 함수"를 클로저 함수라고 한다.

function add(x) {
  return function (y) {
    return x + y;
  };
}

const add5 = add(5);	// 변수x를 담은채로 있다.
add5(7);		// 12
add5(10);		// 15

 

 일반적인 함수는 함수실행이 끝나면 함수 내부의 변수를 사용할 수 없다. 그러나 클로저는 외부 함수의 실행이 끝나더라도 외부 함수 내 변수가 메모리에 저장된다.(어휘적 환경에 저장한다.)

 

클로저 모듈 패턴

const makeCounter = () => {
  let value = 0;
  return {
    increase: () => {
      value += 1;
    },
    decrease: () => {
      value -= 1;
    },
    getValue: () => value,
  };
};
const counter1 = makeCounter();

위의 코드에서 value 변수에 직접적으로 접근할 수는 없다. 이렇게 정보의 접근을 제한하는 것을 캡슐화 라고 한다. 

value라는 변수를 전역변수로 두면 다른 함수나 로직등에 의해 예상치 못하게 변경되는 등의 side effect를 발생 시킬 수 있다.

캡슐화를 이용하면 이러한 side effect를 최소화 시킬 수 있다.

 

const counter1 = makeCounter();
counter1.increase();
counter1.increase();
counter1.decrease();
counter1.getValue();	// 1

const counter2 = makeCounter();
counter1.increase();
counter1.decrease();
counter1.decrease();
counter2.getValue();	// -1

// counter1, counter2는 서로 영향을 주지 않는다.

위 코드처럼 각각의 makeCounter에 의해 리턴된 객체는 서로 독립적인 객체로 value값을 독자적으로 갖게 된다.

이와 같이 함수의 재사용성을 극대화 하여 함수 하나를 완전히 독립적인 부품 형태로 분리하는 것을 모듈화 라고 한다.

 

2. ES6 주요 문법

spread 문법

배열 내 요소들을 펼친다.

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

sum(...numbers) 	// 6

//배열 합치기
let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2]; 	// [0,1,2,3,4,5]

//배열 복사
let arr = [1, 2, 3];
let arr2 = [...arr]; // arr.slice() 와 유사
arr2.push(4);	// 원본인 arr은 그대로있고, arr2 = [1,2,3,4]가 된다.

 

rest 문법

파라미터를 배열의 형태로 받아서 사용할 수 있다. 파라미터 개수가 가변적일 때 유용하다.

function add(...args){
  let sum=0;
  for(let el of args){
    sum += el;
  }
  return sum;
}
console.log(add(1,2,3));
console.log(add(1,2,3,4));


// 함수에 나머지 파라미터 받아오기
function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}
myFun("one", "two", "three", "four", "five", "six");
// 실행 결과
// a one
// b two
// manyMoreArgs ["three", "four", "five", "six"]

 

구조분해할당

구조 분해 할당은 spread 문법을 이용하여 값을 해체한 후, 개별 값을 변수에 새로 할당하는 과정을 말한다.

const [a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(rest);		// [30,40,50]

const {c, d, ...rest2} = {a: 10, b: 20, c: 30, d: 40}
console.log(rest2);		// {c:30, d:40}

// 함수에 구조분해할당 예제
function whois({displayName: displayName, fullName: {firstName: name}}){
  console.log(displayName + " is " + name);
}

let user = {
  id: 42,
  displayName: "orange",
  fullName: {
      firstName: "Kim",
      lastName: "coding"
  }
};

whois(user) // orange is Kim