클로저(Closure)에 대해 알아봅시다.

 

안녕하세요. 루루개발자 입니다.

이번에는 클로저(Closure) 에 대해 알아보려고 합니다.

 

 

클로저(Closure) 란?

---

일반적으로 함수 내에 선언된 지역 변수들은 그 함수가 처리되는 동안에만 존재합니다. 즉, 함수가 종료되면 (리턴되면) 함수 내에 선언되었던 변수는 파괴되고 더 이상 접근 불가능 하다고 생각하는 것이 일반적입니다만, 예외가 존재합니다.

 

function makeFunc() {
  const name = "홍길동";
  function displayName() {
    alert(name);
  }
  return displayName;
}

const myFunc = makeFunc();
myFunc();

 

위 예시에서 name 이란 변수는 "makeFunc" 함수 내에 선언된 지역 변수 입니다. "displayName" 이란 함수는 자신의 외부에 선언된 name 이란 변수를 참조하고 있습니다. 그리고 "makeFunc" 함수는 그러한 "displayName" 함수를 반환(리턴) 하고 있습니다.

 

• makeFunc 함수 입장에서 봤을 때 name 변수는 자신의 내부에 선언된 지역 변수입니다.
• displayName 함수 입장에서 봤을 때 name 변수는 자신의 외부에 선언된 변수입니다.

 

"myFunc" 함수를 호출하면 정상적으로 "홍길동"이 alert 창이 표시되는 것을 확인 할 수 있습니다. 일반적으로 생각하면 "makeFun" 함수가 종료되는 시점에서 name 변수가 파괴되어 "displayName" 이 호출 될 시 정의 되지 않은 변수를 호출하여 에러가 발생할 것으로 예상되지만 사실은 그렇지 않습니다. 

 

"displayName" 함수는 "makeFun" 함수에서 생성되어 "myFunc" 변수에 저장되어 있는 상태입니다. (즉, 언제든지 사용할 수 있는 상태입니다.) "myFunc" 변수에 저장되어 있는 "displayName" 함수는 본인이 호출 될 때, name 이란 변수를 참조해야 하기 때문에 name 변수를 사용 가능한 상태로 남겨두게 되는데 이 현상은 "displayName" 함수가 name 변수에 대해 클로저를 생성한 것이라고 볼 수 있습니다.

 

즉, 클로저는 "자신이 선언될 당시의 환경을 기억하는 것" 이라고 볼 수 있습니다. (displayName 함수는 자신이 선언되었을 때 name 이란 변수를 계속 기억하고 있는 것이라고 볼 수 있기 때문입니다.)

 

 

 

참고자료

---

https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures

클로저 - JavaScript | MDN

 

https://hanamon.kr/javascript-%ED%81%B4%EB%A1%9C%EC%A0%80/

[JavaScript] 클로저(Closures)란 무엇일까? - 하나몬