[JavaScript / ES6] let, const와 블록 레벨 스코프

ES5까지 var 키워드로 선언된 변수는 아래와 같은 특징이 있다. 하지만 이는 다른 언어와는 다른 특징으로 주의를 기울이지 않으면 심각한 문제를 일으킨다.

1. 함수 레벨 스코프(Function-level Scope)

   • 함수의 코드 블록만 스코프 인정. 따라서 전역 함수 외부에서 생성한 변수는 모두 전역 변수이다. 이는 전역 변수를 남발할 가능성을 높인다.
   • for 문의 변수 선언문에서 선언한 변수를 for 문의 코드 블록 외부에서 참조할 수 있다.

2. var 키워드 생략 허용

   • 암묵적 전역 변수를 남발할 가능성이 크다.

3. 변수 중복 선언 허용

   • 의도하지 않은 변수값의 변경이 일어나 혼란을 높일 수 있다.

4. 변수 호이스팅

   • 변수를 선언하기 이전에 참조할 수 있다.

ES6는 이러한 var 키워드의 단점을 보완하기 위해 let과 const키워드를 도입하였다.

 

1. let

1.1 블록 레벨 스코프

대부분의 프로그래밍 언어는 블록 레벨 스코프(Block-level Scope)를 따르나 자바스크립트는 함수 레벨 스코프(Function-level Scope)를 따른다.

함수레벨스코프(Function-level Scope)

함수 내에 선언된 변수는 함수 내애셔만 유효. 함수 외부에서는 참조할 수 없다.

즉, 함수 내부에서 선언한 변수는 지역변수이며, 함수 외부에서 선언한 변수는 모두 전역변수이다.

 

블록레벨스코프(Block-level Scope)

모든 코드블록(함수, if 문, for 문, while 문, try/catch문 등) 내에서 선언된 변수는 코드 블록 내에서만 유효하며, 코드 블록 외부에서도는 참조할 수 없다.

즉, 코드 블록내부에서 선언한 변수는 지역변수이다.

 

예제를 살펴보자.

var foo = 123; // 전역변수(1)
consolelog(foo); // 123

{
  var foo = 456; // 전역변수(2)
}
console.log(foo); // 456

블록레벨스코프를 따르지 않는 var 키워드의 특성 상, 코드 블록 내의 변수 foo는 전역변수이다. 그런데 이미 전역변수 foo가 선언되어있고 var 키워드를 사용하여 선언한 변수는 중복 선언이 허용되므로 위의 코드는 문법적으로 문제가 없다.

단, 코드 블록 내의 변수 foo(2)는 전역변수이기 때문에 전역에서 선언된 전역변수 foo(1)의 값 123을 새로운 456 으로 재할당하여 덮어쓴다.

 

let foo = 123; // 전역변수
{
  let foo = 456; // 지역변수
  const bar = 456; // 지역변수
}
console.log(foo); // 123
console.log(bar); // ReferenceError: bar is not defined

let 키워드로 선언된 변수는 블록레벨스코프를 따른다.

코드블록내에 선언된 변수 foo 는 블록레벨스코프를 갖는 지역변수이다. 전역에서 선언된 변수 foo와는 다른 별개의 변수이다. 또한 변수 bar도 블록레벨스코프를 갖는 지역변수이다. 따라서 전역에서는 변수 bar를 참조할 수 없다.

 

 

1.2 변수 중복 선언 금지

var 키워드로는 동일한 이름을 갖는 변수를 중복해서 선언할 수 있었다.

하지만 let 키워드는 동일한 이름 갖는 변수를 중복해서 선언할 수 없다. 변수를 중복선언하면 문법에러(SyntaxError)가 발생.

var foo = 123; 
var foo = 456; // 중복선언허용

let bar = 123;
let bar = 456; // 문법에러

 

 

1.3 호이스팅

호이스팅(Hoisting)이란 var선언문이나 function선언문 등을 해당 스코프의 선두로 옮긴 것처럼 동작하는 특성을 말한다.

자바스크립트는 ES6에서 도입된 let, const를 포함하여 모든 선언을 호이스팅한다.

 

하지만 var 키워드로 선언되 변수와 달리 let 키워드로 선언된 변수를 선언문 이전에 참조하면 참조에러(ReferenceError)가 발생.

이는 let키워드로 선언된 변수는 스코프의 시작에서 변수의 선언까지 일시적사각지대(Temporal Dead Zone;TDZ)에 빠지기 때문.

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

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

 

변수가 어떻게 생성되며 호이스팅은 어떻게 이루어지는지 살펴보자.

변수는 3단계에 걸쳐 생성된다.

선언단계 (Declaration phase)

변수를 실행 컨텍스트의 변수객체(variable Object)에 등록. 이 변수객체는 스코프가 참조하는 대상이 된다.

초기화단계 (Initialization phase)

변수객체(variable Object)에 등록된 변수를 위한 공간을 메모리에 확보. 이 단계에 변수는 undefined로 초기화.

할당단계 (Assignment phase)

undefined로 초기화된 변수에 실제 값을 할당한다.

 

var 키워드로 선언된 변수는 선언단계와 초기화단계가 한번에 이루어진다.

즉, 스코프에 변수를 등록(선언단계)하고 메모리에 변수를 위한 공간을 확보한 후, undefined로 초기화(초기화단계) 한다.

따라서 변수 선언문 이전에 변수에 접근하여도 스코프에 변수가 존재하기 때문에 에러가 발생하지 않는다. 다만 undefined를 반환한다. 이후 변수할당문에 도달하면 값이 할당된다.

이러한 현상을 변수호이스팅(Variable Hoisting)이라 한다.

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

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

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

 

let 키워드로 선언된 변수는 선언단계와 초기화 단계가 분리되어 진행된다.

즉, 스코프에 변수를 등록(선언단계)하지만 초기화 단계는 변수 선언문에 도달했을 때 이루어진다.

// 스코프의 선두에서 선언단계가 실행.
// 아직 변수가 초기화(메모리 공간 확보와 undefined로 초기화)되지 않았다.
console.log(foo); // undefined

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

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

	선언단계	ReferenceError
	일시적 사각지대(TDZ)	ReferenceError
let foo;	초기화 단계	foo === undefined
foo = 1;	할당단계	foo === 1

 

결국 ES6에서는 호이스팅이 발생하지 않는 것처럼 보이나 그렇지 않다.

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

ES6의 선언문도 여전히 호이스팅이 발생하기 때문에 참조에러(ReferenceError)가 발생한다.

ES6의 let으로 선언된 변수는 블록레벨스코프를 가지므로 코드 블록 내에서 선언된 변수foo는 지역변수이다. (let foo = 2;) 따라서 지역변수foo도 해당 스코프에서 호이스팅되고 코드 블록의 선두부터 초기화가 이루어지는 지점까지 일시적 사각지대(TDZ)에 빠진다.

따라서 전역변수foo의 값이 출력되지 않고 참조에러(ReferenceError)가 발생한다.

코드블록내에 호이스팅이 되어 console.log(foo)를 읽지만 일시적사각지대에 빠지므로 레퍼런스 에러가 난 것이다.

지역변수 아래에 console.log(foo); 를 확인하면 2가 출력된다.

 

 

1.4 클로저

블록레벨스코프를 지원하는 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가 전역 변수이기 때문이다.

 

var funcs = [];

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

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

자바스크립트의 함수레벨스코프로 인하여 for루프의 초기화식에 사용된 변수가 전역스코프를 갖게 되어 0,1,2를 출력할 수 있었다. (클로저 활용)

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를 참조하는 함수가 존재하는 한 계속 유지된다.

 

 

1.5 전역객체와 let

전역객체(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

 

 

2. const

let은 재할당이 가능하나 const는 재할당이 금지다.

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

 

주의할 점은

const는 반드시 선언 + 할당이 같이 이루어져야 한다.

const FOO; // SyntaxError: Missing initializer in const declaration

 

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

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

 

 

2.2 상수

상수는 가독성과 유지보수의 편의를 위해 적극적으로 사용해야 한다.

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

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

조건문 내의 10은 어떤 의미로 사용하였는지 파악하기 곤란하다.

하지만 네이밍이 적절한 상수로 선언하면 가독성과 유지보수성이 향상된다.

 

const는 객체에도 사용가능하다. 이때도 재할당은 금지된다.

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

 

 

2.3 const와 객체

const는 재할당이 금지된다.

이는 const 변수의 타입이 객체인 경우, 객체애 대한 참조를 변경하지 못한다는 것을 의미. 하지만 이때 객체의 프로퍼티는 보호되지 않는다.

재할당은 불가능하나 할당된 객체의 내용(프로퍼티 추가, 삭제, 프로퍼티 값 변경)은 변경가능하다.

 

const user = { name: 'Lee' };

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

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

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

객체의 내용이 변경되더라도 객체타입변수에 할당된 주소값은 변경되지 않는다.

따라서 객체타입 변수 선언에는 const를 사용하는 것이 좋다.

만약에 객체타입 변수의 주소값을 변경(재할당)할 경우는 let을 사용한다.

 

 

 

3. var vs let vs const

변수 선언에는 기본적으로 const 사용하고, let은 재할당이 필요한 경우에 한정해 사용하는 것이 좋다.

원시 값일 경우, 가급적 const를 사용하는 것이 좋다.

그리고 객체를 재할당하는 경우는 생각보다 흔하지 않기 때문에 const키워드를 사용해 의도치 않은 재할당을 방지해주므로 안전하다.

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

변수를 선언하는 시점에는 재할당이 필요할지 잘 모르는 경우가 많다. 그리고 객체는 의외로 재할당하는 경우가 드물다.

따라서 변수를 선언할 때에는 일단 cosnt 키워드를 사용하자.

재할당이 필요하다면(반드시 재할당이 필요한지 한번 생각해보기) 그때 const를 let 키워드로 변경해도 늦지 않다.

 

 

---

 

Reference

https://poiemaweb.com/es6-block-scope