자바스크립트 핵심 개념 : 클로저

1. 클로저란 특정 현상을 말한다.

클로저는 어떤 특정 현상을 뜻하는데,
길게 풀어 쓰면 "컨텍스트 A에서 선언한 변수 a를 참조하는
내부함수 B를 A의 외부로 전달할 경우 A가 종료되어도 a가 사라지지 않는 현상"이다.
쉽게 풀어쓰면 "최초 선언시의 정보를 유지하는 현상"이다.

저 현상의 의의는 지역변수를 함수 종료후에도 사라지지 않게 쓸 수 있다는 것이다.
그러나 이렇게 읽어보면 이해가 가지 않으니, 코드를 보자.

 

2. 그 이론을 눈으로 확인하고 외우자

 

 function a() {
  var x = 1;

  function b() {
    console.log(x);
  }
  b();
  
 }
 
 a(); //1
 console.log(x); //에러

 

기본적으로 사용하는 스타일이다.

여기서 변수 x는 a안에서 선언되고 할당된 것이므로
a의 외부에서는 접근할 수 없다.
오직 a함수와 b함수 안에서만 유효하다.
그래서 x를 a함수 밖에서 사용할 때는 에러가 난다.
그러나 x의 값으로 외부와의 데이터연동을 하기 어렵다면 코딩에 한계가 있을 것이다.

 function a() {
  var x = 1;

  return function b() {
    console.log(x);
  }
  b();
  
 }
 
 var c = a(); 
 c(); //1

리턴 값이 생기고, 함수를 변수에 담는 예제로 바뀌었다.

즉, 내부에서 함수 자체를 반환해주고
그 함수를 외부에서 c에 담아준다.
이제 c라는 변수를 이용하면 외부에서 x의 값을 출력할 수 있다.
여기서 중요한 점은 var c가 a()를 담고 있다는 것,
그러니까 var x=1이고, b가 실행된다는 기술이 담겨있어서
c를 실행하기 전까진 계속 유효하다는 것이다.
즉, 최초 선언시의 정보를 유지한다.
그러나 x는 얻을 수 있지만 x를 바꿀 수는 없다.

https://yulfsong.tistory.com/92 

자바스크립트 핵심 개념 : 함수와 변수 사용

 

 function a() {
  var _x = 1;

  return {
    get x() { return _x },
    set x(d) { _x = d }
  }
  
 }
 
 var c = a(); 
 c.x = 10

자바개발자라면 어쩐지 익숙한 코드이다.
바로 get, set을 통해서 x의 값을 바꿀 수 있다.
a()가 실행되고 _x에 1이 할당되었으므로
get의 값은 _x를 리턴해서 1이다.
그러나 c.x 에 10을 담아주면
set에 10이 할당되어 _x에 10이 들어간다.
그러면 _x를 보호하면서도 동시에
x를 내부에서 변경하여 외부에서 쓸 수 있게 된다.
그래서 지역변수를 함수 종료후에도 사라지지 않게 쓸 수 있다.

 

 

3. 이 글의 핵심

클로저를 이용하여 지역변수를 함수 종류후에도 쓸 수 있게되는데,
바로 return과 변수에 함수 넣기, getter, setter의 사용 등등을 이용한다는 것을 이해하고
지속적으로 코드 연습을 해야한다.