<JavaScript> 클로저(Closure)와 스코프 이해

JavaScript에서는 클로저와 스코프를 이해하는 것이 매우 중요합니다.

이번 글에서는 클로저와 스코프 개념을 살펴보며, 이를 실제 프로그래밍에 어떻게 적용할 수 있는지 알아봅시다.

스코프(Scope)란 무엇인가요?

스코프는 코드의 영역으로, 변수와 함수의 범위와 가시성이 결정됩니다.

JavaScript에는 전역 스코프와 지역 스코프가 있습니다.

따라서 변수는 선언되는 위치에 따라 다음 두 가지 범주 중 하나에 속합니다.

• 전역 변수: 전역 스코프에 선언되어 전체 코드에서 접근 가능한 변수입니다.
• 지역 변수: 지역 스코프에 선언되어 해당 스코프 내에서만 접근 가능한 변수입니다.

JavaScript에서 함수를 선언하면 함수 스코프라는 새로운 지역 스코프가 생성됩니다.

또한 변수를 선언할 때 var 키워드를 사용하면 함수 스코프와 같으며, let과 const를 사용하면 블록 스코프를 가지게 됩니다.

 

클로저(Closure)란 무엇인가요?

클로저는 함수와 그 함수가 선언된 어휘적 환경의 조합입니다. 클로저를 사용하면 함수로부터 반환된 내부 함수가 자신의 선언 환경 밖에서 호출되더라도 그 환경에 액세스할 수 있습니다. 간단한 클로저 예제를 살펴봅시다.

function createCounter() {
  let count = 0;

  return function () {
    count++;
    console.log(count);
  };
}

const counter = createCounter();
counter(); // 출력: 1
counter(); // 출력: 2

위 예제에서 createCounter() 함수는 count 변수와 익명 함수를 반환합니다.

반환된 익명 함수는 클로저이며 createCounter() 함수에서 초기화된 count 변수를 기억합니다.

이로 인해 counter 함수를 호출하면 count 변수의 값을 계속해서 증가시킬 수 있지만, 다른 코드에서 count 변수에 직접 접근할 수 없습니다.

 

클로저의 활용

클로저는 여러 가지 방법으로 활용할 수 있습니다. 다음은 클로저를 사용하는 몇 가지 일반적인 예입니다.

1. 상태를 숨기기(Privacy): 클로저를 사용하면 함수의 내부 상태를 외부로부터 은닉하여 함수 내부에서만 접근 가능하게 만들 수 있습니다.
2. 함수 팩토리: 클로저를 사용하여 다른 함수와 연결된 고유한 상태를 가진 함수를 생성할 수 있습니다.

 

예를 들어, 메시지에 접두사를 추가하는 함수 팩토리를 구현하려면 다음과 같이 작성할 수 있습니다.

function createPrefixer(prefix) {
  return function (message) {
    console.log(prefix + message);
  };
}

const infoLogger = createPrefixer("INFO: ");
infoLogger("This is an information message.");

const errorLogger = createPrefixer("ERROR: ");
errorLogger("This is an error message.");

 

스코프 체인(Scope Chain)의 이해

스코프 체인은 중첩된 함수에서 변수와 함수의 가시성을 결정하는 방식입니다.

내부 함수에서 변수를 참조하면, 자바스크립트는 현재 스코프에서 변수를 찾고, 없으면 상위 스코프로 올라가 찾습니다.

전역 스코프에서도 찾을 수 없으면, 참조 에러(ReferenceError)가 발생합니다.

 

감사합니다.