공삼
article thumbnail


클로저

함수와 그 외부를 둘러싸고 있는 렉시컬환경의 조합으로, 클로저가 자신의 렉시컬환경 외부에서 선언된 변수에, 접근할 수 있는 메커니즘을 제공한다. 

 

클로저 사용하는 이유

  • 클로저는 내부 정보를 은닉하고, 공개 함수(public, 외부)를 통한 데이터 조작을 위해 쓰인다.
  • 캡슐화와 정보은닉을 위해 쓰인다.
  • 클래스 private 필드 또는 메소드를 사용하는 효과와 동일하다.

 

클로저 예제

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

    function inner() {
        console.log(outerVar); // 내부 함수에서 외부 함수의 변수에 접근
    }

    return inner;
}

const closureFunc = outer(); // outer 함수 실행 후 inner 함수 반환
closureFunc(); // 클로저로 인해 outer 함수의 스코프 유지하여 inner 함수 실행

 

 

렉시컬 환경 (Lexical Environment) 이란?

자바스크립트 엔진이 변수 식별자와 해당 식별자에 바인딩 된 값, 스코프 체인등을 관리하기 위한 내부 데이터 구조이다.

 

이것은 자바스크립트 코드가 실행되는 환경을 추상화하여 처리하는데 사용된다. 

 

function outer() {
    const x = 10;

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

    return inner;
}

const closureFunc = outer();
closureFunc();

outer 함수가 호출될때마다 'outer' 함수의 렉시컬 환경이 생성되고 'x' 변수가 환경 레코드에 저장된다.

 

inner 함수는 'outer' 함수 내에서 정의 되었기 때문에, 'inner' 함수는 자신의 렉시컬환경과 외부 렉시컬 환경참조를 가지며 변수 'x'에 접근할 수 있다. 

 

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

    function inner() {
        const innerVar = "I'm from inner";
        console.log(outerVar); // 외부 함수의 변수에 접근
        console.log(innerVar); // 내부 함수의 변수 출력
    }

    return inner;
}

const closureFunc = outer();
closureFunc();

'inner' 함수 내에서 선언된 변수는 클로저의 원리를 활용하여 외부 함수인 'outer' 함수의 렉시컬 환경과 연결되기 때문에,

 

'inner' 함수에서 선언된 변수를 외부 함수인 'outer' 에서도 참조가 가능하다.

 

 

 

클로저함수가 생성된 환경의 스코프를 유지하는 개념이다. 

 

 

'Front-End > JavaScript' 카테고리의 다른 글

[JS]비동기 패턴의 이점과 이벤트 리스너  (0) 2024.02.07
[JavaScript] 자료형, 형변환  (0) 2023.08.25
var, let, const 차이  (0) 2023.08.25
Async, Await ( + Promise)  (0) 2023.08.25
[비교] Callback함수, Promise함수  (0) 2023.08.24
profile

공삼

@g_three

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!