[JavaScript] 스코프 예제로 이해하기

스코프(Scope)

유효 범위, 변수와 함수가 선언된 위치에 따라서 접근할 수 있는 범위

function add(x, y) {
  console.log(x, y); // 2 5
  return x + y;
}

add(2, 5);
// 매개변수 x와 y는 함수 내부에서만 참조할 수 있어, 외부에서는 참조 오류가 발생한다.
console.log(x, y); // ReferenceError: x is not defined

 

스코프(Scope)의 구분

전역 스코프(Global Scope)
코드의 가장 바깥 영역
전연 변수 : 전역에서 선언된 변수로, 어디서든 참조될 수 있다.

지역 스코프(Local Scope)
함수 몸체 내부
지역 변수 : 지역에서 선언된 변수로, 자신의 지역 스코프와 하위 스코프에서 유효하다.

var x = "global x";
var y = "global y";

function outer() {
  var z = "outer's local z";

  console.log(x); // global x
  console.log(y); // global y
  console.log(z); // outer's local z

  function inner() {
    var x = "inner's local x";

    console.log(x); // inner's local x
    console.log(y); // global y
    console.log(z); // outer's local z
  } 
  inner();
}

outer();

console.log(x); // global x
console.log(y); // global y
console.log(z); // ReferenceError: z is not defined

스코프 체인

자바스크립트 엔진은 변수를 참조할 때, 현재 스코프에서 해당 변수를 검색하고 찾지 못하면 상위 스코프로 이동하여 다시 검색한다. 이렇게 상위 스코프를 순서대로 탐색하며 찾아가는 과정을 스코프 체인이라고 한다.

var x = "global x";
var y = "global y";

function outer() {
  var z = "outer's local z";

  console.log(x); // global x (함수의 지역 스코프에서 x를 찾을 수 없어, 상위(전역)스코프에서 검색)
  console.log(y); // global y (함수의 지역 스코프에서 y를 찾을 수 없어, 상위(전역)스코프에서 검색)
  console.log(z); // outer's local z
}

outer();

 

함수 레벨 스코프 (function level scope)

var 키워드로 선언된 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정한다.

함수가 아닌 코드 블록 내에서 선언된 변수는 모두 전역 변수가 된다.

// 예시 1
// var 키워드로 선언된 변수는 함수 레벨 스코프만 인정한다.
var x = 1;
function foo () {
  var x = 10;
  console.log(x); // 10
}

foo();

console.log(x); // 1

// 예시 2
// 함수 밖에서 var 키워드로 선언된 변수는 코드 블록 내에서 선언 되었다 할지라도 모두 전역 변수다.
var x = 1;
if(true) {
  var x = 10;
  console.log(x); // 10
}
// 의도치 않게 변수 값이 변경되었다.
console.log(x); // 10

 

블록 레벨 스코프 (Block level scope)

위처럼 의도치 않은 var 키워드의 단점을 보안하기 위해 ES6에는 let과 const 키워드가 도입되었다.

let과 const는 모든 코드 블록 (함수, if 문, for문 등)을 지역 스코프로 인정하는 블록 레벨 스코프를 따른다.

let x = 1;
if(true) {
  let x = 10;
  console.log(x); // 10
}
console.log(x); // 1

 

var, let, const 키워드 비교

구분	let	const	var
유효 범위	블록 스코프 및 함수 스코프	블록 스코프 및 함수 스코프	함수 스코프
값 재할당	가능	불가능	가능
재선언	불가능	불가능	가능

---

Reference

모던 자바스크립트 Deep Dive 
13장 스코프
14장 전역 변수의 문제점
15장 let, const 키워드와 블록레벨스코프