closure

Closure

두개의 함수로 만들어진 환경으로 이루어진 특별한 객체의 한 종류이다. 여기서 환경이란, 클로저가 생성될 때 그 범위에 있던 여러 지역변수들이 포함된 context를 말한다. 이 클로저를 통해서 자바스크립트에는 없는 private 속성/메소드, public 속성/메소드를 구현할 수 있다.

클로저 생성하기

다음은 클로저가 생성되는 조건이다.

1. 내부 함수가 익명 함수로 되어 외부 함수의 반환값으로 사용된다.
2. 내부 함수는 외부 함수의 실행 환경(execution environment)에서 실행된다.
3. 내부 함수에서 사용되는 변수 x 는 외부 함수의 변수 스코프에 있다.

1
2
3
4
5
6
7
8
9
10
11

var name = `Warning`;
function outer() {
  var name = `closure`;
  return function inner() {
    console.log(name);
  };
}

var callFunc = outer();
callFunc();
// console> closure

위 코드에서 callFunc을 클로저라고 한다. callFunc호출에 의해 name이라는 값이 console 에 찍히는데, 찍히는 값은 Warning이 아니라 closure라는 값이다. 즉, outer 함수의 context 에 속해있는 변수를 참조하는 것이다. 여기서 outer함수의 지역변수로 존재하는 name변수를 free variable(자유변수)라고 한다.

이렇게 외부함수가 내부함수를 반환할때, 내부함수에서 사용하는 변수도 함께 묶어 반환한다.

이처럼 외부함수 호출이 종료되더라도, 외부 함수의 지역변수 및 변수 스코프 객체의 체인 관계를 유지할 수 있는 구조를 클로저라고 한다. 보다 정확히는 외부 함수에 의해 반환되는 내부함수를 가리키는 말이다.

클로저 장단점

• 장점 : 함수가 본인의 실행 환경을 기억한다는 것에서 많은 응용이 가능하다. 대표적으로 react의 state가 클로저를 통해 구현되었다.
• 단점 : 의도하지 않았을 경우엔 프로그램 동작이 이상해질 수 있음. 의미없이 클로저를 생성하면 메모리가 낭비된다.

출처

https://github.com/JaeYeopHan/Interview_Question_for_Beginner/tree/master/JavaScript