[FE 기술 면접] 클로저

Ahnzi·2024년 12월 5일

프론트엔드 기술 면접 공간

목록 보기

1/11

클로저란?

클로저는 함수가 선언된 당시의 외부(스코프)의 변수를 기억하고 해당 함수가 선언된 이후에도 계속해서 접근할 수 있는 기능을 의미합니다. 비유하자면 함수가 자신이 생성된 환경을 "기억"하는 것이라고 할 수 있습니다. 클로저는 자바스크립트의 함수가 일급 객체라는 특성과 렉시컬 스코프의 조합으로 만들어집니다.

* 일급 객체 : 해당 언어의 다른 객체들과 동일하게 취급할 수 있는 특별한 "대우"를 받는 객체. 자바스크립트에서 함수는 일급 객체로 취급.

* 렉시컬 스코프 : 함수가 선언된 위치에 따라 스코프(변수의 유효 범위)가 결정되는 자바스크립트의 스코핑 규칙을 말함. 이는 코드가 실행되는 위치가 아니라 코드가 작성된 위치를 기준으로 변수의 스코프를 결정.

클로저 예시 코드

function outerFunction(outerVariable) {
  return function innerFunction(innerVariable) {
    console.log("Outer Variable : " + outerVariable);
    console.log("Inner Variable : " + innerVariable);
  }
}

const newFunction = outerFunction("outside");
newFunction("inside");

클로저 예시 코드 분석

함수 선언

function outerFunction(outerVariable) {
  return function innerFunction(innerVariable) {
    console.log("Outer Variable : " + outerVariable);
    console.log("Inner Variable : " + innerVariable);
  };
}

outerFunction
- 외부 함수로 하나의 매개변수 outerVariable 을 받습니다.
- 내부에 innerFunction 이라는 함수를 정의하고 반환합니다.
- innerFunction은 outerFunction의 스코프에 선언되었으므로 outerVariable에 접근할 수 있습니다.
innerFunction
- 반환된 함수로 매개변수 innerVariable을 받습니다.
- 내부에서 outerVariable(외부 스코프 변수)과 innerVariable(자신의 매개변수)을 출력합니다.

outerFunction 호출

const newFunction = outerFunction("outside");

outerFunction("outside") 실행
- outerVariable에 "outside"가 전달됩니다.
- 결과 : innerFunction 함수가 반환됩니다.
- 반환된 innerFunction은 newFunction 변수에 할당됩니다.
- 이 시점에도 innerFunction은 outerVariable의 값("outside")을 기억합니다.

innerFunction 호출

newFunction("inside");

newFunction("inside") 실행
- 이 호출은 반환된 innerFunction("inside")를 실행하는 것입니다.
- innerVariable에 "inside"가 전달됩니다.

출력 결과

Outer Variable : outside
Inner Variable : inside

클로저 예시 코드 정리

innerFunction은 outerFunction의 내부에 정의되어 있습니다. innerFunction은 자신이 생성된 스코프, 즉 outerFunction의 스코프를 기억하고 outerFunction의 호출이 완료된 이후에도 그 스코프에 접근할 수 있습니다. 그리고 이에 따라 innerFunction은 outerVariable에도 접근할 수 있습니다. 이것이 클로저가 동작하는 방식입니다.

innerFunction은 클로저로 outerFunction의 변수 outerVariable을 기억합니다.
outerVariabale의 값은 innerFunction이 호출될 때까지 유지됩니다.
클로저를 사용하면 상태를 유지하거나 캡슐화를 구현할 수 있습니다.

클로저는 언제 활용하나요?

클로저는 변수와 함수의 접근 범위를 제어하고 특정 데이터와 상태를 유지하기 위해 자주 활용됩니다. 크게 세 가지 대표적인 사용 사례가 있습니다.

1. 데이터 은닉

클로저는 데이터 은닉에 활용됩니다.
클로저는 외부에서 접근할 수 없는 비공개 변수와 함수를 만들 수 있습니다. 이를 통해 데이터를 은닉하여 외부 접근을 막고 데이터 무결성을 유지할 수 있습니다. 예를 들어, 특정 함수 내부에서만 접근 가능한 변수를 생성하고 이를 조작할 수 있는 함수만 외부로 노출하여 안전하게 데이터를 관리할 수 있습니다.

2. 비동기 작업

클로저는 비동기 작업에 활용됩니다.
클로저는 비동기 작업에서 이전의 실행 컨텍스트를 유지해야 할 때 유용합니다. 콜백 함수가 비동기적으로 실행될 때 클로저를 사용하면 함수 실행 시점의 변수를 참조할 수 있습니다.

function createLogger(name) {
  return function() {
    console.log(`Logger: ${name}`);
  }
}

const logger = createLogger("MyApp");
setTimeout(logger, 1000); // 1초 후에 "Logger: MyApp" 출력

위의 예시에서 클로저가 name 변수 ("MyApp")를 저장하여 1초 후에도 해당 값이 유지되어 출력됩니다.

3. 모듈 패턴

클로저는 모듈 패턴을 구현하는데 활용됩니다.
모듈 패턴은 특정 기능을 캡슐화하고, 외부에 공개하고자 하는 부분만 선택적으로 노출하여 코드의 응집력을 높이고, 유지보수성을 향상시키는 패턴입니다. 클로저를 활용하면 필요한 함수와 데이터만 외부로 노출함으로써 모듈 패턴을 쉽게 구현할 수 있습니다.