[Javascript] (ES6) var let const 차이/호이스팅/스코프

자바스크립트하면 꼭 알아야 하는 개념, var let const의 차이점과 스코프에 대해 간단히 정리해보았습니다!

간단하게 말하자면, var는 전역 유효범위, 함수 안에 있다면 functional scope이고, let과 const는 block scope라고 생각하면 간단합니다. 예제를 보고 금방 이해할 수 있었습니다.

 

// var: 전역 유효범위


// 예제[1]
// if문 안에서 선언한 a 변수는 if문 밖에서도 전역으로 사용됨
if(true){
    var a = 1;
}
console.log(a); //1


// 예제[2]
// function scope이므로 함수 안에서 선언한 a 변수는 함수밖에서 전역으로 사용 불가
function test(){
    var a = 1;
    console.log(a); //1
}
test();
console.log(a); //error


// 예제[3]
// var는 중복 선언이 가능하며 가장 마지막에 할당된 값이 기존의 값을 덮어쓰게 됨
var a = 0;
var a = 1;
console.log(a); //1


// 예제[4]
// var는 호이스팅이 가능함
console.log(a); //undefined
var a = 0;
console.log(a); //0


// 예제[5]
// 함수 안에서 선언되었어도 var가 빠지면 전역 변수로 사용됨
// 함수를 전역으로 사용하는 것은 가능한 피해야 함. 중복으로 사용될 위험이 있음
function test(){
	t=1;
}
test();
console.log(t); //1
function test2(){
	console.log(t);
}
test2(); //1

 

// let & const: block scope


// 예제 [1]
// 블록 스코프임으로 if문 안에서 선언된 변수는 괄호 안에서만 사용 가능
let a = 1;
if(true){
    let b = 2;
}
console.log(a); //1
console.log(b); //error


// 예제 [2]
// 중복 선언 불가
let a = 0;
let a = 1;
console.log(a); //error


// 예제 [3]
// 호이스팅 불가
console.log(a); //error
let a = 0;
console.log(a); //0


// 예제 [4]
// let은 선언 후 값을 재할당하는 것이 가능하지만 const는 값 재할당 불가
let a = 0;
a = 1;
console.log(a); //1

const b = 0;
b = 1; //error


// 예제 [5]
// 객체 타입 변수 선언에는 const를 사용하는 것이 좋음
// 재할당은 금지되지만, property는 변경이 가능함
const a = {name: 'olly'};
const a = {}; //error
a.name = 'olivia';
console.log(a); //{name: 'olivia'};