클로저 Closure

isTuna·2021년 3월 26일
1

Javascript

목록 보기
3/4

오늘 면접에서 나왔지만 대답하지 못했던 Closure에 대해서 알아보려고합니다. Closure가 무엇인지와 예를 정리해보겠습니다.

Lexical Environment

Closure를 이해하기 위해서는 Lexical 환경에 대해서 먼저 알고있어야 합니다. Lexical 환경은 함수, 코드 블럭, 스크립트 전체 마다 생성되는 내부 객체라 보시면 됩니다. 그리고 Lexical Environment는 아래 두 가지로 나뉩니다.

  • Enviorment Record(환경 레코드) : 모든 지역 변수를 프로포티로 저장하고 있는 객체입니다.
  • Outer Lexical Environment(외부 렉시컬 환경) : 현재 렉시컬 환경보다 상위의 렉시컬 환경

첨언하자면 변수는 특수 내부 객체 환경 레코드의 프로퍼티일 뿐이라고 합니다. 즉, 변수를 가져오거나 변경하는 것은 환경 레코드의 프로퍼티를 가져오거나 변경하는 것과 같다고 합니다.

전역 Lexical Environment는 스크립트 전체와 관련되어있습니다. 스크립트가 시작되면 스크립트 내에서 선언된 변수 전체가 전역 렉시컬 환경에 올라갑니다.

함수가 실행되면 자동적으로 렉시컬 환경이 생성됩니다. 이 렉시컬 환경에는 함수가 넘겨받은 매개변수와 함수의 지역변수가 저장됩니다.

코드에서 변수에 접근하려 할때 먼저 내부의 렉시컬 환경에서 찾습니다. 만약 찾지 못하면 외부 렉시컬 환경에서 변수를 찾습니다. 이 과정은 전역 렉시컬 환경 까지 범위가 늘어납니다.

Closure

Javascript에서는 모든 함수가 자동으로 Closure가 됩니다. Closure는 외부 변수를 기억하고 외부 변수에 접근할 수 있는 함수를 말합니다.

함수와 그 함수가 선언되었을 때의 Lexical Environment의 조합이 Closure다.

function generateAdder(x) {
	return function(y) {
    	return x+y;
    }
}

const addFive  = generateAdder(5);
const addEight = generateAdder(8); 

console.log(addFive(4))   // 9   
console.log(addEight(2))  // 10

addFive가 생성한 후에 addFive(4)가 실행될 때도 상위함수인 generateAdder에 접근이 가능합니다.


profile
청소연구소 개발자 (2021. 05~ )

0개의 댓글