[모던 자바스크립트 Deep dive] Study - 24. 클로저

n-u·2022년 5월 10일

TIL deepdive js 챌린지

모던 자바스크립트 DEEP DIVE study

목록 보기

21/28

24장 클로저

"클로저는 함수와 그 함수가 선언된 렉시컬 한경과의 조합이다." - mdn에서의 정의

24.1 렉시컬 스코프

자바스크립트 엔진은 함수를 어디에 정의했는지에 따라 상위 스코프를 결정한다. 이것을 렉시컬 스코프라고 한다.
즉, 상위 스코프에 대한 참조는 함수 정의가 평가되는 시점에 함수가 정의된 환경(위치)에 의해 결정된다.

스코프는 실행 컨텍스트의 렉시컬 환경인데 외부 렉시컬 환경에 대한 참조를 통해 상위 렉시컬 환경과 연결된다. => 스코프 체인

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

함수 자신이 정의된 환경(상위 스코프)을 내부 슬롯인 [[Environment]]안에 저장한다.

상위스코프의 참조는 실행 중인 실행 컨텍스트의 렉시컬 환경을 가리킨다.
- 함수 객체를 생성하는 시점은 함수가 정의된 환경 즉, 상위 함수가 평가 또는 실행되고 있는 시점인데, 이때가 현재 실행중인 실행 컨텍스트는 상위 함수의 실행 컨텍스트이기 때문이다.

const x = 1;

function foo(){
  const x =10;
  
  //상위 스코프는 함수 정의 환경(위치)에 따라 결정된다.
  //함수 호출 위치와 상위 스코프는 아무런 관계가 없다.
  bar();
}

//함수 bar는 자신의 상위 스코프, 즉 전역 렉시컬 환경[[Environment]]에 저장하여 기억한다.
function bar(){
  console.log(x);
}

foo();		//1
bar();		//1

여기서 foo()와 bar()가 정의된 시점은 전역렉시컬환경이 평가 되는 시점임으로 전역 객체를 상위 스코프가 된다. 각 함수의 내부슬롯 [[Environment]] 안에 전역 객체가 저장된다.

foo()함수 안에 bar()함수가 호출되었어도, 값이 1인 것은 전역 렉시컬 환경을 참조하고 있기 때문에 foo()함수 안에 정의된 x값을 참조하지 않고 전역 변수인 const x = 1;을 참조한다.

24.3 클로저와 렉시컬 환경

클로저

외부 함수보다 중첩 함수가 더 오래 유지되는 경우 중첩 함수는 이미 생명주기가 종료한 외부 함수의 변수를 참조할 수 있다. 이러한 중첩 함수를 클로저라 한다.

중첩 함수가 상위 스코프의 식별자를 참조하고 있고 중첩 함수가 외부 함수보다 오래 유지되는 경우 한정

자바스크립트는 모든 함수의 상위 스코프를 기억하기 때문에 이론적으로는 모든 함수는 클로저라고 하지만, 일반적으로 모든 함수를 클로저라 하지 않는다.

중첩 함수가 클로저라 하기 어려운 경우

1. 상위 함수보다 오래 유지 되었지만, 상위 스코프의 어떤 식별자도 참조하지 않은 경우

function foo(){
    const x = 1;
    const y = 2;

  //일반적으로 클로저라고 하지 않는다.
  function bar(){
    const z = 3;
    console.log(z);
  }
  return bar;
}

const bar = foo();
bar();

이 예제처럼 상위 스코프의 어떤 식별자도 참조하지 않은 경우 참조하지 않은 식별자를 기억하는 것은 메모리 낭비이기 때문에 기억하지 않는다.

따라서 이 예제의 bar()는 클로저가 아니다.

2. 외부 함수보다 중첩 함수의 생명주기가 짧은 경우

function foo(){
  const x = 1;
  function bar(){
    console.log(x);
  }
  bar();
}
foo();

이 예제에서는 bar()는 클로저이지만, foo()함수보다 생명 주기가 짧아 먼저 소멸했기 때문에 클로저의 본질에 부합하지 않는다.

따라서 중첩 함수 bar()는 일반적으로 클로저라 하기 어렵다.

자유 변수

클로저에 의해 참조되는 상위 스코프의 변수

클로저의 의미가 "함수가 자유 변수에 대해 닫혀 있다"라는 뜻이다.
(= "자유 변수에 묶여 있는 함수")

자바스크립트 엔지은 클로저가 참조하지 않은 식별자는 기억하지 않는다.

24.4 클로저 활용

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

상태를 안적하게 은닉

특정 함수에게만 상태 변경을 허용 하기 위해 사용된다.

전역 변수로 정의된 함수는 언제 어떻게 변수의 상태 값이 변경 될 수 있는 위험이 있다. 그래서 클로저를 활용해서 변수의 값을 변경 할 수 없도록 만들 수 있다.

//카운트 상태 변경 함수
const increase = function(){
  //카운트 상태 변수
  let num = 0;
  //카운트 상태를 1만큼 증가시킨다.
  return ++num;
};

//이전 상태를 유지하지 못함
console.log(increase()); //1
console.log(increase()); //1
console.log(increase()); //1

이 코드는 num(상태 변수)를 지역변수로 넣어 다른 곳에서 함수를 변경하지 못하도록 했지만 값이 유지 되지 않아 값이 같게 나타난다.
상태를 변경하지 못하게 하면서 이전 상태를 유지를 클로저 활용을 통해 할 수 있다.

//카운트 상태 변경 함수
const increase = (function(){
  let num = 0;
  //클로저
  return function(){
    //카운트 상태를 1만큼 증가시킨다.
    return ++num;
  };
}());

console.log(increase()); 	//1
console.log(increase()); 	//2
console.log(increase()); 	//3

즉시 실행 함수를 이용하였으며, 즉시 실행함수가 호출되고 즉시실행함수가 반환하는 함수 function(){retunr ++num};이 increase에 할당된다.
이때 반환된 함수는 자신이 정의된 위치(즉시실행함수)를 상위 스코프를 가지게 된다.
그렇게 되면 상위 스코프에 있는 식별자를 참조할 수 있는데, 즉시실행함수는 딱한번만 실행을 하기 때문에 increase를 호출해도 실행되지 않고 반환한 함수가 실행된다.

따라서 num의 값이 초기화 되지 않아 값이 증감할 수 있게 된 것이다.
num 변수는 외부에서 직접 접근할 수 없는 은닉된 private변수 이므로 의도치 않게 값이 변경되는 위험이 없어 안정적인 프로그래밍이 가능하다.

결론) 클로저는 상태가 의도치 않게 변경되지 않도록 안전하게 은닉하고 특정 함수에게만 상태 변경을 허용하여 상태를 안전하게 변경하고 유지하기 위해 사용한다.

24.5 캡슐화와 정보 은닉

캡슐화

객체의 상태를 나타내는 프로퍼티와 프로퍼티를 참조하고 조작할 수 있는 동작인 메서드를 하나로 묶는 것

객체의 특정 프로퍼티나 메서드를 감출 목적으로 사용하기도 해서 정보 은닉이라고 한다.

정보 은닉은 객체의 상태가 변경되는 것을 방지해 정보를 보호, 객체 간의 상호 의존성, 즉 결합도를 낮추는 효과가 있다.

자바스크립트는 객체의 모든 프로퍼티와 메서드는 기본적으로 외부에 공개되어 있다.
(기본적으로 public이다.)
......[ 이어서 정리 부탁 ..]