100log

About

클로저(Closure)에 대해서 설명해주세요.

Front-end

클로저(Closure)

클로저란?

언제 활용할까?

main-img

클로저(Closure)

클로저란?

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

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

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

// Outer Variable: outside
// Inner Variable: inside

여기서 innerFunction은 outerFunction의 내부에 정의되어 있다. innerFunction은 자신이 생성된 스코프, 즉 outerFunction의 스코프를 기억하고, outerFunction의 호출이 완료된 이후에도 그 스코프에 접근할 수 있다. 그리고 이에 따라 innerFunction은 outerFunction에도 접근할 수 있다.


언제 활용할까?

클로저는 변수와 함수의 접근 범위를 제어하고 특정 데이터와 상태를 유지하기 위해 활용된다.

  • 데이터 은닉
    클로저는 외부에서 접근할 수 없는 비공개 변수와 함수를 만들 수 있다. 이를 통해 데이터를 은닉하여 외부 접근을 막고, 데이터 무결성을 유지할 수 있다.
    예를 들어 특정 함수 내부에서만 접근 가능한 변수를 생성하고, 이를 조작할 수 있는 함수만 외부로 노출하여 안전하게 데이터를 관리할 수 있다.
  • 비동기 작업
    클로저는 비동기 작업에서 이전의 실행 컨텍스트를 유지해야 할때 유용하다. 콜백 함수가 비동기적으로 실행될 때 클로저를 사용하면 함수 실행 시점의 변수를 참조할 수 있다.
    function createLogger(name) {
    return function() {
        console.log(`Logger: ${name}`);
    };
    }
    
    const logger = createLogger('Hello world');
    setTimeout(logger, 1000); // 1초 후에 'Logger: Hello world'
    
    위의 예시에서 클로저가 name 변수(Hello world)를 저장하여 1초 후에도 해당 값이 유지된다.
  • 모듈 패턴 구현
    모듈 패턴은 특정 기능을 캡슐화하고 외부에 공개하고자 하는 부분만 선택적으로 노출하여 코드의 응집력을 높이고 유지보수성을 향상시키는 패턴이다.
    클로저를 활용하면 필요한 함수와 데이터만 외부로 노출함으로서 모듈 패턴을 쉽게 구현할 수 있다.
profile_img백종민
1993
Seoul
커리어 발전을 위한 새로운 기회를 찾고있습니다.