차이점의 기준?

중복 선언 허용, 스코프, 호이스팅을 기준으로 살펴볼 것이다.

변수 선언 방식

💡var

• 선언과 초기화가 동시에 진행된다.
• 재선언, 재할당이 가능하다.

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

// 아무것도 할당하지 않을 시 undefined 값이 암묵적으로 할당된다.

/*
1. 선언 단계 : 변수 이름을 등록
2. 초기화 단계 : 값을 저장하기 위해 메모리 공간을 확보, undefined 할당해 초기화
이전에 다른 애플리케이션이 사용했던 값(쓰레기 값)이 남아 있을 수 있다.
*/

💡let (ES6)

• 선언만 이루어진다.
• 재선언이 불가능하고, 재할당이 가능하다.

let ex1;
console.log(ex1); //undefined
ex1 = 1;
console.log(ex1); // 1

💡const (상수, ES6)

• 선언만 이루어진다. 선언과 동시에 초기화를 해야 한다.
• 재선언, 재할당이 불가능하다.

const ex1 = 0;
ex1 = 1; //TypeError

중복 선언 허용

var의 경우 허용하지만, let과 const는 허용하지 않는다.

var user = "Bae";
var user = "Jun"; //에러는 발생하지 않는다.

alert(user); // Jun

let myName;
let myName; // SyntaxError

스코프

💡스코프란?

• 식별자(변수명, 함수명, 클래스명…)의 유효범위를 뜻한다.
• 전역에 선언된 전역변수는 전역 스코프를 가져 모든 곳에서 참조가 가능하다.
• 지역에 선언된 지역변수는 지역 스코프를 가져 해당 지역, 하위 지역에서만 참조된다.

var의 경우 함수 스코프를 지원하고, let과 const의 경우 블록 스코프를 지원한다.

var foo = 123; // 전역 변수

console.log(foo); // 123

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

console.log(foo); // 456

let foo = 123; // 전역 변수

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

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

호이스팅

💡호이스팅이란?

• 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징

let, const로 선언한 변수는 선언되기 이전에 사용할 수 없다.
var 로 선언한 변수는 함수 스코프를 기준으로 선언되기 이전에도 변수에 접근이 가능하다.

console.log(myVariable);
let myVariable; // Uncaught ReferenceError

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

참조

PoiemaWeb

오래된 var