cat
FrontEnd

JavaScript 클로저(Closure) 이해하기

2023. 5. 31. 20:13
목차
  1. 1. 클로저(Closure)란?
  2. 2. 클로저의 활용
  3. 3. 클로저의 주의점

클로져

1. 클로저(Closure)란?

클로저는 기본적으로 함수와 그 함수가 선언될 당시의 렉시컬 환경과의 조합입니다. 렉시컬 환경은 어떤 변수가 어디에 있는지를 알려주는 식별자-값 쌍의 모음입니다. 따라서, 클로저를 이해하는 것은 함수와 그 주변의 코드를 이해하는 것입니다.

function outerFunction() {
    let outerVariable = 100;

    function innerFunction() {
        console.log(outerVariable);
    }

    return innerFunction;
}

let myFunction = outerFunction();
myFunction();  // 100

위의 코드에서 innerFunction은 outerFunction의 outerVariable에 접근할 수 있습니다. outerFunction이 실행을 종료하고 outerFunction의 실행 컨텍스트가 사라진 후에도 innerFunction은 outerVariable에 접근할 수 있습니다. 이것이 바로 클로저입니다.

2. 클로저의 활용

2.1. 데이터 은닉과 캡슐화

자바스크립트는 기본적으로 정보 은닉(information hiding)이나 캡슐화(encapsulation) 기능을 제공하지 않지만, 클로저를 통해 이를 구현할 수 있습니다.

function secretCodeGenerator() {
    let secretCode = "OpenAI";

    return {
        checkCode: function(inputCode) {
            if (inputCode === secretCode) {
                console.log("Access granted.");
            } else {
                console.log("Access denied.");
            }
        }
    };
}

let mySecret = secretCodeGenerator();
mySecret.checkCode("OpenAI"); // Access granted.

2.2. 메모이제이션(Memoization)

클로저는 계산 결과를 재사용하는데도 유용하게 사용됩니다. 이를 메모이제이션(memoization)이라고 부르며, 복잡한 계산을 캐시하여 성능을 향상시키는 기법입니다.

function memoizedAdd() {
    let cache = {};

    return function(n) {
        if (n in cache) {
            console.log("Fetching from cache");
            return cache[n];
        } else {
            console.log("Calculating result");
            let result = n + 10;
            cache[n] = result;
            return result;
        }
    };
}

let newAdd = memoizedAdd();
console.log(newAdd(9));  // Calculating result 
console.log(newAdd(9));  // Fetching from cache

3. 클로저의 주의점

메모리 누수(memory leak)를 일으킬 수 있으므로 주의해야 합니다. 클로저는 렉시컬 환경을 유지하므로, 클로저가 존재하는 한 그 환경의 변수들은 가비지 컬렉션의 대상이 되지 않습니다. 따라서, 사용하지 않는 클로저는 적절하게 제거해야 합니다.

let theThing = null;
let replaceThing = function () {
    let originalThing = theThing;
    let unused = function () {
        if (originalThing)
            console.log("hi");
    };

    theThing = {
        longStr: new Array(1000000).join('*'),
        someMethod: function () {
            console.log(someMessage);
        }
    };
};

위 코드에서, unused 함수는 originalThing을 참조하고 있으므로, theThing에 새로운 객체를 할당하더라도 originalThing이 참조하는 메모리는 해제되지 않습니다. 이렇게 메모리 누수가 발생할 수 있으므로 클로저를 사용할 때는 항상 주의해야 합니다.

  1. 1. 클로저(Closure)란?
  2. 2. 클로저의 활용
  3. 3. 클로저의 주의점
여행 가고싶다
여행 가고싶다
여행 가고싶다
blanc
여행 가고싶다
전체
오늘
어제
  • 분류 전체보기 (43)
    • 토이프로젝트 (13)
      • 프론트엔드 인턴쉽 (5)
      • ProjectSassy (4)
      • LinkArchive (4)
    • FrontEnd (11)
      • React (6)
      • JavaScript (1)
      • TypeScript (1)
      • CSS (0)
      • Test (2)
    • CS (0)
      • Network (4)
      • 기타 (8)
    • 재미 (3)
    • AWS (2)
    • Git (1)
    • 클린코드 (1)

인기 글

최근 글

최근 댓글

hELLO · Designed By 정상우.
여행 가고싶다
JavaScript 클로저(Closure) 이해하기
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.