var 키워드 문제점

1. 변수 중복 선언 허용

• 동일한 이름의 변수가 이미 선언되어 있는 것을 모르고 변수를 중복 선언하면서 값까지 할당했다면 의도치 않게 먼저 선언된 변수 값이 변경되는 부작용 발생

var x = 1;      // x변수 선언 & 초기화 동시에
var y = 1;      // y변수 선언 & 초기화 동시에

var x = 100;    // 선언 문 O, 초기화 문도 X   
var y;          // 선언 문은 O, 초기화 문이 X (암묵적 무시)

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

2. 함수 레벨 스코프

• 함수 외부에서 var 키워드로 선언한 변수는 코드 블록 내에서 선언해도 모두 전역 변수가 된다. → 함수 레벨 스코프
• 함수 레벨 스코프는 전역 변수를 남발할 가능성을 높인다. → 의도치 않게 전역 변수가 중복 선언되는 경우가 발생

var x = 1;

// 코드 블록(블록 레벨), 하지만 var 는 함수 레벨 스코프
// 고로, 블록 내 x변수는 전역 변수 처럼 스코프가 적용
{
  var x = 10;
}

console.log(x);     // 10

3. 변수 호이스팅

변수호이스팅

• 변수 호이스팅이 에러를 발생시키지는 않지만 프로그램의 흐름상 맞지 않을뿐더러 가독성을 떨어뜨리고 오류를 발생시킬 여지를 남긴다.

console.log(foo);   // undefined << foo 변수 암묵적 선언 & 초기화 (호이스팅)

foo = 123;          // foo변수 값 할당

console.log(foo);   // 123 

var foo;

let 키워드

let 키워드 는 ES6 에 도입되어 var 키워드의 단점을 보완하기 위해 등장

1. 변수 중복 선언 금지

• let 키워드로 이름이 같은 변수를 중복 선언하면 문법 에러(SyntaxError)가 발생

// var 변수 = 중복 선언 허용 O
var foo = 123;
var foo = 456;
console.log(foo);

// let 변수 = 중복 선언 허용 X
let bar = 123;
let bar = 456; // SyntaxError: Identifier 'bar' has already been declared
console.log(bar);

// 선언 단계 에서 체크하므로 → 위에서 var 변수인 foo에 대한 출력문 실행이 진행 안됨

2. 블록 레벨 스코프