[Javascript] 클로저(Closure)란?

 

자바스크립트 클로저란?

 

 

 

 

 

📌 개념

어떤 함수가 자신의 내부가 아닌 외부에서 선언된 변수에 접근하는 것을 의미

​​

​

📌 설명

var num = 10;

function print(){
   var num = 2;
   log();
}

function log(){
   console.log(num);
}

print();
log();

위의 경우에 print()와 log()가 어떤 값을 return 할지 생각해보자

scope에 대한 개념을 알고 있다면 10, 10 이 출력될 것이라고 추측할 것이고

아니라면 2, 10 혹은 2, 2 라고 추측할 것이다

​

scope(스코프)는 { } 블록 안에 있는 변수, 함수들의 사용 범위이다

즉 print() 함수 내부에 있는 var num = 2;, num 변수는 print() 내부에서만 사용가능하다

하지만 첫번째 줄에 쓰여있는 var num=10은 { } 블록이 없는 글로벌 구역에서 선언되었기 때문에

어느 곳에서도 num 변수를 참조할 수 있다

이를 글로벌 변수라고 한다

​

그러면 log() 함수가 선언될 때 어떤 num을 참조했을지 생각해보자

print() 함수가 실행된 후 log()가 실행되었으니 log는 print()의 num=2를 참조할 것이라고 생각할 수 있다

하지만 함수가 호출되는 순서, 위치는 상관없다

log()가 선언되었을 때에는 print() { } 안에 있는 지역 변수 num이 아닌 글로벌 변수 num을 참조할 수 밖에 없다

​

이처럼 함수는 자신이 선언되었을 당시의 환경을 기억하여 활용한다

​

​

 

 

📌 예제

function hello(){
   var str = "hello! ";
   var name = "earth";

   function log(){
      console.log(str + name);
   }
   
   return log;
}

var func = hello();
func();

func()은 어떤 결과를 출력할까?

위의 내용이 확실히 이해가 되었다면 hello! earth 라고 출력되는 것을 알 수 있다

이 예제의 경우 log는 hello() 함수 내부에서 선언되어있기 때문에

hello() 내부의 변수 str, name에 접근할 수 있다

이것을 클로저 함수라고 한다

​

 

 

한 가지 예제를 더 살펴보자

 

function add(){
   var x = 5;
   var y = 9;
  
   function log(){
      console.log(x + y);
   }

   exec(log);
}

function exec(func){
   func():
}

add();

 

클로저 함수가 무엇인지 몰랐다고 하더라도 자바스크립트를 사용하는 사람이라면

출력 결과를 쉽게 예상할 수 있을 것이다 //14

add() { }의 밖에서 호출된 func() 함수는 x, y에 접근할 수 없어야 하지만

log() 함수는 선언되었던 주변 환경을 기억하기 때문에 x, y 값을 기억해 14를 출력하게 되는 것이다