스토리

Frontend

🔐 클로져(Closure)에 대해서

Aug. 20, 2021, 3:16 pm.

By Jaekwon Han

Jaekwon Han leads Front-end team at 29CM and has worked as a Front-end developer and an UI designer.

Closure

Closure는 함수와 함수의 실행 환경(또는 생성 시에 주입된 컨텍스트)과 함수가 번들된 상태를 뜻한다. 그러므로 클로져는 함수 바깥의 스코프를 함수 안에서 접근할 수 있도록 해주며, 자바스크립트에서는 클로져는 함수가 생성될 때 생성된다.

클로저는 함수이다. 그것이 생성된 컨텍스트, 심지어 그 컨텍스트가 역할을 다했을 때에도, 그 컨텍스트의 변수들에 접근 할 수 있는 함수이다.

1const init = () => {
2  const prefix = 'Hello' // init의 지역 변수
3  function greet(name) { // 클로져
4    console.log(prefix + ' ' + name) // 부모 함수의 변수를 사용한다
5  }
6  
7  return greet
8}
9
10const greet = init()
11greet('Mozilla') // Hello Mozilla
12greet('Google') // Hello Google

자바스크립트 파서는 nested된 함수들이 각자 참조하는 변수들을 이처럼 resolve한다. Lexical scoping이란 뜻은 소스 코드에서 변수가 정의된 위치를 통해서 그 변수가 사용가능한 곳이 정의된다는 뜻이다. nested 함수들은 바깥 스코프의 변수들에 접근이 가능하다.

This is an example of lexical scoping, which describes how a parser resolves variable names when functions are nested. The word lexical refers to the fact that lexical scoping uses the location where a variable is declared within the source code to determine where that variable is available. Nested functions have access to variables declared in their outer scope.

클로져를 사용하는 이유

첫번째 이유는 데이터를 보호하기 위해서이다. 데이터를 보호함으로써 우리가 작성한 프로그램이 implementation detail은 감추고 interface를 제공할 수 있다. (전자가 후자보다 변하기 쉽다)

클로져를 사용하려면, 단순하게 함수를 다른 함수 안에 정의하고 노출하면 된다.

클로져가 동작하는 방식

함수가 실행될 때, Lexical 환경이 자동으로 생성된다. 이곳에 지역 변수와 함수 실행 시 주입된 변수들이 저장된다. 함수가 실행되는 동안에는 두 개의 Lexical 환경이 존재한다. 함수 내부와 외부. 변수를 찾는 순서는 내부에서 외부 순서이다.

정리

클로져는 바깥 변수들을 기억하고 접근할 수 있는 함수
함수와 lexical 환경의 합
[[Environment]]는 외부 lexical 환경을 지칭한다.