[자바스크립트] 변수 선언 var과 ES6의 let, const

자바스크립트는 세 가지 방식으로 변수를 선언한다.
기존의 선언 방식 var , 그리고 ES6 문법에서 등장한 let 과 const 가 있다.

새로운 변수 선언 방식과 타입스크립트의 등장으로 자바스크립트에도 좀 더 체계가 잡힌 것을 알 수 있다.
예제를 통해 세 가지 방식의 차이점을 알아보겠다.

변수 선언 방식

var

var은 변수의 재선언, 재할당이 모두 가능하다.

var name = 'miniddo';
console.log(name);	// miniddo

var name = 'happy';
console.log(name);	// happy

이미 선언된 변수 name을 한번 더 선언해도 에러 없이 새로운 값이 할당된다.
다루기 쉽다는 장점이 있는 반면, 코드가 복잡해지면 변수를 관리하기 어려워진다.

let

let은 변수의 재선언은 불가능하지만, 재할당은 가능하다.

let name = 'miniddo';
console.log(name);	// miniddo

let name = 'happy';	// 변수 재선언 불가능
console.log(name);	
// Uncaught SyntaxError: Identifier 'name' has already been declared

name = 'love';		// 변수 재할당 가능
console.log(name);	// love

const

const는 변수의 재선언, 재할당 모두 불가능하다.
이러한 이유로 const는 재할당을 하지 않은 전역변수에 주로 쓰인다. 재할당이 필요한 경우는 let을 사용한다.

const name = 'miniddo';
console.log(name);	// miniddo

const name = 'happy';	// 변수의 재선언 불가능
console.log(name);
// Uncaught SyntaxError: Identifier 'name' has already been declared

name = 'love';
console.log(name);
// Uncaught TypeError: Assignment to constant variable

변수의 유효범위

var

var은 함수 스코프(Function Scope)이다.

var str = 'This is String';

if(typeof str === 'string') {
    var result = true;
} else {
    var result = false;
}

console.log(result);	// true

위의 예시처럼 if문 안에서 result가 선언되었지만 if문 밖에서 result 값이 찍힌다.
이처럼 var로 변수를 선언하면 내부 변수를 외부에서도 사용할 수 있다.

let과 const

let과 const는 블록 스코프(Block Scope)이다.

var str = 'This is String';

if(typeof str === 'string') {
    let result = true;
} else {
    let result = false;
}

console.log(result);	// result is not defined

var str = "This is String.";
if (typeof str === 'string') {
    const result = true;
} else {
    const result = false;
}

console.log(result); // result is not defined

let과 const는 해당 블록 안에서만 사용 가능하다.
result 변수가 if문 안에서 선언되었기 때문에 외부 console에서는 적용되지 않는다.