#var #let #const #변수 #차이점 #ES6 #스코프 #호이스팅

⚡var

var로 선언한 변수는 동일한 이름으로 여러번 중복 선언이 가능하며 마지막에 할당된 값이 변수에 저장된다. 

변수를 유연하게 사용할 수 있다는 장점이 될수 있지만 기존 선언된 내역을 망각하여 재 선언을 하여 값이 다르게 출력될수 있는 케이스가 발생할수 있다. 

var lanType = 'javascript';
console.log(lanType);					// javascript

var lanType = 'java';
console.log(lanType);					// java

------------------------------------------------------------------------------------

var str = "mrbang";
    
function newFunction() {
	var typeStr = "hello";    
}

console.log(typeStr);					// error: typeStr is not defined

⚡let (중복 선언 불가능, 재할당 가능)

var과 다르게 let은 해당 변수가 이미 선언되었다는 메시지를 출력됨에 따라 중복선언이 불가능함을 알수 있다. 

langType = 'vue'; 라고 재할당은 가능한 부분을 알수있다. 

let lanType = 'javascript';
console.log(lanType);					// javascript

let lanType = 'java';
console.log(lanType);					
// Uncaught SyntaxError: Identifier 'lanType' has already been declared


lanType = 'vue';
console.log(lanType);					// vue

⚡const(중복 선언 불가능, 재할당 불가능)

const lanType = 'javascript';
console.log(lanType);					// javascript

const lanType = 'java';
console.log(lanType);					
// Uncaught SyntaxError: Identifier 'name' has already been declared

lanType = 'vue';
console.log(lanType);					
// Uncaught TypeError: Assignment to constant variable

const는 constant(상수)를 뜻하기에 한번 선언만 가능하고 값 변경이 불가합니다. 하지만 배열과 오브젝트에서는 값의 변경이 가능합니다. 

function constFunction() {
	const conList = ["A", "B", "C"]

    conList = "D";
    console.log(conList);
    // TypeError: Assignment to constant variable

    conList.push("D");
    console.log(conList);				// ["A", "B", "C", "D"]
}

 

⚡스코프(Scope) - 스코프란 유효한 참조 범위를 뜻하며, 기존의 방법인 var로 선언한 변수와 let & const로 선언한 변수의 스코프는 다르다.

🌱var : 함수레발 스코프(function-level scope)

함수 내에 선언된 변수는 함수내에서만 유효하며 함수 외부에서 참조 불가, 즉 함수 내부에서 선언한 변수는 지역변수 이고함수 외부에서 선언한 변수는 모두 전역변수로 취급

function letFunction() {
	if (true) {
    	var a = 5;
		console.log(a);							// 5
    }
    console.log(a);								// 5
}

letFunction();									// 5
console.log(a); // ReferenceError: a is not defined

 

🌱let, const : 블록 레벨 스코프(block-level scope)

함수 if, for, while, try/catch등의 모든 코드블록 내부에 선언된 변수는 코드블록 내에서만 유효하며 코드블록 외부에서 참조 불가!!!! 즉, 코드블록 내부에 선언한 변수는 지역 변수로 취급 

function letconstFunction() {
	if (true) {
    	let a = 5;
		console.log(a);					// 5
    }
	console.log(a);						// ReferenceError: a is not defined
}

console.log(a);							// ReferenceError: a is not defined

 

⚡호이스팅(Hoisting)

🌱호이스팅이란 함수 내부에 있는 선언들을 모두 끌어 올려 해당 함수 유효 범위의 최상단에 선언하는 것을 말하며 실제로 코드가 올라가지는 것이 아닌 자바스크립트 Parser가 함수 실행 전 해당 함수를 한번 확인 하는 과정에서 내부적으로 끓어올리는 걸 말하며 실제 메보리에서 변화는 없습니다. 

 

🌱var 함수 선언문 : 호이스팅 발생함 

/* 변수 호이스팅 */
console.log(hoistingStr); // undefined

var hoistingStr = 5;
console.log(hoistingStr); // 5

// 변수 hoistingStr가 선언되기 전에 참조되었음에도 에러 미발생, 이는 코드 실행 전 자바스크립트 
내부에서 미리 변수를 선언하고 undefined로 초기화를 하기때문에 에러 미발생

 

🌱let, const 함수표현식 : 호이스팅이 발생하지만, 다른 방식으로 작동

/* 변수 호이스팅 */
console.log(hoistingStr); // ReferenceError: hoistingStr is not defined

let hoistingStr = 5;
console.log(hoistingStr); // 5

/* 함수 호이스팅 */
hoistingFunction(); // error

var hoistingFunction = function() {
	console.log("hoistingFunction");
}

// 변수 hoistingStr이 선언되기 전 참조하니 에러 발생 이는 호이스팅이 발생한것이 아닌 
변수의 선언과 초기화 사이에 일시적으로 변수 값을 참조할 수 없는 TDZ(Temporal Dead Zone)구간에
빠졌기 때문에 미출력

// 함수표현식을 사용하거나 let, const로 변수를 선언하는 경우 자바스크립트 내부에서 코드 실행 전 
변수 선언만 해둘분 초기화 코드는 실행과정에서 변수 선언문을 만날때 수행하게 된다. 

이에 다라 호이스팅이 발생하기는 하지만 값을 참조할 수 없기 때문에 동작하지 않는 것처럼 보임

 

	let	const	var
유효범위	Block Scope	Block Scope	Function Scope
값 재정의	🙆	❌	🙆
재선언	❌	❌	🙆