[프런트] 클로저에 대해 설명해주세요

✅ 추천 구조 (실전용)
1. 한 줄 결론 → 질문에 대한 직접 답
2. 이유/근거 (1~2개) → 왜 그렇게 생각하는지
3. (선택) 예시 or 경험 → 신뢰도 상승

결론: ~입니다.(한 줄 결론 → 질문에 대한 직접 답)
이유: 왜냐하면 ~ 때문입니다.
보충: 추가로 ~ 특징이 있습니다.
예시/경험: 실제로 ~ 해봤습니다.
정리: 그래서 ~라고 볼 수 있습니다.

- 마무리 애매하면 감점 느낌 남
- 모른다고 끝내면 안 됨, 아는 선까지 말하기

1. 한줄 결론

클로저는 함수가 선언될 때의 스코프를 기억하여, 함수가 생성된 이후에도 그 스코프에 접근할 수 있는 기능을 말합니다. 비유하자면, 함수가 자신이 생성된 환경을 '기억'하는 것이라고 할 수 있습니다.

반환된 내부 함수가 외부 함수의 지역 변수와 매개변수를 인스턴스의 필드처럼 사용하는 것

클로저는 자바스크립트의 함수가 일급 객체라는 특성과 렉시컬 스코프의 조합으로 만들어집니다.

=> 함수가 일급 객체이고, 중첩 함수(함수안에 함수 선언)가 허용되며, lexical scoping(함수가 선언된 위치에 따라 사용할수 있는 변수의 범위가 결정)이 지원되는 모든 언어들에서 사용 가능

예시와 함께 클로저의 동작을 설명드리면 좋을 것 같습니다.

 

2. 예시

function outerFunction(addValue) {
  let count = 0;
  
  return function innerFunction() {
    count += addValue;
    console.log(count);
  };
}

const newFuncCounterBy1 = outerFunction(1);
const newFuncCounterBy3 = outerFunction(3);

counterBy1();
counterBy3();

여기서 innerFunction은 outerFunction의 내부에 정의되어 있습니다. 

innerFunction은 자신이 생성된 스코프, 즉 outerFunction의 스코프를 기억하고, 
outerFunction의 호출이 완료된 이후에도 그 스코프에 접근할 수 있습니다.

그리고 이에 따라 innerFunction은 outerVariable에도 접근할 수 있습니다. 이것이 클로저가 동작하는 방식입니다.

=> innerFunction은 죽었어야할 호출되어 죽었어야할 outerFunction의 addValue와 count사용 가능

 

3. 언제 사용하는가

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

 

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

    렉시컬 스코프에 저장된 count와 addValue의 값들이 함수 실행 외에 다른 방법으로 접근 못하게 은닉됨

 

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

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

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

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

 

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

-> 사실 첫번째 이유와 연관된 이유임

 

https://www.youtube.com/watch?v=WbVVKY9CDP0