먼저, 스코프에 대해서 알아볼까?

스코프의 기본 개념

자바스크립트를 포함한 모든 프로그래밍 언어에서 가장 기본적이고도 중요한 개념이다.

function add(x, y) {
  console.log(x, y)
  return x + y
}

add(3, 6)

console.log(x, y)
// ReferenceError: x is not defined 어쩌고

• 변수 이름, 함수 이름, 클래스 이름과 같은 식별자가 본인이 선언된 위치에 따라 다른 코드에서 자신이 참조될 수 있을지 없을지 결정되는 것이 스코프이다.

CODE 전체는 전역과 지역으로 구분할 수 있기 때문에, 어떠한 변수가 전역에서 선언된다면
해당 변수는 전역 스코프를 갖게되고, 지역에서 선언된다면 해당 변수는 지역 스코프를 갖게된다.

그렇다면,
어떤 코드가 실행될 때 참조하려는 변수가
전역에는 있는데 지역에는 없고,
지역에는 있는데 전역에는 없다면?
코드는 어떤 변수를 참조해야할까?

마음에 드는 아무 변수나 참조하지 않는다!

꼬리에 꼬리를 무는 스코프 체인

• 함수는 전역에서 정의가 될 때도 있지만, 어떤 함수의 내부에서 정의될 수도 있다. 함수의 중첩
• 중첩 함수를 포함하는 함수를 외부 함수라고 한다.
• 이처럼 함수가 중첩이 된다면 각각의 함수의 지역 스코프도 중첩이 될 수 있다.
  즉, 함수의 중첩에 의해 계층적인 구조를 가질 수 있다는 의미!

var x = '나는 전역 x야'

function outer() {
  var y = '나는 outer 함수의 지역 y야'
  console.log(x)
  console.log(y)

  function inner() {
    var x = '나는 inner 함수의 지역 x야'

    console.log(x)
    console.log(y)
  }

  inner()
}

outer()
console.log(x)
console.log(y)

• 위의 코드는 외부함수인 outer() 함수와 중첩함수인 inner() 함수를 가지고 있다.
• 전역에서 선언된 x, outer 함수 내부에서 선언된 y, inner 함수에서는 전역에서 선언된 x가 똑같은 이름으로 선언되고 두 함수가 실행된다.

그럼 다음과 같은 콘솔이 찍히겠지?

var x = '나는 전역 x야'

function outer() {
  var y = '나는 outer 함수의 지역 y야'
  console.log(x) // 1️⃣ 나는 전역 x야
  console.log(y) // 2️⃣ 나는 outer 함수의 지역 y야

  function inner() {
    var x = '나는 inner 함수의 지역 x야'

    console.log(x) // 3️⃣ 나는 inner 함수의 지역 x야
    console.log(y) // 4️⃣ 나는 outer 함수의 지역 y야
  }

  inner()
}

outer()

console.log(x) // 5️⃣ 나는 전역 x야
console.log(y) // 6️⃣ ReferrenceError 어쩌고

스코프의 구간을 나누어 보자면!

• inner 함수는 outer 함수 내부에서 선언이 되었기 때문에, inner 함수의 상위 스코프는 outer 함수의 스코프이다.
• 그리고 전역에서 정의된 outer 함수의 상위 스코프는 전역 스코프이다.
• 이처럼, 스코프가 계층적으로 연결이 되어 있는 것을 스코프 체인이라고 한다. 물리적으로 존재함!
• 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조한다.
  • 현재 함수가 어떤 변수를 참조하려고 하는데 내 스코프 안에 원하는 변수가 없다면?
    JS : 오케이~ 하나 위로 올라간다!
    하나 위로 올라갔는데도 내가 원하는 변수가 없다?
    JS : 한 번 더 위로 올라가지 뭐~
    이렇게 쭉쭉쭉 위로 올라가면 최상위인 전역 스코프까지 올라가게 된다.
    그런데, 전역 스코프에도 내가 원하는 변수가 없다면? 이 때 ReferrenceError 를 출력한다.
• 참고로 스코프 체인에서 변수를 참조할 때는 무조건 위로만 올라감!
  코딩을 하면서 하위 스코프에서 상위 스코프를 참조할 수 있는 이유가 바로 ‘스코프 체인의 단방향성’ 때문이다.

• 콘솔 로그 찍히는 과정 : outer 함수 내부 스코프에 가서 변수 x를 찾는다. 그런데 변수 x가 없으니까 하나씩 위로 올라가서 전역 스코프에서 찾으면 바로 출력한다.

스코프의 종류

스코프는 몇 가지의 기준을 가지고 구분할 수 있는데,

어떠한 레벨을 가지느냐에 따라서~

1. 블록 레벨 스코프

대부분 프로그래밍 언어에서는 함수와 더불어서 if문, for문과 같은 모든 코드 블럭이 지역 스코프를 만든다.

2. 함수 레벨 스코프

반면, 자바스크립트에서는 var 키워드로 선언된 변수는 오로지 함수 코드 블록만을 지역 스코프로 인정한다.
그런데, 다른 언어에는 있는 블록 레벨 스코프를 자바스크립트도 갖고 싶어서 만들어진 것이 바로 let, const
ES 6 이후로는 let, const 키워드를 사용하면 자바스크립트에서 함수 뿐만 아니라
if문, for문, try … catch문 등 모든 블록 단위에 대한 스코프를 가질 수 있다.

상위 스코프가 결정되는 시점에 따라서~

함수가 어디서 호출되었는지에 따라, 함수가 어디서 정의되었는지에 따라서 나뉠 수 있다.

1. 동적 스코프 : 호출되는 시점

프로그램 런타임 도중에 실행 컨텍스트나 호출 컨텍스트에 의해서 스코프가 결정되는 것을 의미한다.

2. 정적 스코프 : 태어나는 시점

반면, 함수가 정의되는 시점에 상위 스코프가 결정되는 것을 정적 스코프(=== 렉시컬 스코프)라고 한다.
자바스크립트는 렉시컬 스코프를 따르기 때문에 함수가 태어나자마자 상위 스코프가 결정이 되고,
이후에 해당 함수에 의해 함수 객체가 생성이 되면 해당 함수 객체는 본인의 상위 스코프를 항상 알 수 있게 된다.

• 해당 함수가 상위 스코프를 항상 알 수 있게 되는 이유는 자바스크립트에서의 함수는 태어나면서 자신의 내부 슬롯에 상위 스코프 참조를 저장하기 때문이다!
• 태어난 함수가 어디선가 호출이 되면, 자바스크립트 엔진에 의해 다음과 같은 흐름으로 진행된다.

1. 호출된 함수의 실행 컨텍스트를 생성한다.
2. 이를 실행 컨텍스트 스택에 push 한다.
3. 그 후에 함수는 렉시컬 환경을 생성한다.
   어떠한 코드가 어디서 실행이 되고, 본인 주변에 어떤 코드가 있는지 구체적인 정보를 담고 있는 환경으로,
   렉시컬 환경은 함수 본인 내부의 식별자, 식별자에 바인딩 된 값 등을 기록하고 있는 하나의 자료 구조이다.
4. 코드의 실행이 끝나면 실행 컨텍스트 스택에서 해당 컨텍스트를 pop 하여 제거한다!

위에서 말한 내용을 토대로 코드 하나를 분석해보자!

const x = 1

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

  return inner
}

const hongcha = outer()
hongcha()

Q. 제일 마지막에 있는 hongcha()는 어떤 값을 콘솔에 찍을까? 1 or 10?

• 코드 동작 설명

1. outer() 함수가 선언되어 있고, 그 안에 변수 x가 선언되어 있다.
   이어서 함수 내부에 inner() 함수가 표현되어 있다.
   outer() 함수는 중첩 함수 inner()를 hongcha에게 반환하면서 생명 주기를 마감하는 함수이다.

2. 즉, outer() 함수의 호출이 종료되면 outer() 함수의 실행 컨텍스트는 실행 컨텍스트 스택에서 제거가 된다.

3. 따라서 outer() 함수의 내부에 선언된 변수 x도 생명주기를 마감하게 되고,
   그렇게 const x = 10;에 접근할 방법이 일단은 없어보인다..!
   하지만, 코드를 실행해보면 ‘10’이라는 값이 나오게 된다.
   죽은 x는 어떻게 살아 돌아왔을까?!

클로져란? 👀

중첩 함수 inner()가 이미 생명주기를 마감한 outer()함수를 참조할 수 있었다.
이처럼 외부 함수의 지역 변수 x를 참조할 수 있다면, 이 때 inner를 클로져라고 한다.

이렇게 될 수 있는 과정을 아주아주 간단하게 살펴보면,

• outer() 함수가 종료되기 전, 실행 컨텍스트 렉시컬 환경의 모습

• outer() 함수가 실행 중에 있다가 생명주기를 마감하면서 최종적으로 종료되었을 때 모습

1. outer 함수의 생명주기가 끝나면 실행 컨텍스트 스택에서 제거된다.
2. 이 때, outer 함수는 hongcha에게 inner 함수를 반환하면서 사라진다.
   (+ 함수는 JS에서 1급 객체라서 값으로 평가할 수 있다. 스택에 다시 쌓이는 개념이 아니다!)
3. outer 함수가 종료되면서 실행 컨텍스트 스택에서는 완전히 제거되었지만, outer() 렉시컬 환경까지는 손을 대지 않는다.
4. hongcha는 inner 함수 객체를 참조하고 있고, inner 함수 객체는 본인의 내부 슬롯에 저장된 outer() 렉시컬 환경을 참조하기 때문에 garbage collection의 대상이 되지 않는다!
5. 따라서, hongcha에 의해 inner함수를 다시 호출을 하면, outer함수에 있는 10을 값으로 가지고 있는 변수 x를 다시 참조할 수 있게된다.
6. inner 함수 객체 기준에서, 외부 함수는 생명주기를 마감하고 실행 컨텍스트 스택에서 사라졌지만
   💡내가 기억하고 있는 내부 슬롯에 저장된! 상위 스코프에 의존한 상위 스코프의 식별자를 참조할 수 있다. 클로져

한 중첩 함수가 상위 스코프의 식별자를 참조하고 있고,
거기서 중첩함수의 외부 함수보다 더 오래 살아있다면 (= 유지가 된다면)
이 중첩함수는 클로져! 클로져는 본인의 상위 스코프에서 현재 참조하는 식별자만 기억한다.

• 클로져에 의해서 참조된 변수를 ‘자유 변수’라고 한다.
• 클로져는 이름부터 약간 닫혀있다는 느낌이 드는데, 함수 본인이 기억하고 있는 자유 변수에 의해 닫혀있다? 갇혀있다?고 생각할 수 있다.
• 이러한 클로져는 하나의 state가 의도치않게 변경되지 않도록
  state를 안전하게 은닉하고, 또는 특정 함수에게만 state 변경을 허용하기 위해 사용한다!

참고 내용

유튜브 강의 by 우아한Tech톡

유튜브 강의 by 코딩앙마