[JavaScript] var, let, const

JavaScript 변수 선언 키워드인 var와 ES6에 추가된 let, const의 차이에 대해 알아보았다.

---

var
ES6 이전부터 사용하던 변수 선언 키워드
재선언이 가능하다.

var name='Tom';
console.log(name); // Tom
name='and';

var name='Jerry';
console.log(name); // 에러 발생하지 않고 Jerry 출력

호이스팅(변수 선언문이 어디에 있든, 먼저 찾아내서 위로 끌어올려 실행)된다.

console.log(test); // 에러 발생하지 않고 undefined 출력
var test;
console.log(test); // undefined

함수 범위 밖에서 선언 시 전역 변수로 동작한다.

var language = 'kor';
if(true) {
    var language = 'eng';
}
console.log(language); // eng

var name = 'Tom';
function test() {
    var name = 'Jerry'; // 함수 범위 선언으로 전역변수 값에 영향없음
}
test();
console.log(name); // Tom

---

let
ES6에 등장한 변수 선언 키워드로
var와 달리 재선언이 불가하고,

// 실행 시 에러발생
// Uncaught SyntaxError: Identifier 'name' has already been declared
let name='Tom';
console.log(name);
name='and';

let name='Jerry';
console.log(name);

호이스팅되지 않는다.(선언된 시점 이후부터 변수 사용 가능)

console.log(test); // Uncaught ReferenceError: Cannot access 'test' before initialization
let test;
console.log(test);

블럭 단위 스코프로 지역변수로 사용이 가능하다.

let language = 'kor';
if(true) {
    let language = 'eng';
}
console.log(language); // kor

---

const
ES6에서 등장한 변수 선언 키워드로
재선언이 불가하며, 선언 시 초기화가 필요하다.

// 실행 시 에러발생
// Uncaught SyntaxError: Identifier 'name' has already been declared
const name='Tom';
console.log(name);
name='and';

const name='Jerry';
console.log(name);

let과 달리 재할당도 불가하다.
재할당이 불가하기 때문에 값의 변경이 없는 변수 또는 객체, 배열, 함수 등의 선언에 사용한다. 
객체나 배열 등을 선언했을 경우, 주소값에 대해 재할당이 불가하기 때문에 속성or요소 값의 변경은 가능하다.

const name = 'Tom';
name = 'Jerry'; // Uncaught TypeError: Assignment to constant variable.

// 객체 속성 변경 가능
const obj = {
    name : 'GilDong',
    age : 10
}
obj.gender = 'male';
console.log(obj); // {name: 'GilDong', age: 50}

// 배열 요소 변경 가능
const arr = ['a', 'b', 'c'];
arr[0] = 1;
arr[3] = 'd';
console.log(arr); // [1, 'b', 'c', 'd']
arr = [1, 2, 3]; // 재할당은 불가 Uncaught TypeError: Assignment to constant variable

호이스팅되지 않는다.(선언된 시점 이후부터 변수 사용 가능)

console.log(test); // Uncaught ReferenceError: Cannot access 'test' before initialization
const test = 'TEST';
console.log(test);

블럭 단위 스코프로 지역변수로 사용이 가능하다.

const language = 'kor';
if(true) {
    const language = 'eng';
}
console.log(language); // kor

---

[참고]
https://www.w3schools.com/js/js_es6.asp