(자바스크립트)클로저

클로저

• 클로저는 함수와 그 함수가 접근할 수 있는 변수의 조합니다.
• 외부 함수의 변수에 접근할 수 있는 내부 함수
• 자신을 포함하는 외부 함수의 변수에 접근할 수 있는 함수를 말한다.
• 자신이 생성된 환경(lexical environment)을 기억한다.

실행 컨텍스트의 관점에서 설명

• 내부함수가 유효한 상태에서 외부함수가 종료하여 외부함수의 실행 컨텍스트가 반환되어도, 외부함수 실행 컨텍스트 내의 활성 객체(변수, 함수 선언 등의 정보를 가지고 있음)는 내부함수에 의해 참조되는 한 유효하여 내부함수가 스코프 체인을 통해 참조할 수 있는 것을 의미한다.

왜 클로저((closure: 폐쇄)라고 부르는가?

• 외부 함수 호출이 종료된 후에도 함수의 내부변수에 대한 메모리할당을 유지하지만 직접 볼 수 없게 은닉화하기 때문이다.

클로저의 특징

1. 외부 함수의 변수에 접근 가능
   -클로저 함수는 자신이 생성된 외부 함수의 변수에 접근할 수 있다. 이를 통해 함수 내부에서 외부 함수의 변수를 변경하거나 참조할 수 있다.
2. 변수 값이 유지
   -클로저 함수는 자신이 생성된 환경을 기억하기 때문에, 함수가 종료되더라도 자신이 참조하는 변수 값이 유지된다.
3. 프라이빗 변수 생성 가능
   -클로저 함수 내부에서 선언된 변수는 외부에서 접근할 수 없기 때문에, 프라이빗 변수를 생성할 수 있다.

클로저의 특징
1. 상태 유지
-현재 상태를 기억하고 변경된 최신 상태를 유지한다.
2.전역 변수의 사용 억제
-만약 자바스크립트에 클로저라는 기능이 없다면 상태를 유지하기 위해 전역 변수를 사용할 수 밖에 없다. 전역 변수는 언제든지 누구나 접근할 수 있고 변경할 수 있기 때문에 많은 부작용을 유발해 오류의 원인이 되므로 사용을 억제해야 한다.

3. 정보의 은닉

클로저의 활용

• 콜백 함수: 클로저 함수는 외부 함수의 변수를 기억하기 때문에, 콜백 함수에서 상태를 유지하거나 값을 전달할 때 유용하다.
• 반복문: 반복문 내부에서 클로저 함수를 사용할 때, 각 클로저 함수는 자신이 생성된 환경을 기억하게 된다. 이를 이용해 반복문 내부에서 비동기 처리나 자연 실행을 구현할 수 있다.
• 함수의 리턴값으로 사용

const hello = function() {
	console.log("Hello World");
    return function() {
    	console.log("Hello World 22");
    }
}

const hello2 = hello();
hello2(); 

const globalVar = '전역 변수';

function outerFn() {
  const outerFnVar = 'outer 함수 내의 변수';
  const innerFn = function() { 
    return 'innerFn은 ' + outerFnVar + '와 ' + globalVar + '에 접근할 수 있습니다.';
  }
	return innerFn;
}
const innerFnOnGlobal = outerFn();
const message = innerFnOnGlobal();
console.log(message); 
//innerFn은 outer 함수 내의 변수와 전역 변수에 접근할 수 있습니다.

-??innerFnOnGlobal은 outerFnVar에 접근 못하지 않나??
내부 스코프레 접근할 수 없으니까!!
왜 접근할 수 있을까?? innerFn 함수가 최초 선언되었던 환경에서는 outerFnVar에 접근할 수 있기 때문이다. innerFnGlobal은 innerFn의 주소값을 가지고 있고, innerFn은 클로저로서 outerFnVar에 접근할 수 있다. 이 환경을 렉시컬 환경이라고 한다.