JavaScript 기초9 클로저(closure)와 Spread/Rest문법

 

 

• 학습 내용

이번 시간에는 저번 시간에 클로저(closure)와 spread/rest문법에 대하여 학습할 것이다. 

 

• 클로저(closure)

클로저란 함수와 함수가 선언된 어휘적(lexical) 환경의 조합을 말한다. 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다. 여기서 키워드는 "함수가 선언"된 "어휘적 환경"이다. 자바스크립트는 함수가 호출되는 환경과 별개로 기존에 선언되어 있던 환경 '어휘적 환경'을 기준으로 변수를 조회하려고 한다. 외부함수의 변수에 접근할 수 있는 내부함수를 클로저 함수라고 부르는 이유가 이 때문이다. 그래서 외부함수의 실행이 종료된 후에도 클로저 함수는 외부함수의 스코프 즉, 함수가 선언된 어휘적 환경에 접근할 수 있다.

이러한 것들로 클로저 커링(함수 하나가 n개의 인자를 받는 대신 n개의 함수를 만들어 각각 인자를 받게 하는 방법)과 모듈(변수를 외부 함수 스코프 안쪽에 감추어, 변수가 함수 밖에서 노출되는 것을 막는 방법)을 구현할 수 있다.

그러나 단점 역시 존재하는데 일반 함수이면 실행 종료 후 가비지 컬렉션 대상이 되지만 클로저 함수는 메모리상에 남게 된다. 이로 인해 클로저를 남발하면 전체적인 성능을 저하시킬 수 있다.

 

• Spread/Rest문법

spread문법은 주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때에 사용한다.

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

const numbers = [1, 2, 3];

sum(...numbers) // 6

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

function sum(...theArgs) {
  return theArgs.reduce(([revious, current) => {
    return previous + current;
  });
}

sum(1,2,3) // 6
sum(1,2,3,4) // 10

 

• Spread/Rest 활용

1) 배열 합치기

let parts = ['shoulders', 'knees'];
let lyrics = ['head', ...parts, 'and', 'toes'];

lyrics; // ['head', 'shoulders', 'knees', 'and', 'toes']

2) 배열 복사

let arr = [1, 2, 3];
let arr2 = [...arr];
arr2.push(4); // [1, 2, 3, 4]

3) 객체에서 사용하기

let obj1 = { foo: 'bar', x: 42 };
let obj2 = { foo: 'baz', y: 13 };

let clonedObj = { ...obj1 }; // { foo: 'bar', x: 42 }
let mergedObj = { ...obj1, ...obj2 }; // { foo: 'baz', x: 42, y: 13 }

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"]