[JS] let, const, var

JG HAN·2022년 8월 1일

JS

목록 보기

3/8

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

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

var는 선언하기 전에 사용할 수 있다.
->var로 선언된 모든 변수는 코드가 실제로 이동하지는 않지만, 최상위로 끌어올려진것 처럼 동작하기 때문, 이를 호이스팅(hoisting)이라고 한다.
아래 결과가 undefined 된 이유는 선언은 hoisting되지만 할당은 hoisitng 되지 않기 때문

var name;
console.log(name); //undefined
name = 'mike'; //여기서 할당

호이스팅
스코프 내부 어디서든 변수 선언은 최상위에 선언된 것 처럼 행동

호이스팅은 스코프 단위에서 발생한다.
아래와 같이 2번째 선언한 age 때문에 에러 발생한다. 함수 스코프 내부에서 let으로 선언된 age변수가 호이스팅하기 때문
만약 함수내에서 age 선언 안했다면 30이 출력된다.

let age = 30;
function showAge(){
	console.log(age);
    let age = 20; //있으면 에러 발생, 없으면 에러x
}

let은 var와 달리 ReferenceError가 뜬다.
그 이유는 let 과 const는 TDZ(Temporal Dead Zone)의 영향을 받기 때문
즉 할당을 받기전에는 사용할 수 없다.
-> 코드를 예측가능하게 하고, 잠재적인 버그를 줄일 수 있다.

console.log(name); //ReferenceError
let name = 'mike';

var는 선언과 동시에 초기화가 된다. 따라서 할당전에 호출하면 에러를 내지 않고 undefiend를 낸다.

let은 hoisting되면서 선언단계가 이뤄지지만 초기화 단계는 실제 코드에 도달됐을때 된다.

var: 함수 스코프
-> 함수 내에서 선언한 변수만 지역변수가 된다.

let, const: 블록 스코프
-> 모든 코드 블록에서 선언된 변수는 코드 블록 내에서만 유효하며 외부에서는 접근할 수 없음, 즉, 코드내부에서 선언한 변수는 지역변수

예를들어 if문 안에서 선언한 변수는 if문 밖에서도 사용 가능
하지만 let, const는 if문 안에서만 사용가능

const age = 30;
if(age > 19){
	var txt = '성인';
}
console.log(txt); //'성인'

var도 한수내에서 선언하면 함수 밖에선 사용 불가능, 유일하게 벗어날 수 없는 스코프가 함수

function add(num1, num2){
	var result = num1 + num2;
}
 add(2,3);
console.log(result); // -> Uncautcht ReferecneError 발생

예측 가능한 결과를 내고 버그를 없앨수 있다는 점에서 var보다는 let, const 사용을 권장한다.