Chapter5. 클로저와 가까워지기

클로저는 함수 선언 시 만들어지는 유효 범위를 뜻한다.

var outerValue = 'outerValue';

var later;

function outerFunction() {

var innerValue = 'innerValue';

function innerFunction() {

console.log('outerValue', outerValue); // outerValue

console.log('innerValue', innerValue); // innerValue

}

later = innerFunction;

}

outerFunction();

console.log('innerValue', innerValue);

later();

outerFunction 함수와 innerFunction 함수가 생성되면서 각 함수에 대한 클로저가 생성되어,

클로저에 대한 특징을 확인할 수 있는 예시다. 

위의 코드를 클로저가 적용된 것(함수에 의한 유효 범위)을 도식화하면 아래와 같다. 

위의 그림에서 보자면, 

outerValue와 later 변수는 가장 상위인 window 영역에 선언된 변수다. 

상위의 영역에 선언된 변수는 하위의 영역 outerFunction, innerFunction 안에서

접근이 가능하며 또한 값을 할당할 수 있다.  

하지만 이와 반대로 outerFunction 영역 안에서 선언된 변수(innerValue)는

outerFunction의 상위 영역(window)에서 접근하고자 하면 에러를 뿜어낸다.

예시에서 확인하는 바와 같이 

함수가 선언되면 새로운 유효 범위 영역(클로저)이 생기게 되고,

유효 범위에 따라 접근할 수 있는 변수가 달라진다.

이와 같은 JS의 특징을 활용하면 private 변수를 생성할 수 있다. 

function Ninja() {

    var feints = 0; // 이 변수의 유효 범위는 함수 내부. 따라서 외부에서 접근이 불가하므로 private 변수처럼 동작된다.

    this.getFeints = function() {

        return feints;

    }

    this.feint = function() {

        feints++;

    }

}

var ninja = new Ninja();

ninja.feint();

console.log(ninja.getFeints()); // 1

console.log(ninja.feints); // undefined

console.log(ninja.feint()); // 1 증가

console.log(ninja.getFeints()); // 2

위의 예시에는 Ninja라는 생성자 함수를 생성하고 (Ninja라는 이름의 클로저가 생성)

함수 내부에 feints 변수를 선언해두었다. 

window 영역에서 Ninja 영역의 feints 변수를 접근하고자 할 수가 없다. 

(하위 영역에서 선언된 변수는 상위 영역에서 접근이 불가능하기 때문이다.)

하지만, Ninja 영역 내부에 선언된 getFeunts, feints 메소드는

같은 영역에 존재하기 때문에 feints 변수에도 접근이 가능하며 값을 달리할 수 있다. 

따라서 상위 영역에서 ninja 변수를 생성자 함수를 호출하여 생성하고 

ninja.feints(), ninja.getFeints() 메소드를 통해 feint 값을 증가하고 가져올 수 있게되어

private 변수처럼 동작하도록 만들 수 있다. 

(이때, Ninja 함수 안에서 feints 변수를 this.feints로 선언했다면 외부에서 접근이 가능했을 것이다.)