🔬 자바스크립트의 스코프

🤔 스코프란 무엇일까?

스코프란 식별자에 대한 유효범위이다. 변수,함수 등 모든 식별자는 자신이 선언된 위치에 의해 자신이 유효한 범위, 즉 다른 코드가 자신을 참조할 수 있는 범위가 결정된다. 스코프 안에서 선언된 식별자는 스코프 안에서는 참조할 수 있지만 스코프 밖에서는 참조할 수 없다.
즉, 스코프란 식별자가 유효한 범위를 말한다.

아래의 코드의 동작을 통해 스코프에 대해 더 자세히 알아보자.

let name= 'Harry';

function foo() {
  let name = 'Hyeok';
  console.log(name); // Hyeok
}
foo();

console.log(name); // Harry

여기서 스코프를 학습하기 위해 주목할 점은 아래와 같다.

• 같은 name이라는 변수를 두 번 선언했다.
• console.log로 name을 호출하는 위치에 따라 name의 값이 달라졌다.

위 코드에서는 두 개의 스코프가 존재한다. "전역 스코프"와 "foo 함수 스코프"이다. 전역 스코프에서 선언된 변수 name(Harry)는 코드 전체에서 참조할 수 있다. 그러나 foo 함수 스코프에서 선언된 변수 name(Hyeok)은 foo 함수의 내부에서만 참조할 수 있다.
즉, 같은 식별자라도 스코프(유효 범위)가 다르다. 스코프 내에서는 식별자는 유일해야 하지만 다른 스코프에는 같은 식별자가 있어도 상관없다. 스코프는 네임스페이스이다.

그래서 첫번째 의문점에 답하자면, 전역에서 생성한 변수와 foo함수 내부에서 선언한 변수는 name이라는 같은 식별자를 갖지만 스코프가 다른 전혀 다른 변수인 것이다.

그런데 foo내부에서 찍어본 console.log에서는 왜 Harry가 아니라 Hyeok이 나왔을까? 이는 아래의 스코프체인 부분에서 다시 알아보자.

---

🗂️ 스코프의 종류

전역 스코프와 지역 스코프

코드는 전역과 지역으로 구분할 수 있다. 이 때 전역은 코드의 가장 바깥 영역을 말한다. 전역은 전역 스코프를 만들고, 전역에 변수를 선언하면 전역 스코프를 갖는 전역 변수가 된다. 전역 변수는 어디서든지 참조할 수 있다. 그에 비해 지역 변수는 변수가 선언된 스코프 내부(지역)에서만 참조할 수 있다.

---

함수 레벨 스코프

ES5까지의 자바스크립트는 특이하게도 오직 함수에 의해서만 지역 스코프가 생성됐다. 위에서 살펴본 foo 함수 스코프가 지역 스코프의 예시이다. ES6부터는 모든 코드 블록 (if, for, while 등등)이 지역 스코프를 만든다.

이 때, var로 선언한 변수는 함수로 만들어진 스코프만을 지역 스코프로 인정하는데, 이러한 특성을 "함수 레벨 스코프"라고 한다. 이는 문제를 발생시킬 수 있는데, 아래의 예시 코드를 통해 문제를 살펴보자.

var i = 10;

for (var i=0; i<5; i++) {
  console.log(i) // 0 1 2 3 4순으로 출력
}

console.log(i) // 5

마지막 console.log를 보면 알 수 있겠지만 i의 값이 의도치 않게 변경되었다. var키워드로 선언한 변수는 중복 선언이 가능하다. 동시에 함수 레벨 스코프를 가지기 때문에 for문 안에서 선언을 했더라도 i는 전역변수로 선언된다.

var 키워드로 선언한 변수를 중복 선언하면 초기화문 유무에 따라 다르게 동작한다. 초기화 문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작하고, 초기화문이 없는 변수 선언문은 무시된다.

그렇기 때문에 위와 같은 문제가 발생된 것이다.

---

블록 레벨 스코프

위에서 살펴본 것처럼 var 키워드는 함수 레벨 스코프라는 특성을 가진다. 반면에, let,const 키워드는 "블록 레벨 스코프"라는 특성을 가진다. 함수로 만들어진 지역 스코프 뿐만 아니라, 모든 코드 블록(if, for, while 등등)으로 만들어진 지역 스코프를 지역 스코프로 인정한다는 뜻이다.

let i = 10;

for (let i=0; i<5; i++) {
  console.log(i) // 0 1 2 3 4순으로 출력  
}

console.log(i) // 10

아까와 같은 예시 코드를 들고 와서 var 키워드만 let 으로 바꿔봤다. let 키워드로 선언된 변수는 블록 레벨 스코프를 따르기 때문에 for문 안에서 생성된 i와 전역에서 생성된 i는 식별자가 같지만 스코프가 다른 전혀 다른 변수이다.
덧붙이자면 let과 const 키워드는 변수 중복 선언을 허용하지 않는다.

---

🖇️ 스코프 체인

우리는 코드를 작성할 때 코드 블럭을 중첩되게 작성할 수 있다. for문 안에 if문을 작성하거나, 함수 안에 try, catch문을 작성할 수도 있고 함수를 함수 몸체 내부에서 정의할 수도 있다. 함수 내부에서 정의한 함수를 중첩 함수(nested function), 중첩 함수를 포함하는 함수를 외부 함수(outer function)라고 한다.

이런 식으로 함수가 중첩되게 작성하면 스코프도 중첩될 수 있다. 이는 스코프가 함수의 중첩에 의해 계층적 구조를 갖는다는 것을 의미한다. 이 때 외부 함수의 스코프를 상위 스코프라 한다.

let name = 'Harry';
let age = 23;
let mbti = 'ISTJ'

function outer() {
  let name = 'Hyeok';
  let age = 20;
  
  console.log(name);
  console.log(age);
  console.log(mbti);
  
  function inner() {
    let name = 'Thumb';
    
    console.log(name);
  	console.log(age);
  	console.log(mbti);
    }
  	inner();
  }

console.log(name);
console.log(age);
console.log(mbti);
outer();

// 각각 console.log에서 무슨 값이 출력될 지 예상해보라.

위의 예제에서 outer, inner 함수가 지역 스코프를 만들고, inner 함수는 outer 함수의 중첩함수이다. outer 함수가 만든 지역 스코프는 inner 함수가 만든 지역 스코프의 상위 스코프이다. 전역 스코프는 outer 함수의 지역 스코프의 상위 스코프이다.

이처럼 모든 스코프는 하나의 계층적 구조로 연결되며, 모든 지역 스코프의 최상위 스코프는 전역 스코프이다. 이렇게 스코프가 계층적으로 연결된 것을 스코프 체인(scope chain)이라고 한다.

변수를 참조할 때 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동하며 선언된 변수를 검색(identifier resolution)한다. 이는 하위 스코프에서 상위 스코프로 단방향으로만 이동하기 때문에 상위 스코프의 식별자는 하위 스코프에서 참조할 수 있지만, 하위 스코프의 식별자는 상위 스코프에서 참조할 수 없다.

이제 위의 코드의 console.log에서 어떤 값이 출력되는지, 또한 그러한 값이 어떻게 구해지게 되었는지의 과정까지 살펴보자.

let name = 'Harry';
let age = 23;
let mbti = 'ISTJ'

function outer() {
  let name = 'Hyeok';
  let age = 20;
  
  console.log(name); // Hyeok (outer함수 스코프)
  console.log(age); // 20 (outer함수 스코프)
  console.log(mbti); // ISTJ (outer함수 스코프 -> 전역 스코프)
  
  function inner() {
    let name = 'Thumb'; 
    
    console.log(name); // Thumb (inner함수 스코프)
  	console.log(age); // 20 (inner함수 스코프 -> outer함수 스코프)
  	console.log(mbti); 
    // ISTJ (inner함수 스코프 -> outer함수 스코프 -> 전역 스코프)
    }
  	inner();
  }

console.log(name); // Harry (전역 스코프)
console.log(age); // 23 (전역 스코프)
console.log(mbti); // ISTJ (전역 스코프)
outer();

위 코드에서 알 수 있듯이 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동하며 선언된 변수를 검색(identifier resolution)한다. 위 코드를 예시로 들어 설명하겠다.

inner 함수 안에 있는 console.log(mbti) 문에서 자바스크립트 엔진은 inner 함수가 만든 지역 스코프에서 mbti 라는 식별자를 찾고, 선언이 존재하지 않으므로 outer 함수가 만든 지역 스코프로 이동하여 mbti 라는 식별자를 찾고, 선언이 존재하지 않으므로 최상위 스코프인 전역 스코프로 이동해 mbti 라는 식별자를 찾아 ISTJ라는 값을 출력했다.

이제 위에 살펴 본 두번째 의문점인

• console.log로 name을 호출하는 위치에 따라 name의 값이 달라졌다.

에 대한 답을 말할 수 있을 것이다. 답을 찾지 못했다면 글을 다시 읽어보기를 추천한다. 이에 대해 더 자세한 이야기를 실행 컨텍스트를 다루는 다음 글에서 다룰 예정이기 때문에 충분히 이해하고 넘어가기를 바란다.

---

동적 스코프와 렉시컬 스코프(정적 스코프)

일반적으로 프로그래밍 언어는 어떤 함수의 상위 스코프를 결정할 때 동적 스코프(dynamic scope)나 렉시컬 스코프(lexical scope) 또는 정적 스코프(static scope)라고 불리는 두가지 방식 중에 한 가지 방식으로 함수의 상위 스코프를 결정한다.

아래 예시코드를 통해 동적 스코프와 렉시컬 스코프의 차이를 비교해보도록 하겠다.

let num = 10;

function foo() {
  let num = 20;
  boo(); 
}

function boo() {
  console.log(num); 
}

foo(); // ??
boo(); // ??

---

동적 스코프

동적 스코프는 함수를 어디서 호출했는지에 따라 함수의 상위 스코프를 결정한다.
boo 함수는 프로그램 전체에서 두 번 호출되는데, 첫번째는 foo 함수 내부에서, 두번째는 전역에서 호출된다.

동적 스코프는 함수가 호출되는 시점에 동적으로 상위 스코프가 정해지기 때문에, foo 함수 내부에서 호출될 때는 boo 함수는 foo 함수의 지역 스코프와, 전역 스코프를 상위 스코프로 가진다. 전역에서 호출될 때는 전역 스코프만을 상위 스코프로 가진다.

let num = 10;

function foo() {
  let num = 20;
  boo();
}

function boo() {
  console.log(num); 
}

foo(); // 20
boo(); // 10 

위 코드 결과는 만약 자바스크립트가 동적 스코프 방식으로 상위 스코프를 결정할 때의 결과를 보여준 것이다. 그러나, 자바스크립트는 렉시컬 스코프를 따른다.

---

렉시컬 스코프(정적 스코프)

렉시컬 스코프는 함수를 어디서 정의했는지에 따라 함수의 상위 스코프를 결정한다. 위에서 언급했듯이 자바스크립트는 렉시컬 스코프를 따른다. 그러므로 함수를 호출한 위치는 상위 스코프 결정에 어떠한 영향도 주지 않는다.
즉, 함수의 상위 스코프는 언제나 자신이 정의된 스코프이다.

함수 정의가 실행되어 생성된 함수 객체는 이렇게 결정된 상위 스코프를 기억한다. 동적 스코프 방식과 달리 함수가 호출될 때마다 함수의 상위 스코프를 참조할 필요가 있기 때문이다.

let num = 10;

function foo() {
  let num = 20;
  boo();
}

function boo() {
  console.log(num); 
}

foo(); // 10
boo(); // 10 

---

🧐 정리

• 스코프란 식별자가 유효한 범위를 말한다.
• 스코프의 종류는 전역 스코프와 지역 스코프가 있다.
• var 키워드는 중복선언이 가능하고 함수 레벨 스코프를 특성으로 갖는다
• let, const 키워드는 중복선언이 불가능하고 블록 레벨 스코프를 특성으로 갖는다
• 스코프 체인이란 스코프가 중첩되어 계층적 구조를 갖는 것을 의미한다.
• 함수의 상위 스코프를 결정하는 방식으로 동적 스코프와 렉시컬 스코프(정적 스코프)가 있다. (자바스크립트는 렉시컬 스코프를 따른다)

---

📖 참고자료

• 코어 자바스크립트

  • 2. 실행컨텍스트 (36p~63p)

• 모던 자바스크립트 Deep Dive

  • 13. 스코프 (189p~199p)
  • 14. 전역 변수의 문제점 (200p~207p)
  • 15. let, const 키워드와 블록 레벨 스코프 (208p~218p)

• 우테코 프론트엔드JS 레벨1 - 2022

  • 자동차 경주 🔬 Execution Context & Scope