[모딥다] 24장 클로저

 

클로저는 JS 고유의 개념이 아니다. 

함수형 프로그래밍 언어에서 사용하는 중요한 특징이다.

고유의 개념이 아니기 때문에 ECMAScript 사양에 등장하지 않는다.

 

MDN 에서는 아래와 같이 설명한다.

클로저는 함수와 함수가 선언된 렉시컬 환경과의 조합이다.

 

 

여기서 기억해야 할 키워드는 : "함수가 선언된 렉시컬 환경" 이다.

 

 

function out() {
    const x = 10;
    function inner() {
        console.log(x); //10
    }
    inner();
}
out();

 

중첩함수 내부에서, 자신을 포함하고 있는 외부 함수의 변수에 접근할 수 있다. 

만약 inner 함수가 out 함수의 내부에서 정의된 중첩함수가 아니라면, 

inner 함수를 out 함수 내부에서 호출한다 하더라도, out 함수의 변수에 접근할 수 없다. 

 

=> 이유: JS 가 렉시컬 스코프를 따르는 프로그래밍 언어이기 때문

 

 

 

 

🧋 24.1 렉시컬 스코프 (Lexical Scope)

 

JS 는 함수를 어디서 호출했는가가 아닌, 함수를 어디에 정의했는지에 따라 상위 스코프를 결정한다.

=> 이를 렉시컬 스코프 (정적 스코프) 라고 한다. 

 

lexical : 어휘의, 어휘적인, 사전적인

scope: 범위

(사전적으로 정의된 범위 라는 느낌인가?)

 

"함수의 상위 스코프를 결정한다"  = " 렉시컬 환경의 외부 렉시컬 환경에 대한 참조에 저장할 참조값을 결정한다"

 

......

 

 

 

 

 

 

🧋 24.2 함수 객체의 내부 슬롯 [[Environment]]

 

함수는 자신이 정의된 환경, 즉 상위 스코프(함수 정의가 위치하는 스코프가 바로 상위 스코프임)를 기억해야 한다.

=> 이를 위해 함수는 자신의 내부 슬롯 [[Environment]] 에 자신이 정의된 환경, 즉 상위 스코프의 참조를 저장한다.

=> 호출 시 참조값이 생성되는데, 이 참조값이 "외부 렉시컬 환경에 대한 참조" 라는 곳에 저장되는 참조값임. 

 

그니까 렉시컬 환경은 함수의 주민등록등본 같은 건가?

 

 

 

 

🧋 24.3 클로저와 렉시컬 환경

 

const x = 1;

function outer() {
    const x = 10;
    const inner = function () { console.log(x) }
    return inner;
}

const innerFn = outer();
innerFn();

함수를 호출 -> 실행하고 생명 주기 마감. 

-> 함수의 실행이 종료되면 실행 컨텍스트 스택에서 제거됨. 

-> 함수의 지역 변수 x 도 생명 주기 마감. 

 

근데 맨 마지막에 나오는 값이 놀랍게도 함수 내부 값인 10임!  ㄴㅇㄱ

 

이처럼 외부 함수보다 중첩 한수가 더 오래 유지되는 경우

중첩 함수는 이미 생명 주기가 종료한 외부 함수의 변수를 참조할 수 있다. 

이런 중첩 함수를 클로저 라고 부른다. 

 

-> 함수 실행이 끝난 후 , 실행 컨텍스트가 스택에서 제거되지만 

함수의 렉시컬 환경 까지 소멸하는 것은 아니다. 

outer 함수의 렉시컬 환경은 -> inner 함수의 [[Environment]] 내부 슬롯에 의해 참조되고 있음!

즉, 외부 함수보다 더 오래 생존한 중첩 함수는 

외부 함수의 생존 여부와 상관 없이 자신이 정의된 위치에 의해 결정된 상위 스코프를 기억한다. 

 

가비지 컬렉터가 참조하는 메모리 공간을 함부로 해제하지는 않는다!

 

 

자바스크립트의 모든 함수는 상위 함수를 기억하므로 이론적으로 모든 함수는 클로저다. 

하지만 일반적으로 모든 함수를 클로저라고 부르진 않음. 

 

상위 스코프의 식별자를 참조해서 사용하지 않으면 클로저 아님. 

그치만 실행 -> 바로 써먹고 -> 소멸 하면 클로저 아님. 

 

클로저는 중첩 함수가 상위 스코프의 식별자를 참조하고 있고

& 중첩 함수가 외부 함수보다 더 오래 유지되는 경우에 한정하는 것이 일반적. 

 

(그리고 클로저에 의해 참조되는 상위 스코프의 변수 : 자유 변수 라고 함. )

 

클로저의 메모리 점유는 걱정할 만한 것은 아님. 

클로저는 JS 의 강력한 기능으로, 필요하다면 적극적으로 활용하라고 함. 

 

 

 

 

 

 

 

🧋 24.4 클로저의 활용

 

클로저는 상태 state 를 안전하게 변경하고 유지하기 위해 사용한다. 

다시 말해, 상태가 의도치 않게 변경되지 않도록

상태를 안전하게 은닉하고 특정 함수에게만 상태 변경을 허용하기 위해 사용한다.

 

?엥..? useState???

 

https://seokzin.tistory.com/entry/React-useState%EC%9D%98-%EB%8F%99%EC%9E%91-%EC%9B%90%EB%A6%AC%EC%99%80-%ED%81%B4%EB%A1%9C%EC%A0%80

[React] useState의 동작 원리와 클로저

 

오.. 맞자나... 상관 있자나... 

싱기 방기

 

 

예제는 맥락만 어느 정도만 이해되면 넘어가자. 

어차피 다시 봐야함. 

 

 

 

 

🧋 24.5 캡슐화와 정보 은닉

 

캡슐화 : 객체의 프로퍼티와 메서드를 하나로 묶는 것. 

-> 특정 프로퍼티나 객체를 감출 목적으로 사용하기도 함. 즉, 정보 은닉을 위해 사용하기도 함. 

 

대부분의 객체지향 언어는 클래스를 정의하고, 접근 제한자로 공개 범위를 정할 수 있지만, 

JS 는 접근 제한자 (public, private, protected) 를 제공하지 않는다. 

 

즉시 실행 함수를 이용해 -> 생성자 함수의 인스턴스가 상속받아 사용할 prototype 메서드 -> 즉시 실행 함수가 종료된 후 호출됨. 

함수 내부의 변수를 직접적으로 호출하면 안되는데, 함수로 부르면 참조 가능. 

 

 

JS 는 정보 은닉을 완전하게 지원하지 않음. 

private 흉내는 가능가지만, 프로토타입 메서드를 이용하면 이것도 불가능함. 

 

 

 

 

🧋 24.6 자주 발생하는 실수

 

var 로 선언한 변수 : 블록 레벨이 아닌 함수 레벨 스코프를 가지는 점 유의. 

 

for 문에서 let 사용시 -> for 문이 반복될 때 마다 for 문 코드 블록의 새로운 렉시컬 환경이 생성됨. 

=> for 문에 있는 함수=>  실행될 때마다 렉시컬 환경이 새로 생성됨. 

 

또잉... 어렵다.. 

미래의 나야 공부하고 와서 다시 정리 부탁한다!