Frontend/modern javascript

[Modern javascript] let, const 키워드와 블록 레벨 스코프

igoman2 2021. 8. 19. 20:36
728x90

ES5까지 변수를 선언할 수 있는 방법은 var키워드가 유일했다.

■ var 키워드 

1. 변수 중복 선언 허용

- 선언된 변수 값이 변경되는 부작용이 발생한다.

var x = 1;
var y = 1;

// var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용한다.
// 초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작한다.
var x = 100;
// 초기화문이 없는 변수 선언문은 무시된다.
var y;

console.log(x); // 100
console.log(y); // 1

 

2. 함수 레벨 스코프 

- 전역 변수를 남발할 가능성을 높이고 의도치 않게 전역 변수가 중복 선언되는 경우가 발생한다.

var x = 1;

if (true) {
  // x는 전역 변수다. 이미 선언된 전역 변수 x가 있으므로 x 변수는 중복 선언된다.
  // 이는 의도치 않게 변수값이 변경되는 부작용을 발생시킨다.
  var x = 10;
}

console.log(x); // 10



var i = 10;

// for문에서 선언한 i는 전역 변수이다. 이미 선언된 전역 변수 i가 있으므로 중복 선언된다.
for (var i = 0; i < 5; i++) {
  console.log(i); // 0 1 2 3 4
}

// 의도치 않게 i 변수의 값이 변경되었다.
console.log(i); // 5

 

3. 변수 호이스팅

- var 키워드로 선언한 변수는 변수 선언문 이전에 참조할 수 있어 가독성을 떨어뜨리고 오류를 발생시킬 여지를 남긴다.

- 런타임 이전에 선언 단계와 초기화 단계가 실행

// 이 시점에는 변수 호이스팅에 의해 이미 foo 변수가 선언되었다(1. 선언 단계)
// 변수 foo는 undefined로 초기화된다. (2. 초기화 단계)
console.log(foo); // undefined

// 변수에 값을 할당(3. 할당 단계)
foo = 123;

console.log(foo); // 123

// 변수 선언은 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 실행된다.
var foo;

 

 

■ let 키워드 

1. 변수 중복 선언 금지

var foo = 123;
// var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용한다.
// 아래 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작한다.
var foo = 456;

let bar = 123;
// let이나 const 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용하지 않는다.
let bar = 456; // SyntaxError: Identifier 'bar' has already been declared

 

2. 블록 레벨 스코프

- let 키워드로 선언한 변수는 모든 코드 블록(함수, if문, for문, try/catch문 등)을 지역 스코프로 인정하는 블록 레벨 스코프를 따른다.

var foo = 123;
// var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용한다.
// 아래 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작한다.
var foo = 456;

let bar = 123;
// let이나 const 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용하지 않는다.
let bar = 456; // SyntaxError: Identifier 'bar' has already been declared

 

3. 변수 호이스팅

- let 키워드로 선언한 변수는 변수 호이스팅이 발생하지 않는 것 처럼 보인다(사실은 한다)

- "선언 단계" 와 "초기화 단계" 가 분리되어 진행. 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 선언, 코드에 도달했을 때 초기화.(일시적 사각지대)

var foo = 123;
// var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용한다.
// 아래 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작한다.
var foo = 456;

let bar = 123;
// let이나 const 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용하지 않는다.
let bar = 456; // SyntaxError: Identifier 'bar' has already been declared

 

4. 전역 객체와 let

- var 키워드로 선언한 전역 변수, 전역 함수와 암묵적 전역은 전역 객체 window의 프로퍼티가 된다. let 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 아니다.

 

 

■ const 키워드 

- const 키워드는 상수를 선언하기 위해 사용한다.

 

1. 선언과 초기화

- const 키워드로 선언한 변수는 반드시 선언과 동시에 초기화해야 한다.

- 블록 레벨 스코프를 가지며 변수 호이스팅이 발생하지 않는 것처럼 동착한다.

 

2. 재할당 금지

- const 키워드로 선언한 변수는 재할당이 금지된다.

 

3. 상수

- 재할당이 금지된 변수

- 유지 보수의 편의를 위해 상수를 적극 활용해야 한다.

- 일반적으로 상수의 이름은 대문자로 선언한다. 여러 단어인 경우 스네이크 케이스(_) 로 표현한다.

2. 재할당 금지

- const 키워드로 선언한 변수는 재할당이 금지된다.



var foo = 123;
// var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용한다.
// 아래 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작한다.
var foo = 456;

let bar = 123;
// let이나 const 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용하지 않는다.
let bar = 456; // SyntaxError: Identifier 'bar' has already been declared

 

3. const 키워드와 객체

- const 키워드로 선언된 변수에 원시 값을 할당한 경우 값을 변경할 수 없지만 객체를 할당한 경우 값을 변경할 수 있다.

- const는 재할당을 금지할 뿐 "불변"을 의미하지는 않는다.

const person = {
  name: 'Lee'
};

// 객체는 변경 가능한 값이다. 따라서 재할당없이 변경이 가능하다.
person.name = 'Kim';

console.log(person); // {name: "Kim"}

 

 

■ var / let / const

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

일단 const를 쓰는 것이 좋다.

 



 

이 코드를 실행시키면 어떤 결과가 나올 것 같은가?

0,1,2,3,4,5,6,7,8,9 가 찍힐 것 같지만 10이 10번 찍힌다.

 

for (let i = 0; i < 10; i++) {
  setTimeout(function () {
    console.log(i);
  }, 100);
}

 

반면 var를 let으로 바꾸면 0,1,2,3,4,5,6,7,8,9 로 찍힌다.

 

이유는 간단하다. var는 함수 레벨 스코프를 가지기 때문이다.

첫번째 코드를 풀어 쓰면 다음과 같다.

var i = 0
  setTimeout(function () {
    console.log(i);
  }, 100);
  
var i = 1
  setTimeout(function () {
    console.log(i);
  }, 100);
  
var i = 2
  setTimeout(function () {
    console.log(i);
  }, 100);
  
var i = 3
  setTimeout(function () {
    console.log(i);
  }, 100);
  
var i = 4
  setTimeout(function () {
    console.log(i);
  }, 100);
  
var i = 5 
...

 

for문 안의 코드는 0.1초 뒤에 실행된다. 하지만 var로 선언한 i는 함수 레벨 스코프, 즉 전역 변수 처럼 활동을 하기 때문에 0.1초가 지나는 동안 호이스팅에 의해 var 1~10 까지 할당되는 작업이 끝났고 마지막 var 값인 10을 참조하게 된다.

반면 let 으로 선언한 i는 블록 레벨 스코프를 가지기 때문에 for문 10개 각각의 블록 내에 값으로 존재한다. 따라서 1,2,3,4,5,6,7,8,9 가 출력 된다.

 

728x90