14. javascript Closure(클로저)

javascript 는 어휘적 환경(Lexical Environment) 가진다. javascript 는 실행되기 전 코드를 전체적으로 읽는다.

 // *1
let one; //*2
one = 1; //*3

function addone(num){
	console.log(one + num);
}

addOne(5); //*4

위의 코드의 *1 의 위치에서의 Lexical 환경은 one, 함수 addOne 이 있다. one은 호이 스팅은 되었지만 초기화가 되지 않아 사용할 수 없다. let one이나 const one으로 호출이 되어야 사용가능하다. 함수인 addOne 은  *1에서 사용이 가능하다. 일반 함수 식은 호이 스팅이 되어 어느 위치에 있든 스코프 최상단에서 호출한 것과 동일한 효력을 가진다.  

 

*2 위치에서는 one이 호출 되었지만 값이 정해지지 않아 let one = undefined; 와 같다. 함수는 역시 사용이 가능하다.

 

*3 위치에서는 one 의 값은 1이 된다. 함수는 역시 사용이 가능하다.

 

*4 위치에서는 새로운 lexical 환경이 생성된다. addOne 함수 내부 Lexical 환경이 생성이 되고 num 은 5로 할당이 된다. 하지만 one은 없어 외부 lexical 환경을 참조하게 된다. 외부 lexical 환경은 one = 1; 그리하여 addOne(5)의 값은 6이 출력이 된다.

 

외부 lexical 환경은 전역 lexical 환경이다. 내부 렉시컬 함수는 외부 렉시컬 함수를 참조하여 외부 렉시컬 함수의 변수를 참조하여 사용할 수 있다.

 

Closure : 함수와 렉시컬 환경의 조합 , 함수가 생성될 당시의 외부 변수를 기억 생성 이후에도 계속 접근 가능

 

 

function makeCounter(){
    let num = 0;
    
    return function (){
    	return num++;
    }
}

let counter = makeCounter();

console.log(counter()); //0
console.log(counter()); //1
console.log(counter()); //2

counter에 makeCounter의 리턴 함수를 할당한다. 내부 함수에서 num의 값을 찾을 수 없어 외부 함수인 let num = 0; 을 참조한고 처음 호출이 되면 초기값 0이 나오게 된다. 두 번째는 1 , 세 번째는 2 계속 호출하게 되면 숫자가 하나씩 늘어나게 된다.

코드를 실행하고 값을 받는 부분에서 num의 부분은 찾아볼 수 없다. let num =0 은 은닉화가 된 것이다. 

 

그러다 값이 1씩 증가하다 100씩 증가할 수 있을까??  // 그럴 수 없다. 

 

그리하여 클로저에 대해 알게 되었다.

 

javascript의 데이터의 접근 방식에 대해 알 수 있었다. 클로저를 이용해 데이터를 은닉화하여 데이터 무결성을 유지할 수 있을 것이다.