[리액트 기초 스터디] JavaScript 스코프 체인 (Scope Chain)

목차 (OPEN)

• 📑 JavaScript 스코프 체인 (Scope Chain)
• 🟥 스코프 체인의 기본 원리
• 🟧 예제로 살펴보기
• 📚 결론

 

 

 

 

 

 

📑 JavaScript 스코프 체인 (Scope Chain)

앞선 포스팅에서 살펴봤듯이, 변수에는 전역 스코프, 지역 스코프, 블록 스코프가 있었다.

 

(아래 포스팅 참고)

[리액트 기초 스터디] JavaScript 스코프(scope)

 

그렇다면 함수 안에서 변수를 찾을 때

자바스크립트 엔진은 어떻게 변수를 탐색하는 것일까?

 

이 과정을 스코프 체인 (scope chain)이라고 부른데,

오늘은 이 스코프 체인에 대해서 자세히 알아보고자 한다.

 

 

---

🟥 스코프 체인의 기본 원리

자바스크립트 엔진은 변수를 찾을 때 아래의 순서로 탐색을 한다.

1. 자신의 스코프 (현재 블록 또는 현재 함수) 안에서 찾기
2. 1번에서 없었다면 한 단계 바깥 스코프로 나가서 찾기
3. 그래도 없다면 또 한 단계 바깥 스코프로 나가서 찾기
4. 이 과정을 반복하다가 끝까지 나갔는데도 없다면 ReferenceError 발생

 

이처럼 변수는 안쪽에서 바깥쪽 방향으로 나가면서만 찾을 수 있고,

거꾸로 바깥에서 안쪽으로 들어오면서 찾는 것은 불가능하다.

 

 

---

🟧 예제로 살펴보기

1) 함수 안에서 전역 변수 참조하기

let x = 10;

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

printX(); // 10

 

printX 함수 안에는 x라는 변수가 없으니까

한 단계 바깥 스코프로 나가서 (= 전역 스코프) 전역 변수 x를 발견하게 된다.

따라서 출력은 전역 변수 x의 값인 10이 되는 것이다.

 

 

2) 같은 이름의 지역변수와 전역변수가 있는 경우 (shadowing)

let x = 10;

function printX() {
  let x = 20;
  console.log(x);
}

printX(); // 20
console.log(x); // 10

 

먼저 printX 함수가 호출돼서 x라는 변수를 출력하기 위해 먼저 함수 안에서 찾다 보니까

지역 변수 x = 20이라는 값이 있음을 발견하게 되고,

따라서 함수 호출의 결과로 20이라는 값이 콘솔에 출력된다.

(이때, 바깥에 있는 전역 변수인 x=10 은 지역변수에 가려져서(shadowing) 함수 안에서 접근이 불가능하게 된다.)

 

그러나 밑에 있는 console.log(x)에서는 반대로 함수 안에 있는 지역 변수인 x=10에 접근할 수가 없으니까

제일 먼저 발견하게 되는 x=10이라는 전역변수의 값을 출력하게 되는 것이다.

 

 

3) 함수 안의 함수 (중첩 스코프 체인)

let a = 1;

function outer() {
  let b = 2;
  
  function inner() {
    let c = 3;
    console.log(a, b, c);
  }
  
  inner();
}

outer(); // 1 2 3

 

이 예시의 경우 탐색 과정은 아래와 같이 진행된다.

1. inner 함수 안에서 c라는 변수를 발견한다.
2. 변수 b는 inner 함수 안에서 발견되지 않으니,
   한 단계 바깥 스코프인 outer 함수로 나가서 다시 탐색하다가 발견한다.
3. 변수 a는 inner에서 발견이 안 돼서
   한 단계 바깥 스코프인 outer에서 탐색을 해보았지만, 여전히 발견되지 않으니
   한 단계 더 바깥 스코프인 전역 스코프까지 나가게 되고, 여기에서 발견하게 된다.

 

 

4) 바깥에서 안쪽 변수를 접근하려고 하는 경우

function outer() {
  let secret = "비밀";
  
  function inner() {
    console.log(secret); // 비밀
  }
  
  inner();
}

outer();
console.log(secret); // ❌ ReferenceError

 

이처럼 위의 예제 코드를 실행해보면,

outer 함수를 호출했을 때에는 그 안에서 inner 함수가 호출되고,
console.log(secret); 부분에서 secret 변수를 콘솔에 출력하려고 한다.

 

이때, inner 함수 자기 자신 안에서는 secret이라는 변수가 발견되지 않으니까

한 단계 바깥으로 나가서 outer 함수를 탐색하게 되고,

여기에서 secret 변수를 발견해서 "비밀"이라는 값을 콘솔에 출력해준다.

 

그러나 가장 하단에 있는 console.log(secret);를 실행하려고 보니까

자기 자신의 스코프인 전역 스코프에서 secret 변수를 찾아보았으나 발견이 되지 않아서

더이상 바깥으로 나갈 곳이 없으니 탐색을 멈추고 ReferenceError를 띄우게 된다.

 

 

---

📚 결론

스코프 체인까지 포스팅으로 정리해두니 자바스크립트가 변수를 어떻게 찾는지가 머릿속에 잘 그려지는 것 같다.

 

이번에도 역시 앞으로 코드를 짤 때 변수를 선언할 위치를 신중이 정해야 하고,

괜히 전역 변수를 남발하면 어디에서 값이 바뀌었는지 추적하기 힘들다는 것을 다시 느끼게 되었다.