var와 let, const의 차이

선언의 차이

var

var는 중복선언을 허용합니다.

var num = 10;
console.log(num);

var num = 20;
console.log(num);

하지만
만약 같은 프로젝트를 진행하는 A개발자가 var 키워드로 num변수를 사용했습니다.
그런데 B개발자가 var 키워드로 num변수를 선언하여 사용한다면 값이 바뀌게되어 프로그램이 엉망이됩니다.

let

let은 중복선언이 되지않는다.

let num = 10;
console.log(num);

let num = 20;
console.log(num);

이렇게 한다면 에러가나며 진행되지않습니다. 이렇게 중복선언을 막아줍니다.

let num = 10;
console.log(num);

num = 20;
console.log(num);

const

const 는 상수로 분류되어 선언을 한 후 값을 바꿀려하면 오류가난다.
(변수라고 부르지않음)

const id = "name"
const pw = 1234

id = "id" //오류
pw = 4321 //오류

호이스팅

호이스팅이란?

인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상을 뜻합니다

var

console.log(a) //-> undefined
var a = 1;
console.log(a) //-> a

이렇게 작성해도 에러가나지않고 변수 a를 코드실행전에 변수가 있다는것을 인지하고 값이 선언되지않아 undefined가 뜨게 된다.

var의 호이스팅은 모든 호이스팅이 전역변수로 지정된다.

let, const

console.log(a) 
let a = 1;
console.log(a) 

let의 경우 호이스팅이 되지만 TDZ(Temporal Dead Zone)가 있어 에러가 나며 a를 선언하기전까지는 실행해주지 않는다.(const도 동일)

스코프

var

함수스코프란?

함수스코프는 함수안에서 변수가 선언되었다면 활용할 수 있습니다.

var의 경우 함수스코프로 되어있어 if문 밖에서 정의된 변수 x는 if문 안에서도 사용할 수 있습니다.

function main(){
	if(ture){
    	var x = 0; 
    }
    console.log(x);
}

또다른 문제

function main(){
  	var x = 1;
	if(ture){
    	var x = 0;
        console.log(x) // -> 0
    }
  	console.log(x); // -> 0
}

다음과 같이 var는 함수스코프이기 때문에
같은 함수에서 값을 다시 선언한다면 그대로 적용이 됩니다.

let

블록스코프란?

블록스코프는 중괄호({})를 기준으로 선언된 변수를 활용할 수 있습니다.

let의 경우 블록스코프로 되어 있어 if문에서 정의된 변수 x는 밖에서 consol.log(x)하지 못합니다.

function main(){
	if(ture){
    	let x = 0; 
    }
    console.log(x);  //오류
}

function main(){
	if(ture){
    	let x = 0;
        console.log(x); //x
    }
}

또다른 문제

function main(){
  	let x = 1;
	if(ture){
    	let x = 0;
        console.log(x) // -> 0
    }
  	console.log(x); // -> 1
}

다음과 같이 let은 블록스코프이기 때문에
같은 블록에서 선언된것만 취급한다.

대부분의 언어에서 블록스코프를 사용하고 있습니다.

정리

범위	var	let	const
선언	중복 O	중복 X	중복 X
호이스팅	O	O	O
스코프	함수레벨	블록레벨	블록레벨