패스트캠퍼스 환급챌린지 36일차 : 김민태의 프론트엔드 아카데미 : 제 1강 JavaScript & TypeScript Essential 강의 후기

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.
https://fastcampus.info/4n8ztzq

250805(화) 36일차

문법 - 클로저

 

클로저

함수 내에서 정의된 내부 함수가 외부 함수의 지역 변수에 접근할 수 있고 외부 함수가 실행 종료된 이후에도 그 변수를 기억하고 사용할 수 있는 구조가 클로저

클로저 설명은 많이 들었지만 실제로 왜 기억 되는지, 어떻게 보존되는지를 디버거로 추적하며 눈으로 확인했다.

 

function incrementer() {
  let saveNumber = 1;
  return function () {
    return saveNumber++;
  };
}

const inc = incrementer();
inc(); // 1
inc(); // 2
inc(); // 3

예로 숫자를 1씩 증가시키는 함수에서 saveNumber라는 변수를 함수 외부에서 보호하고 싶은 경우

클로저를 통해 외부 접근을 차단하고 내부 함수에서만 누적 상태를 유지할 수 있는 구조를 구현

 

디버거로 본 클로저 공간

디버깅을 통해 실제 실행 시점에서 외부 함수의 saveNumber는 사라졌지만

내부 함수에서 여전히 참조 가능한 클로저 영역(Closure Environment)에 해당 값이 유지되고 있다는 것을 확인할 수 있었다

말로만 이해했던 클로저 개념을 시각적으로나마 살짝 체득할 수 있었다

 

클로저의 실전 활용

- 외부 접근이 불가능한 은닉된 상태 유지

- 특정 변수에 대한 직접 접근 차단 및 제어된 인터페이스 제공

- 자바스크립트에서 클래스가 도입되기 전까지 프라이빗 속성을 흉내 내는 주요 수단 

 

같은 기능을 TypeScript에서는 private 속성으로 구현할 수 있지만

클로저는 자바스크립트에서 순수하게 그 개념을 수동으로 구현할 수 있는 방법이라는 점에서 중요하다

 

클로저와의 차별점

기존에 함수는 단순히 한 번 실행되고 끝나는 블록이라고 생각했다면

클로저는 함수가 상태를 갖고 살아있는 존재로 작동할 수 있다는 점에서 사고 자체를 전환시켜주는 개념이었다.

 

이번 강의를 통해 클로저는 단순한 기술 문법이 아니라

상태를 은닉하고 지속시킬 수 있는 설계 도구라는 점을 알게 되었고 자바스크립트의 동작 원리에 대한 이해도도 살짝 올라갔다.