[Javascript] 클로저(Closure)

https://www.google.com/url?sa=i&url=https%3A%2F%2Fdev.to%2Fdivakarkumar%2Fjavascript-closure-environment-4b0k&psig=AOvVaw02lli5udXNO6f_dA3Uwx_J&ust=1606740254887000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCKDZmYfkp-0CFQAAAAAdAAAAABAD

 

 

 Javascript(JS)에서 중요한 개념인 Closure를 알아보겠습니다.

JS를 사용해본 사람이라면 언젠가 들어봤을겁니다. 클로저. 하지만 개념이 어렵고 낯설어 이해하기가 쉽지 않습니다.

지금부터 closure의 개념과 간단한 예제를 통해 왜! 사용하는지에 대해서 알아보겠습니다.

 

! 클로저(Closure)란?

Javascript에만 국한되는 것이 아닌 일급객체를 다루는 함수형 프로그래밍 언어에서 사용하는 개념으로,

함수가 실행될 때 의 스코프(lexical scope)를 기억해 함수가 외부에서 사용됐을 때도 이를 기억해 사용할 수 있게 해주는 것이다. 

이렇게만 들으면 매우 어렵습니다.

간단하게 전역변수를 지역변수처럼 사용할 수 있게 해주는 것입니다.

이렇게도 들어도 매우 어렵습니다. :( 코드로 살펴보겠습니다.

 

 

! 지역변수 vs 전역변수

클로저를 이해하려면 지역과 전역에 대한 이해부터 필요합니다.

여기서 지역 혹은 전역이 스코프를 의미하는 것이고 코드를 보겠습니다.

let a = 1; //전역변수 

function f1(){
	let b = 2; //지역변수
    console.log(a); // output : 1;
    console.log(b); // output : 2;
}

    console.log(a); // output : 1;
    console.log(b); // output : b is not defined;

a는 가장 밖의 함수인 (main과 같은) {}안에 존재하는 전역변수로 선언이 되었고,

b는 f1의 {}안의 scope에 해당하는 f1만의 전역변수 (즉, 지역변수)로 이용이 됩니다. 

따라서 b를 f1밖에서 이용하려고하면 존재하지 않는 변수라고 나오게 되는거죠.

 

! 클로저(Closure)

let Click = () => {
    let counter = 0; //자유변수
    
    let up = () => {
        counter++;
        console.log(counter);
    }

    return up;

}; 

let a = Click();  // a는 Click 실행 후 return으로 up 함수를 받습니다.
a();	// output : 1
a();	// output : 2

Click이라는 함수 안에 counter라는 지역변수가 있습니다.

up 함수는 그 counter를 1만큼 증가시킨후 console을 찍는 함수입니다.

 

이제 밖에 a에 Click()을 넣으면 Click함수가 return한 up함수가 되고,

그 안엔 이들만의 공간이 생기며, 이 환경을 기억하고 counter라는 자신만의 공간의 변수를 이용할 수 있습니다.

let Click = () => {
    let counter = 0; //자유변수
    
    let up = () => {
        counter++;
        console.log(counter);
    }

    return up;

}; 

let a = Click();
a(); // output : 1
a(); // output : 2
let b = Click();
b(); // output : 1

b에도 똑같이 Click()을 넣어주면 b는 또 그만의 공간이 생기고, 그 환경을 기억해 b의 counter를 갖습니다.

따라서 a와 b는 각각 그들의 공간의 counter를 갖게 되는 것이죠.

 

이렇게 closure를 이용하면 객체지향 프로그래밍의 캡슐화, 정보은닉의 효과(private 처럼)를 가질 수 있습니다.

이제 a와 b의 각 counter는 a()와 b()의 호출만을 통해서 안전하게 보관되고 증가될 수 있게 됩니다.