JavaScript의 클로저와 스코프 이해하기

요약: 이 글에서는 JavaScript의 클로저와 스코프 개념을 이해하고, 이를 사용하는 방법을 설명합니다. 이를 통해 개발자들이 코드의 실행 컨텍스트와 변수의 접근 방식을 더 잘 이해할 수 있습니다.

스코프란?

스코프(scope)는 변수가 접근할 수 있는 범위를 나타냅니다. JavaScript에서는 전역 스코프와 지역 스코프 두 가지가 있습니다.
​

1. 전역 스코프(global scope): 전역 스코프에 선언된 변수는 어디서든 접근할 수 있습니다.
2. 지역 스코프(local scope): 지역 스코프에 선언된 변수는 해당 스코프 내에서만 접근할 수 있습니다. 함수 내에서 선언된 변수가 이에 해당합니다.

클로저란?

클로저(closure)는 내부 함수가 외부 함수의 변수에 접근할 수 있는 기능입니다. 즉, 클로저는 함수와 그 함수가 선언된 렉시컬 환경(lexical environment)의 조합입니다. 이를 통해 JavaScript에서는 함수가 선언된 위치에 따라 변수에 접근할 수 있는 범위가 결정됩니다.

클로저 예제

function outer() {
  const outerVar = "I'm an outer variable";

  function inner() {
    const innerVar = "I'm an inner variable";
    console.log(outerVar); // "I'm an outer variable"
    console.log(innerVar); // "I'm an inner variable"
  }

  inner();
}

outer();

​
위 예제에서 inner 함수는 outer 함수의 변수 outerVar에 접근할 수 있습니다. 이는 클로저 덕분입니다. 하지만 outer 함수는 inner 함수의 변수 innerVar에 접근할 수 없습니다. 이는 스코프 범위 때문입니다.

클로저 활용

클로저를 활용하면, 외부에 공개되지 않는 private 변수를 만들 수 있습니다. 이는 객체 지향 프로그래밍의 캡슐화(encapsulation) 원칙과 유사합니다.
​

function createCounter() {
  let count = 0;

  return {
    increment: function () {
      count++;
    },
    getCount: function () {
      return count;
    },
  };
}

const counter = createCounter();
counter.increment();
console.log(counter.getCount()); // 1
console.log(counter.count); // undefined

​
위 예제에서 createCounter 함수는 객체를 반환합니다. 이 객체는 increment와 getCount 메소드를 가지고 있습니다. count 변수는 외부에서 직접 접근할 수 없지만, 클로저를 통해 increment와 getCount 메소드에서 접근할 수 있습니다. 이렇게 클로저를 활용하면 변수를 외부에서 수정하지 못하도록 보호할 수 있습니다.

클로저의 주의사항

클로저를 사용하면 메모리 누수(memory leak)가 발생할 수 있습니다. 클로저로 인해 참조되는 변수가 메모리에서 해제되지 않기 때문입니다. 이 문제를 방지하기 위해서는 클로저가 참조하는 변수를 적절히 해제해야 합니다.
​

function createLargeArray() {
  const largeArray = new Array(1000000).fill('large data');
  return function () {
    console.log(largeArray.length);
  };
}

const showLargeArrayLength = createLargeArray();
showLargeArrayLength();

​
위 예제에서 createLargeArray 함수는 큰 배열 largeArray를 생성하고, 배열의 길이를 출력하는 함수를 반환합니다. 이 경우, 반환된 함수가 클로저이므로 largeArray는 메모리에서 해제되지 않습니다. 이러한 상황에서는 클로저가 필요 없다면, 적절한 시점에 largeArray를 null로 설정하여 참조를 해제해야 합니다.

정리

이 글에서는 JavaScript의 클로저와 스코프 개념을 소개하고, 이를 사용하는 방법을 설명했습니다. 클로저는 함수가 선언된 렉시컬 환경에 있는 변수에 접근할 수 있도록 해주며, 이를 통해 private 변수를 만들 수 있습니다. 하지만 클로저를 사용할 때 메모리 누수에 주의해야 합니다. 알맞은 상황에서 클로저와 스코프를 활용하면 코드의 효율성과 안정성을 높일 수 있습니다.