[모던 자바스크립트 Deep Dive] 15장 : let, const 키워드와 블록 레벨 스코프 - JS

var로 선언한 변수의 문제점

1. 변수 중복 선언 허용
2. 함수 레벨 스코프
3. 변수 호이스팅

---

📙 변수 중복 선언 허용

var x = 1;
var y = 1;

var x = 100;
var y; // 초기화 없는 변수 무시

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

동일한 이름의 변수가 이미 선언되어 있는 것을 모르고 값을 할당했다면 의도치 않게 값이 변경되는 부작용이 발생한다.

 

📙 함수 레벨 스코프

var x = 1;

if(true) {
  var x = 10; // 전역 변수
}

console.log(x); // 10

함수 레벨 스코프는 전역 변수를 남발할 가능성을 높인다. 이로 인해 의도치 않게 전역 변수가 중복 선언되는 경우가 발생할 수 있다.

 

📙 변수 호이스팅

console.log(foo); // undefined

foo = 123;

console.log(foo); // 123

// 변수 선언은 런타임 이전에 실행된다.
var = foo;

변수 선언문 이전에 변수를 참조하는 것은 변수 호이스팅에 의해 에러를 발생시키지는 않지만 프로그램의 흐름상 맞지 않을뿐더러, 가독성을 떨어뜨리고 오류를 발생시킬 여지가 있다.

 

 

---

 

var 키워드의 단점을 보완하기 위해 ES6에서는 새로운 변수 선언 키워드인 let과 const를 도입했다.

 

let 키워드

1. 변수 중복 선언 금지
2. 블록 레벨 스코프
3. 변수 호이스팅

📗 변수 중복 선언 금지

let bar = 123;

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

let키워드로 이름이 같은 변수를 중복으로 선언하면 문법 에러가 발생한다.

 

📗 블록 레벨 스코프

let foo = 1; // 전역 변수

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

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

let 키워드로 선언한 변수는 모든 코드 블록을 지역 스코프로 인정하는 블록 레벨 스코프를 따른다.

 

📗 변수 호이스팅

console.log(foo); // ReferenceError: foo is not defined
let foo; // 초기화

console.log(foo); // undefined;
foo = 1; // 할당

console.log(foo); // 1

let 키워드로 선언한 변수는 변수 호이스팅이 발생하지 않는 것처럼 동작한다.

 

 

const 키워드

1. 선언과 초기화
2. 재할당 금지
3. 상수
4. const 키워드와 객체

📗 선언과 초기화

const foo = 1;
console.log(foo); // 1

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

 

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

선언과 초기화를 동시에 안 할시 에러가 발생한다

 

📗 재할당 금지

const foo = 1;

foo = 2; // TypeError: Assignment to constant variable

var 나 let으로 선언한 변수는 재할당이 자유롭지만 const 키워드로 선언한 변수는 재할당을 할 수 없다.

 

📗 상수

// 세율을 의미하는 0.1은 변경할 수 없는 상수
const TAX_RATE = 0.1;

// 세전 가격
let preTaxPrice = 100;

let afterTaxPrice = preTaxPrice + (preTaxPrice * TAX_RATE);

console.log(afterTaxPrice); // 110

const 키워드로 선언된 변수에 원시 값을 할당한 경우 원시 값은 변경할 수 없는 값이다.

 

📗 const 키워드와 객체

const person = {
  name: 'Lee'
};

person.name = 'Kim';

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

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

 

 

 

좋아요는 로그인하지 않아도 누를 수 있습니다!