📝 클로저 이해하기

01 변수의 유효범위와 클로저

• 자바스크립트는 함수지향 언어임 -> 개발자한테 투머치 자유를 줌
• 함수 동적생성도 가능하고, 생성한 함수를 다른 함수에 인수로 넘길수도 있고 생성된 곳이 아닌 곳에서 함수를 호출 할 수 있기 때문
• 또 함수 내부에서 함수 외부에 있는 변수에 접근 할 수 도 있음,,,

그러면? 함수가 생성된 이후에 외부 변수가 변경되면?
함수는 새로운 값을 가져오나?
호츨되는 곳을 기준으로 외부변수에 접근하나???

아주 간단한^^ 문제들이 발생하기 때문에 이를 알기위해 배워야합니댜,.,

02 코드 블록

• 일단 자바스크립트는 {...} 안에서 선언한 변수는 여기 안에서만 사용 할 수 있음

예시:

{
  // 지역 변수를 선언하고 조작해도 결과를 밖에서 볼 수 없음

  let message = "Hi"; // 블록 내에서만 가능

  alert(message); // 안녕하세옹
}

alert(message); // ReferenceError: message is not defined

• 그래서 이런 블록의 특징은 특정 작업을 수행하는 코드를 묶어두는 역할로 사용할 수 있음
• 블록안에는 작업에 필요한 변수만 사용하는 형식

{
  // 메시지 출력
  let message = "안녕하세요.";
  alert(message);
}

{
  // 또 다른 메시지 출력
  let message = "안녕히 가세요.";
  alert(message);
}

블록이 없으면 에러 발생함 이미 선언된 변수와 동일한 이름을 가진 변수을 별도의 블록 없이 let으로 선언하면 에러가 발생함

// 메시지 출력
let message = "안녕하세요.";
alert(message);

// 또 다른 메시지 출력
let message = "안녕히 가세요."; // SyntaxError: Identifier 'message' has already been declared
alert(message);

03 중첩 함수

• 함수 내부에 선언한 함수? 중첩(nested)함수라고 부름
• js에서는 발로도 중첩함수를 만들 수 있음
• 코드를 정리하는데도 쓰임

예시:

function sayHiBye(firstName, lastName) {
  // 헬퍼(helper) 중첩 함수
  function getFullName() {
    return firstName + " " + lastName;
  }

  alert("Hello, " + getFullName());
  alert("Bye, " + getFullName());
}

• 중첩함수는 새로운 객체의 프로퍼티 형태나 중첩 함수 그 자체로 반환될 수 있음
• 이러코롬 반환되면 어디서든 호출해 사용 가능함
• 물론 이때도 외부변수에 접근 할 수 있다는 사쉴

예시:

function makeCounter() {
  let count = 0;

  return function () {
    return count++;
  };
}

let counter = makeCounter();

alert(counter()); // 0
alert(counter()); // 1
alert(counter()); // 2

• 이거 보면 counter을 여러개 만들면? 서로 독립적일까?
• 아니면 함수와 중첩함수 내 count 변수에는 어떤 값이 할당될 까??

이거 해결하면 js 중급 가능합니다,,,

04 렉시컬 환경

머리아플 준비 해야할듯,,,

1단계-변수

• js에서 실행중인 함수, 코드블록{...}, 스크립트 전체는 렉시컬 환경(Lexical Environment) 라 불리는 내무 숨김 연관 객체(internal hidden associated object)를 가짐
• 이 환경 객체는 2부분으로 구성됨

1. 환경 레코드(Environment Record) : 모든 지역변수를 프로퍼티로 저장하고 있는 객체, this와 같은 기타정보도 여기에 저장
2. 외부 렉시컬 환경(Outer Lexical Environment)에 대한 참조 : 외부코드와 연관됨

‘변수’는 특수 내부 객체인 환경레코드의 프로퍼티일 뿐임
‘변수를 가져오거나, 변경하는것’은 ‘환경레코드의 프로퍼티를 가져오거나 변경함’을 의미함

예시:

// 이 두 줄짜리 코드에는 렉시컬 환경이 하나만 존재함
let phrase = "hello"; // Lexcial Environment [ phrase: "hello" ] ->(outer)-> null
alert(phrase);

• 이렇게 스크립트 전체에 관련된 렉시컬 환경은 전역 렉시컬 환경이라 부름(global Lexical Environment)
• 위 코드에서 [ ] 는 변수가 저장되는 환경 레코드를 나타냄
• 또 전역 렉시컬은 외부 참조 (outer)가 없기 때문에 null를 가리킴

예시:

// execution start : Lexcial Environment [ phrase: <uninitialized> ] ->(outer)-> null
let phrase; // Lexcial Environment [ phrase: undefined ]
phrase = "Hello"; // Lexcial Environment [ phrase: "Hello" ]
phrase = "Bye"; // Lexcial Environment [ phrase: "Bye" ]

1. 스크립트가 시작되면 스크립트 내에선 선언한 변수 객체가 렉시컬 환경에 올라감(pre-populated)

   • 이때 변수의 상태는 특수 내부 상태(special internal state)인 “uninitialized”가 됨
   • js 는 uninitialized 상태인 변수를 인지하긴 하지만,, let을 만나기 전까진 참조 불가능
2. let phrase 를 만났지만 아직 값은 할당이 안되었기에 프로퍼티 값은 undefined 이고 phrase는 이때부터 사용할 수 있음
3. phrase에 값이 할당됨
4. phrase에 값이 할당됨

요약하자면,,

• 변수는 특수 내부 객체인 환경 레코드의 프로퍼티임
• 환경 레코드는 현재 실행중인 함수와 코드블록, 스크립트와 연관되어 있음
• 변수를 변경하면 환경 레코드의 프로퍼티가 변경됨

2단계-함수 선언문

함수는 변수와 마찬가지로 값임,,

• 그러나,,,, 함수 선언문(Function declaration)으로 선언한 함수는 일반 변수와 다르게 바로 초기화가 된다는 점에서 차이가 있음(개빡치넹)
• 그러니까 이걸로 만들면 렉시컬 환경이 만들어지느 즉!시! 사용할 수 있음
• 하등한 변수는 let을 만나야지만 사용할수 있지만 ㅎ
• 그래서 선언되기전에도 함수를 사용할 수 있는게 바로 이때문임

예시:

//execution start : Lexcial Environment [
//                            phrase: <uninitialized>,
//                            say: function
//                          ] ->(outer)->null

let phrase = "Hello";

function say(name) {
  alert($`{name}`);
}

이런 동작 방식은 함수 선언문으로 정의한 함수에만 적용됨
따라서 let say = function(name)... 와 같이 변수에 할당된 함수 표현식(function expression)은 해당하지 않음

3단계-내부와 외부 렉시컬 환경

• 함수를 호출해 실행하면 새로운 렉시컬환경이 자동으로 만들어지잖음?

• 이 환경에는 호출시 넘겨받은 매개변수와 함수의 지역변수가 저장됨!(중요)

• say("성준")을 호출하면 어떤 변화가 생길까?

예시:

let phrase = "Hello";

//      Lexcial Environment of the call [
//                            name: "성준",
//                          ]  ->(outer)-> [
//                                            say: function
//                                            phraseL : "Hello"
//                                          ] ->(outer)-> null

function say(name) {
  alert(`${phrase}, ${name}`); // 이게 실행될 때 가 위의 주석
}

say("성준"); // Hello, 성준

• 함수가 호출중인 동안엔 호출중인 함수를 위한 내부 렉시컬 환경과 이게 가리키는 외부 렉시컬 환경을 가지게 됨

  • 예시의 내부 렉시컬 환경은 현재 실행중인 say에 상응
  • 이 환경엔 함수의 인자인 name으로 부터 유래한 프로퍼티 하나만 존재함
  • say("성준")을 호출했기 때문에, name 값은 "성준"이 됨
  • 이 예시에 외부 렉시컬 환경은 전역 렉시컬 환경임
  • 전역 렉시컬 환경은 phrase와 함수 say를 프로퍼티로 가짐

• 내부 렉시컬 환경은 외부렉시컬 환경에 대한 참조를 가짐!!!

1. 코드에서 변수를 접근할 때, 먼저 내부 렉시컬에서 찾음
2. 어? 못찾았네? 이 환경이 참조하는 외부 렉시컬 환경으로 확장해서 찾음
3. 어? 못찾았네? …recursive?
4. 언제까지? 검색범위가 전역 렉시컬 환경으로 확장될 때 까지!!

• 만약 strict 모드(엄격한 모드)에선 전역에서도 변수를 못찾았다? error 띄워줌
• 하지만 비 엄격모드에서는 정의되지 않은 변수에 값을 할당하려고 하면 에러대신,,,
• 새로운 전역 변수가 만들어지는데 이건 하위 호환성을 위해 그렇다네영

4단계-함수를 반환하는 함수

거의 끝나가용,,

다시 맨처음 makeCounter예시를 보면?

예시:

function makeCounter() {
  let count = 0; // 여기부분에서 볼꺼양

  return function () {
    return count++; // 두번째 부분은 여기양
  };
}

let counter = makeCounter();

alert(counter()); // 0
alert(counter()); // 1
alert(counter()); // 2

• makeCounter를 호출하면 호출할 때 마다 새로운 렉시컬 환경 객체가 만들어지고(이젠 알겠지?) 여기에 makeCounter가 실행하는데 필요한 변수들이 저장된다구요]
• 그 래 서 say("성준") 예시와 마찬가지로 makeCounter가 실행되면 2개의 렉시컬 환경이 만들어짐

멀까요??? 정답은…?
머 내부 하나,, 전역 하나 만들어지겠찌 머

근데 차이점이 있음…. 그게 머냐면,,

• makeCounter()가 실행되는 도중에 본문 (return count++)이 한줄짜리인 중첩 함수가 만들어진다는점!!
• 그러니까 현재는 중첩 함수가 생성되기만 하고 실행은 되지 않는 상태임

또 여기서 중요한게 하나가 더 있는데…

• 모든 함수는 함수가 생성된 곳의 렉시컬 환경을 기억함!!!!
• 함수는 [[Environment]]라 불리는 숨김 프로퍼티를 갖는데,, 여기에 함수가 만들어진 곳의 렉시컬 환경에 대한 참조가 저장됨

따라서 두번째 부분을 보면

• counter.[[Environment]]엔 {count:0}이 있는 렉시컬 환경에 대한 참조가 저장된다구요
• 호출장소와 상관없이 기억하는건? 저거때문이라구용

• 얘는 생성될때 딱 한번 설정되고, 영원,,,히 변하지 않아용

• 그래서 counter()를 호출하면 각 호출마다 새로운 렉시컬 환경이 생성됨
• 이후 알아서 잘 참조하겠지?

그리고나서 실행 흐름이 중첩함수의 본문으로 넘어오면,,

• count 변수가 필요한데,
  1. 먼저 자체 렉시컬에서 변수를 찾음
  2. 그러나 익명 중첩 함수엔 지역변수가 없기 때문에 이 렉시컬은 비어있는 상황
  3. 이제 counter()의 렉시컬 환경이 참조하는 외부 렉시컬 환경에서 count를 찾음
  4. 어머 찾아버렸네?
  5. 이후 count++가 실행되면서 count값이 1 증가해야하는데,,,,
  6. 변숫값 갱신은 어디서 일어난다? 변수가 저장된 렉시컬에서 일어난다!

04 그래서 클로저는 어디가고 이것만 설명함?

클로저는 외부변수를 기억하고 이 외부변수에 접근할 수 있는 함수를 의미함
함수와 렉시컬 환경의 조합

• 몇몇 언어에서는 클로저 구현이 불가능하거나,,, 특수한 방식으로 함수를 작성해야함
• 하지만 js에서는 모든 함수가 자연스럽게 클로저가 됨
• 예외가 있긴한데,,, new Function 문법 에서 다루면 될듯,,?
• 아무튼 js의 고유한 개념이 아닌 여러 함수형 프로그래밍 언어에서 공통적으로 발견되는 특성이라구

그래서 왜쓰는데?

• 데이터를 보존할 수 있다고요^^
• 정보 접근제한이 가능하겟죠? (캡슐화)
• 모듈화에도 유리하겠죠?

그래서 다시 핵심

스코프를 이용해서 변수의 접근 범위를 닫는(패쇄)것에 있음
함수의 호출되는 환경과는 별개로, 기존에 선언되어있던 환경(어휘적 환경)을 기준으로 변수를 조회함

클로저는 특정 상황에서 발생하는 ‘현상’이고, 함수는 이 현상이 나타나기 위한 ‘조건’에 해당됨