var 와 let의 차이

YANG쓰·2023년 4월 7일

var 와 let

흔이 변수를 선언할때 let,const,var를 쓴다 하지만 2015년 let이 나온 이후에는 var를 쓰지말고 let,const를 쓰라고 말들 한다. 하지만 이건 정말 맞는 말이다.

function main (){
	if(true){
    	var x = 'hello'
    }
    
    console.log(x) // hello
}

var는 자동으로 함수 스코프를 가지고 있다. 그래서 함수 내부에서는 블럭의 위치 상관없이 접근이 가능하다는 점이 있다.

function main (){
	if(true){
    	let x = 'hello'
    }
    
    console.log(x)// 호출 안됨
}

let같은 경우에는 블록스코프를 특징으로 자기조 잇다. 그래서 블럭내부에서만 접근이 가능하다는 점이다.

그리고 var같은 경우에는 중복선언이 가능하기에 맨위에 변수를 아래 var변수가 덮어쓴다. 이것을 혼란을 초래해 var를 쓰지 않는것이 좋다.

함수 안에 있는 선언들을 모두 끌어올려서 해당 함수를 전역적으로 유효범위를 늘릴수 있게 선언하는것을 말한다.

var 와 let또한 호이스팅할때 큰 차이를 보인다.

console.log(num) // undefined

var num = 10

console.log(num) // 10

var같은 경우에는 변수에 접근을 할때 호이스팅이 되서 값이 상단으로 끌어 올려질때, undefined로 자동으로 초기하는 특징이 있다.

console.log(num) // Cannot access 'num' before initialization

let num = 10

console.log(num) // 10

Cannot access 'num' before initialization이라는 에러 문구가 뜬다.

왜 그런것일까

let같은 경우니는 Hoisting이 되서 끌어올려지지만 var처럼 변수를 초기화작업을 하지 않는다. 그래서 선언전에 접근하면 변수 선언이 안되서 에러가 나는거다.

왜 그러냐면 TDZ라는 일시적 사각지대 때문이다. 호이스팅이 되어서 끌어올려지지만 코드 상단까지 접근할때 일시적 사각지대에 빠지기 때문에 접근이 불허용 된다.

그래서 상단 console.log(num)은 일시적 사각지대에 빠지게 되는것이다.

TDZ때문에 더 안전하게 코딩할수 있게 된다.

양쓰