chatGPT와 JavaScript 공부:클로저(Closure)

chatGPT와 JavaScript 공부:클로저(Closure)

chatGPT를 어떻게 활용할까 고민하던 중에 JS를 공부하는 용도로 사용하면 어떨까 싶은 생각이 들어서 포스트를 작성해 보려 한다.
취미로 JS, Python을 공부하는 중이라 사실 중요한 개념적인 부분은 모르는 것이 많이 있긴 했다.
chatGPT에게 주관적인 코딩을 시켜보았으나 최근 들어서 썩 마음에 드는 결과물을 안 준다...
원래 이 블로그에는 chatGPT가 작성해 주는 코드를 리뷰하고 활용해 보는 것을 중점으로 두려 했으나 이 부분은 다시 고민해 보아야겠다.

우선 첫 번째로 공부해 볼 내용은 클로저(Closure)이다.
이름은 얼추 들어보았지만 이번 기회에 공부 해보자.

Question

JavaScript의 클로저(Closure)에 대해서 자세하게 설명해 줘

Answer

클로저(Closure)는 자바스크립트와 같은 프로그래밍 언어에서 주로 사용되는 개념으로, 함수와 그 함수가 선언된 어휘적 환경(Lexical Environment)의 조합입니다. 클로저는 내부 함수가 외부 함수의 변수에 접근할 수 있도록 해주며, 외부 함수가 이미 종료된 상태에서도 해당 변수를 참조할 수 있습니다.

자바스크립트에서 클로저를 이해하기 위해서는 먼저 스코프(Scope)와 실행 컨텍스트(Execution Context)에 대해 알아야 합니다.

스코프(Scope)

변수가 선언된 위치를 기준으로 변수의 접근 범위를 결정하는 규칙입니다. 자바스크립트에는 전역 스코프(Global Scope)와 지역 스코프(Local Scope) 두 가지가 있습니다.

실행 컨텍스트(Execution Context)

코드가 실행되는 환경으로, 실행되는 시점의 실행 컨텍스트 스택(Execution Context Stack)에 쌓이게 됩니다. 실행 컨텍스트에는 변수 객체(Variable Object), 스코프 체인(Scope Chain), this 값 등의 정보가 포함됩니다.

클로저의 동작 원리

1. 외부 함수가 호출되면, 해당 함수의 실행 컨텍스트가 생성되고 실행 컨텍스트 스택에 쌓입니다.
2. 외부 함수 내부에 선언된 내부 함수가 호출되면, 내부 함수의 실행 컨텍스트가 생성되고 실행 컨텍스트 스택에 쌓입니다.
3. 내부 함수는 외부 함수의 변수에 접근할 수 있습니다. 이 때, 내부 함수의 스코프 체인을 통해 외부 함수의 변수 객체에 접근합니다.
4. 외부 함수의 실행이 종료되어 실행 컨텍스트 스택에서 제거되더라도, 내부 함수는 외부 함수의 변수 객체를 참조할 수 있습니다. 이것이 바로 클로저의 핵심 원리입니다.

예시

function outer() {
  let a = 10;

  function inner() {
    console.log(a);
  }

  return inner;
}

const innerFunc = outer();
innerFunc(); // 결과: 10

위 예제에서 outer 함수의 경우 inner 함수를 반환한다.
innerFunc 변수에 outer 함수의 반환값을 할당한 후, innerFunc를 호출하면 inner 함수가 실행되고, 외부 함수인 outer의 변수 a의 값이 출력된다.
이처럼 outer 함수의 실행이 종료된 이후에도 inner 함수는 외부함수의 변수에 접근할 수 있는 것을 확인할 수 있다.
이러한 현상이 클로저의 동작 원리이다.

사용 예시 1 - 데이터 은닉 (Data Hiding)

클로저를 사용하면 외부에서 접근할 수 없는 private 변수를 생성할 수 있습니다.
이를 통해 객체의 상태를 보호하고 캡슐화할 수 있습니다.

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에 접근할 수 있다.
그러나 외부에서 count 변수에 직접 접근할 수는 없다.
이렇게 클로저를 사용하여 데이터를 은닉시킬 수 있다.
외부에서 접근할 수 없는 private 변수를 생성해서 객체의 상태를 보호하고 캡슐화할 수 있으며, 코드의 안정성을 높일 수 있다.

사용 예시 2 - 팩토리 함수 (Factory Function)

클로저를 사용하여 동적으로 함수를 생성할 수 있습니다. 이를 통해 여러 개의 함수를 생성하거나 함수의 동작을 쉽게 변경할 수 있습니다.

function createMultiplier(multiplier) {
  return function (x) {
    return x * multiplier;
  };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);

console.log(double(5)); // 결과: 10
console.log(triple(5)); // 결과: 15

위 예제에서 createMultiplier 함수는 인자로 받은 multiplier 값을 이용하여 새로운 함수를 반환한다.
이렇게 생성된 함수는 클로저를 통해 multiplier 값을 계속 참조할 수 있다.
이를 이용해 다양한 곱셈 함수를 만들 수 있는 것.

클로저에 대해 간단하게 알아보는 시간을 가졌다.
참고로 JavaScript에서의 개념으로 공부한 것이지만 클로저는 다른 프로그래밍 언어에서도 사용되는 개념이다.
지금은 100% 이해했고 이걸 활용해서 어떻게 무언가를 해봐야겠다...라는 생각은 확 들진 않는다.
하지만 개념은 어느 정도 이해가 됐고, 특히 팩토리 함수는 나중에 업무에서라도 꼭 활용해 보고자 한다.