TIL-2024.03.22 - JS - Closure

 

 

 

------- Closure

 

설명:

- 함수와 그 함수가 선언된 렉시컬 환경(lexical environment) 사이의 관계

- 함수가 자신이 선언된 스코프 외부에서 호출되더라도, 해당 스코프에 대한 참조를 유지하고 있는 것을 의미

 

사용 이유:

1. 데이터 은닉 > Closure 을 사용하여 함수 내에서 선언된 변수들을 외부에서 접근할 수 없도록 은닉
2. 콜백 함수 > 콜백함수로 사용되어 비동기적인 작업으로 외부 변수에 접근 
3. 부분 적용 함수 > 함수에 인자를 부분적으로 적용

 

기본 예시:

function outerFunction() {
  let outerVariable = 'I am outer';

  function innerFunction() {
    console.log(outerVariable); // outerVariable에 접근
  }

  return innerFunction; // innerFunction을 반환
}

const myFunction = outerFunction(); // outerFunction이 실행되고, 반환된 innerFunction을 myFunction에 할당

myFunction(); // "I am outer"가 출력됩니다.

 

 

 

클로저 예제2:

 

// 함수는 message와 delay 매개변수로 받고, 지정된 시간(delay)이 경과한 후에 message를 출력하고, 작업을 취소할 수 있는 함수를 반환
function delayedMessage(message, delay) {
  let timerID;

  // 메시지를 콘솔에 출력.
  function printMessage() {
    console.log(message);
  }

  // setTimeout 함수를 사용하여 printMessage 함수를 delay 후에 호출되며 setTimeout 함수는 타이머 ID를 반환하는데, 이 ID를 timerID 변수에 재할당.
  function scheduleMessage() {
    timerID = setTimeout(printMessage, delay);
    //timerID = setTimeout(()=>console.log(message), delay);

  }

  // clearTimeout 함수를 사용하여 이전에 설정한 타이머를 취소. 또한 "Message canceled."라는 메시지를 콘솔에 출력.
  function cancelMessage() {
    clearTimeout(timerID);
    console.log("Message canceled.");
  }


  // scheduleMessage 함수를 즉시 실행하여 비동기 작업을 시작합니다.
  scheduleMessage();

  // cancelMessage 함수를 반환하여 클로저로 상태를 유지합니다.
  return cancelMessage;
}

// delayedMessage 함수를 호출하여 3초 후에 "Hello, World!"를 출력하도록 설정합니다.
const cancel = delayedMessage("Hello, World!", 3000);

// 2초 후에 작업이 취소되도록 설정합니다.
setTimeout(cancel, 2000);

 

 

작동 원리:

 

1. delayedMessage 함수가 호출되며.  message와 delay라는 두 개의 parameter를 받음.
2. timerID 변수가 선언, printMessage, scheduleMessage, cancelMessage라는 세 개의 내부 함수가 정의.
3. scheduleMessage 함수에서 setTimeout 함수를 사용하여 printMessage 함수를 delay 시간 후에 실행하도록 예약.
4. cancelMessage 함수에서 clearTimeout 함수를 사용하여 이전에 예약된 작업을 취소. 이후 "Message canceled." 출력.
5. cancelMessage 함수가 delayedMessage 함수에 의해 반환되며.  클로저로서 timerID 상태를 유지.
   (cancelMessage는 클로저가 되어 delayedMessage 함수의 실행 컨텍스트가 종료된 이후도, timerID 상태를 유지)
6. cancel 변수에 delayedMessage 함수를 호출한 결과인 cancelMessage 함수가 할당.
7. setTimeout 함수를 사용하여 2초 후에 cancel 함수가 호출.
8. cancel 함수가 호출되면, 이전에 예약된 작업이 취소되고 "Message canceled." 메시지만 출력됩니다.

 

면접에서 물어볼 때 point:

 

클로저(Closure)란 프로그래밍 언어의 개념 중 하나로, 함수와 그 함수가 선언될 당시의 렉시컬 환경(Lexical Environment) 사이의 관계를 나타냅니다. 이것은 함수가 선언될 때 외부 변수에 대한 참조를 기억하고, 그 변수들에 접근할 수 있도록 하는 메커니즘입니다.

클로저의 기본 아이디어는 함수가 선언될 때 외부 변수에 대한 참조를 기억하고, 이 참조를 유지하여 함수가 실행될 때 해당 변수에 접근할 수 있도록 하는 것입니다.  이러한 동작은 함수가 선언된 렉시컬 환경과 그 함수의 실행 컨텍스트가 종료된 이후에도 유지됩니다.

 

사용 이유로는 데이터 은닉, 비동기 작업 상태 유지 및 제어, 외부 변수에 접근하여, 그 값을 변경/조작할 수 있는 함수 생성