[모던 자바스크립트 딥다이브] 변수의 스코프와 호이스팅 개념 정리

이미 알고있던 부분은 빠르게 넘기면서 스코프, 호이스팅과 같이 개념적인 부분을 짚고 정리하는 글입니다.

우선 변수는 아래와 같은 형태로 선언하고 값을 주입합니다.

var value = 10 + 20;

인터프리터로 해당 구문을 읽으면 메모리에 결과값을 저장하고 해당 메모리의 주소를 변수에 저장합니다. 여기서 result 식별자는 30값을 저장한 메모리 공간의 주소를 참조하게 됩니다. 아래와 같이 변수가 저장됩니다.

위에 보셨듯이 변수를 선언하려면 ES6 이전까지는 var를 이용해왔습니다. var키워드에는 여러 단점이 존재합니다. var키워드 여러 단점 중 가장 대표적인 것은 블록 레벨 스코프를 지원하지 않고 함수 레벨 스코프를 지원하죠. 이로 인해 의도치 않은 전역 변수가 생성되기도 합니다.

ES6에서 let과 const키워드를 도입한 이유도 var키워드의 단점을 보완하기 위해서입니다. 각 변수 키워드 및 스코프에 대해 알아보기 위해 let, const와 블록 레벨 스코프참조하겠습니다.

scope는 우리말로 번역하면 범위라는 뜻을 가지고 있죠. 즉 스코프란 변수에 접근할 수 있는 범위라고 볼 수 있습니다.
자바스크립트에선 스코프는 2가지 타입이 존재합니다. 전역 스코프와 지역 스코프 타입이 존재합니다.

대부분 프로그래밍 언어는 블록 레벨 스코프를 따르지만 자바스크립트는 함수 레벨 스코프를 따릅니다.

함수 레벨 스코프(Function-level scope)
함수 내 선언된 변수는 함수 내에서만 유효하며 외부에서는 참조할 수 없습니다. 즉, 함수 내부에서 선언한 변수는 지역 변수, 함수 외부에서 선언한 변수는 모두 전역 변수이죠.

블록 레벨 스코프(Block-level scope)
모든 코드 블록{}(함수, if문, for문, while문, try/catch문 등)내에서 선언한 변수는 해당 코드 블럭 내에서만 유효하며 해당 코드 블록{} 외부에서는 참조할 수 없습니다. 즉, 코드 블록 내부에서 선언한 변수는 지역 변수이죠.

var foo = 123; // 전역 변수

console.log(foo) // 123

{
  var foo = 456; // 전역 변수
}

console.log(foo) // 456

블록 레벨 스코프를 따르지 않는 var키워드 상, 코드 블록 내 변수 foo는 전역 변수입니다. 하지만 1번 라인에서 전역 변수 foo가 선언되어 있습니다. var키워드를 사용하여 선언한 변수는 중복 선언이 허용됩니다. 따라서 위 코드는 전혀 문제가 없습니다. 다만 코드 블록 내(6번 라인)foo는 전역 변수이므로 전역에서 선언된 지역 변수 foo의 값 123을 새로운 값 456으로 재할당하여 덮어씁니다.
이런 문제에 대해 ES6에서는 블록 레벨 스코프를 따르는 변수를 선언하기 위해 let 키워드를 제공합니다.

let foo = 123; // 전역 변수

{
  let foo = 456; // 지역 변수
  let bar = 456; // 지역 변수
}

console.log(foo); // 123
console.log(bar); // ReferenceError: bar is not defined

let 키워드로 선언된 변수는 블록 레벨 스코프를 따릅니다. 위 코드를 보면 코드 블록 내 선언된 변수 foo는 블록 레벨 스코프를 갖는 지역 변수입니다. 전역에서 선언된 변수 foo와 다른 별개의 변수이죠. 또한 변수 bar도 블록 레벨 스코프를 갖는 지역 변수입니다. 따라서 전역에서는 변수 bar를 참조할 수 없습니다.

var 키워드로는 동일한 이름을 갖는 변수를 중복해서 선언할 수 있습니다. 하지만 let키워드로는 동일한 이름을 갖는 변수를 중복해 선언할 수 없습니다. 변수를 중복 선언한 경우 문법 에러(SyntaxError)가 발생합니다.

var foo = 123;
var foo = 456;  // 중복 선언 허용 새로운 
공간에 값이 할당되고 해당 공간의 주소를 foo에 저장한다.

let bar = 123;
let bar = 456;  // Uncaught SyntaxError: Identifier 'bar' has already been declared

1.3 호이스팅

자바스크립트는 ES6에서 도입된 let, const를 포함해 모든 선언(var, let, const, function, class)을 호이스팅합니다. 여기서 호이스팅(Hoisting)이란, var선언문이나 function 선언문 등을 해당 스코프의 선두로 옮긴 것처럼(아래에 구문이 존재해도 위에서 쓸 수 있도록 우선적으로 메모리 공간에 저장) 동작하는 특성을 말합니다.

하지만 var키워드로 선언된 변수와 달리 let키워드로 선언된 변수를 선언문 이전에 참조하면 참조 에러(ReferenceError)가 발생합니다. 이는 let 키워드로 선언된 변수는 스코프의 시작에서 변수 선언까지 일시적 사각지대(Temporal Dead Zone(TDG))에 빠지기 때문입니다.

console.log(foo); // undefined
var foo;

console.log(bar); // Error: Uncaught ReferenceError: bar is not defined
let bar;

🎯 잠깐 짚고 넢어갑시다!
변수 foo에 undefined가 저장되는 이유는 변수 선언에 의해 확보된 메모리 공간은 자바스크립트 엔진에 의해 undefined라는 값이 암묵적으로 할당되어 초기화되기 때문입니다. 이것은 자바스크립트의 독특한 특징이죠. undefined는 자바스크립트에서 제공하는 원시 타입의 값입니다.
자바스크립트 엔진은 변수 선언을 다음과 같은 2단계에 거쳐 수행하게 됩니다.

• 선언 단계 : 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알린다.
• 초기화 단계 : 값을 저장하기 위한 메모리 공간을 확보해 암묵적으로 undefined를 할당해 초기화한다.
• 할당 단계 : undefined로 초기화된 변수에 실제 값을 할당한다.

🎯 그래서 호이스팅이 뭔가요?
위에서 호이스팅이란, var선언문이나 function 선언문 등을 해당 스코프의 선두로 옮긴 것처럼(아래에 구문이 존재해도 위에서 쓸 수 있도록 우선적으로 메모리 공간에 저장) 동작하는 특성이라고 말씀드렸습니다. 더 자세히 봅시다.

console.log(score) // undefined

var score = 80; // 변수 선언과 값의 할당

console.log(score); // 80

위 코드를 보시면 console.log(score)구문이 var키워드로 선언 한 변수보다 앞에 있습니다. 자바스크립트는 인터프리터 언어인 것을 알고계시죠? 그럼 왜 이 현상이 발생하는 걸까요?
그 이유는 변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점, 즉 런타임이 아닌, 그 이전 단계에서 먼저 실행되기 때문입니다. 자바스크립트 엔진은 먼저 한 줄씩 순차적으로 실행하기에 앞서 평가 과정을 거치고 소스코드의 실행을 위한 준비를 합니다. 이때 자바스크립트 엔진은 변수 선언을 포함한 모든 선언문(변수 선언문, 함수 선언문)을 코드에서 찾아 먼저 실행합니다. 그리고 평가 과정이 끝나면 변수 선언을 포함한 모든 선언문을 제외하고 소스코드를 한 줄씩 순차적으로 실행하죠. 즉, 자바스크립트 엔진은 변수 선언이 어디에 위치해 있든 먼저 실행하게 됩니다. 이처럼 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 변수 호이스팅이라고 합니다.
또한 변수의 경우 호이스팅이 진행되었다고 해도 실질적인 값의 할당은 런타임 시점에 undefined가 저장된 공간이 아닌 새로운 메모리 공간에 값 할당이 이루어집니다. undefined가 저장된 공간은 더 이상 사용되지 않기 때문에 가비지 콜렉터에 의해 언젠가 제거됩니다. 이 예는 아래 코드와 같습니다.

var키워드로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어집니다. 즉, 스코프에 변수를 등록(선언 단계)하고 메모리에 변수를 위한 공간을 확보한 후, undefined로 초기화(초기화 단계)합니다. 따라서 변수 선언문 이전에 변수에 접근하여도 스코프에 변수가 존재하기 때문에 에러가 발생하지 않죠.

// 스코프의 선두에서 선언 단계와 초기화 단계가 실행된다.
// 따라서 변수 선언문 이전에 변수를 참조할 수 있다.
console.log(foo); // undefined

var foo;
console.log(foo); // undefined

foo = 1; // 할당문에서 할당 단계가 실행된다.
console.log(foo); // 1

// 스코프의 선두에서 선언 단계가 실행된다.
// 아직 변수가 초기화(메모리 공간 확보와 undefined로 초기화)되지 않았다.
// 따라서 변수 선언문 이전에 변수를 참조할 수 없다.
console.log(foo); // ReferenceError: foo is not defined

let foo; // 변수 선언문에서 초기화 단계가 실행된다.
console.log(foo); // undefined

foo = 1; // 할당문에서 할당 단계가 실행된다.
console.log(foo); // 1

let키워드로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행됩니다. 즉, 스코프에 변수를 등록(선언단계)하지만 초기화 단계는 변수 선언문에 도달했을 때 이루어집니다. 초기화 이전 변수에 접근하려고 하면 참조 에러(ReferenceError)가 발생합니다. 이는 변수가 아직 초기화되지 않았기 때문입니다. 다시 말하면 변수를 위한 메모리 공간이 아직 확보되어 있지 않기 때문입니다. 따라서 스코프의 시작 지점부터 초기화 시작 지점까지는 변수를 참조할 수 없죠. 스코프의 시작 지점부터 초기화 지점까지 구간을 일시적 사각지대(Temporal Dead Zone, TDZ)라고 부릅니다.

결국 ES6에서는 호이스팅이 발생하지 않는 것과 차이가 없어 보입니다. 하지만 그렇지 않습니다 아래 코드를 봅시다.

let foo = 1; // 전역 변수
{
  console.log(foo); // ReferenceError: foo is not defined
  let foo = 2;  // 지역 변수
}

위 코드의 경우, 전역 변수 foo의 값이 출력될 것으로 예상하셨을겁니다. 하지만ES6의 선언문도 여전히 호이스팅이 발생하기 때문에 참조 에러(ReferenceError)가 발생합니다.

ES6의 let으로 선언된 변수는 블록 레벨 스코프를 가지므로 코드 블록 내 선언된 변수 foo는 지역 변수입니다. 따라서 지역 변수 foo도 해당 스코프에서 호이스팅되고 코드 블록 선두부터 초기화가 이루어 지는 지점까지 일시적 사각지대(TDZ)에 빠지게 딥니다. 따라서 전역 변수 foo값이 출력되지 않고 출력 에러가 발생합니다.

블록 레벨 스코프를 지원하는 let은 var보다 직관적입니다. 아래 코드를 봅시다.

var funcs = [];

// 함수의 배열을 생성하는 for 루프의 i는 전역 변수다.
for(var i = 0 ; i < 3 ; i++){
  funcs.push(function() { console.log(i); });
}

// 배열에서 함수를 꺼내어 호출한다.
for(var j = 0 ; j < 3; j++){
  funcs[j]();
}

위 코드의 실행 결과로 0, 1, 2를 예상하셨을 겁니다. 하지만 결과는 3이 세 번 출력됩니다. 이유는 for 루프의 var i가 전역 변수이기 때문입니다. 0, 1, 2를 출력하려면 아래와 같은 코드가 필요합니다.

var funs = [];

// 함수의 배열을 생성하는 for 루프의 i는 전역 변수다.
for (var i = 0; i < 3; i++) {
  (function (index) { // index 라는 인수를 사용하는 함수 정의
    funcs.push(function () { console.log(index); });
  }(i)); // 인수 (i)를 사용하여 함수를 즉시 호출
         // i로 외부 함수를 즉시 호출하면 루프가 반복될 때마다 새 클로저가 생성되어 내부 함수가 전달된 i값에 엑세스
}

// 배열에서 함수를 꺼내어 호출한다
for (var j = 0; j < 3; j++) {
  funcs[j]();
}

>> console
0
1
2

자바스크립트이 함수 레벨 스코프로 인해 for루프의 초기화 식에 사용된 변수가 전역 스코프를 갖게 되어 발생하는 문제를 회피하기 위해 클로저를 활용한 방법입니다.

ES6의 let 키워드를 for 루프의 초기화 식에 사용하면 클로저를 사용하지 않아도 위 코드와 동일한 동작을 합니다.

var funcs = [];

// 함수의 배열을 생성하는 for 루프의 i는 for 루프의 코드 블록에서만 유효한 지역 변수이면서 자유 변수이다.
for (let i = 0; i < 3; i++) {
  funcs.push(function () { console.log(i); });
}

// 배열에서 함수를 꺼내어 호출한다
for (var j = 0; j < 3; j++) {
  console.dir(funcs[j]);
  funcs[j]();
}

for루프의 let i는 for loop에서만 유효한 지역 변수입니다. 또한 i는 자유 변수로, for 루프 생명주기가 종료되어도 변수 i를 참조하는 함수가 존해하는 한 계속 유지됩니다.

전역 객체(Global Object)는 모든 객체의 유일한 최상위 객체를 의미합니다. 일반적으로 Browser-side 에서는 window 객체, Server-side(Node.js)에서는 global 객체를 의미합니다. 지금 단계에선 이게 어떤 말인지 이해가지 않으실겁니다. 추후 서버 사이드에서의 해당 객체를 알아보도록 하죠. 아무튼 var키워드로 선언된 변수를 전역 변수로 사용하면 전역 객체의 프로퍼티가 됩니다.

var foo = 123

console.log(window.foo) //123

let 키워드로 선언된 변수를 전역 변수로 사용하는 경우, let 전역 변수는 전역 객체의 프로퍼티가 아닙니다. 즉, window.foo와 같이 접근할 수 없죠. let 전역 변수는 보이지 않는 개념적인 블록 내에 존재하게 됩니다.

let foo = 123; // 전역변수

console.log(window.foo) // undefined

const는 상수(변하지 않는 값)를 위해 사용합니다. 하지만 반드시 상수만을 위해 사용하지 않죠. 이에 관해선 후에 알아보도록 하겠습니다.

let은 재할당이 자유로우나 const는 재할당이 금지됩니다.

const FOO = 123;
FOO = 456; // TypeError: Assignment to constant variable.

주의할 점은 const는 반드시 선언과 동시에 할당이 이루어져야 한다는 것입니다. 만일 이 구조를 취하지 않으면 문법 에러(SyntaxError)가 발생하게 됩니다.

const FOO;

또한 const는 let과 마찬가지로 블록 레벨 스코프를 가집니다.

{
  const FOO = 10;
  console.log(FOO); //10
}
console.log(FOO); // ReferenceError: FOO is not defined

상수는 가독성과 유지보수 편의를 위해 적극적으로 사용해야 합니다. 아래는 그 예제 코드입니다.

// 10의 의미를 알기 어렵기 때문에 가독성이 좋지 않다.
if (rows > 10) {
}

// 값의 의미를 명확히 기술하여 가독성이 향상되었다.
const MAXROWS = 10;
if (rows > MAXROWS) {
}

이렇듯 적절한 네이밍으로 상수를 선언하면 가독성, 유지보수성이 대폭 향상됩니다.

const는 또한 객체에도 사용할 수 있습니다. 물론 이때도 재할당은 금지됩니다.

const obj = { foo: 123 };
obj = { bar: 456 }; // TypeError: Assignment to constant variable.

const는 재할당이 금지된다고 말씀드렸죠? 이는 "const변수의 타입이 객체인 경우, 객체에 대한 참조를 변경하지 못한다" 라는 것을 의미합니다. 하지만 이때 객체의 프로퍼티는 보호되지 않습니다. 즉, 재할당은 불가능하지만 할당된 객체의 내용(프로퍼티 추가, 삭제, 프로퍼티 값의 변경)은 가능하다는 얘기입니다.

const user = { name: 'Lee' };

// const 변수는 재할당이 금지된다.
// user = {}; // TypeError: Assignment to constant variable.

// 객체의 내용은 변경할 수 있다.
user.name = 'Kim';

console.log(user); // { name: 'Kim' }

객체의 내용이 변경되더라도 객체 타입 변수에 할당된 주소값 자체는 변경되지 않습니다. 따라서 객체 타입 변수 선언에는 const를 사용하는 것이 좋습니다. 만약에 명시적으로 객체 타입 변수의 주소값을 변경(재할당)하여야 한다면 let을 사용합니다.

변수 선언에는 기본적으로 const를 사용하고 let은 재할당이 필요한 경우 한정하여 사용하는 것이 좋습니다. 원시 값의 경우 가급적 상수를 사용하는 편이 좋습니다. 그리고 객체를 재할당하는 경우는 그리 흔하지 않습니다. const 키워드를 사용하면 의도치 않은 재할당을 방지해 주기 때문에 보다 안전하죠.

var와 let, 그리고 const는 다음과 같은 상황에서 사용하는 것을 추천합니다.

• ES6를 사용한다면 var 키워드는 사용하지 않습니다.
• 재할당이 필요한 경우에 한정해 let 키워드를 사용합니다. 이때 변수 스코프는 최대한 좁게 만듭니다.
• 변경이 발생하지 않는(재할당이 필요 없는 상수) 원시 값과 객체에는 const 키워드를 사용합니다. const 키워드는 재할당을 금지하기 때문에 var, let보다 안전합니다.

변수를 선언하는 시점에 재할당이 필요할지 잘 모르는 경우가 많습니다. 그리고 객체는 의외로 재할당 하는 경우가 드뭅니다. 따라서 변수를 선언할 때 일단 const를 사용하도록 합니다. 반드시 재할당이 필요하다면(반드시 재할당이 필요한지 한번 생각해 볼 이기도 합니다.)그때 const를 let 키워드로 변경해도 늦지 않을 겁니다.

변수의 식별자의 경우 아래 코드와 같이 네이밍 컨벤션을 사용합니다. 일반적인 변수나 함수 이름에는 카멜 케이스를 사용하고, 생성자 함수, 클래스 이름에는 파스칼 케이스를 사용합니다.
ECMAScript사양에 정의된 객체, 함수들도 카멜 케이스와 파스칼 케이스를 사용합니다.

// 카멜 케이스
var firstName;

// 스네이크 케이스
var first_name;

// 파스칼 케이스
var FirstName;

• 모던 자바스크립트 Deep Dive