[JavaScript] var, let, const 의 차이점

var 키워드

Scope of var : var 키워드의 범위

범위는 기본적으로 변수를 사용할 수 있는 위치 의미

var 선언은 전역 범위 혹은 함수 범위로 지정

 

 

var 변수가 함수 외부 선언 => 범위는 전역 (전체 윈도우 상)

var 변수가 함수 내부 선언 => 범위는 함수 블록 내부

 

 

var hello = 'a';

function person() {
	var world = 'b';
}

console.log(world); //  world is not defined 
console.log(hello); //  hello

 

 

var의 호이스팅

호이스팅이란 변수와 함수 선언이 맨 위로 이동되는 자바스크립트 매커니즘

= 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것

 

 

    console.log (greeter); // <- 호이스팅 대상, 값은 undefined
    var greeter = "say hello"

 

 

var로 선언한 변수의 경우 호이스팅 시 undefined로 변수 초기

var 키워드로 선언된 변수는 선언 단계와 초기화 단계가 한 번에 이뤄진다

 

 

 

 

 

var의 문제점(취약점)

아래 코드를 확인해 보면, 의도적으로 변수 hello를 재정의를 했다면 상관없겠지만 그렇지 않다면, 문제가 될 수 있다.

뜻밖의 결과와 많은 버그를 발생시킬 수 있기 때문이다. 이런 문제를 개선한 키워드가 다음에 나오는 let, const 키워드이다.

var hello = 'world';
var time = 4;

if (time > 3) {
	var hello = 'banana';
}

console.log(hello); // "banana"

 

 

 

 

 

 

 

let 키워드

블록은 { }로 바인딩된 코드 청크이다. 하나의 블록은 중괄호에서 존재하며, 중괄호 안에 있는 것은 모두 블록 범위이다.

아래 코드에서, 블록 안에서 선언된 fruit 변수를 블록 밖에서 조회했을 경우, 에러가 발생한다는 것을 알 수 있다.

 

let hello = 'world';
var time = 4;

if (time > 3) {
	let fruit = 'banana';
}

console.log(fruit); // fruit is not defined

 

 

 

이번 예시의 경우는 어떨까 다시 확인해 보자.

예시의 두 번의 변수 hello 출력은 에러가 나질 않는다. 

왜냐하면,  블록 내에 있는 hello와 전역에 있는 hello가 서로 다른 범위를 가지므로 서로 다른 변수로 취급되기 때문이다.

let hello = 'world';
var time = 4;

if (time > 3) {
	let hello = 'banana';
	console.log(hello); // "banana"
}

console.log(hello); // "world"

 

 

 

let의 호이스팅

var와 같이 let 선언은 맨 위로 끌어올려집니다만, undefined로 초기화되지 않는다. 

만약, 호출하려고 하면 ReferenceError가 발생한다.

 

 

 

 

 

const 키워드

const로 선언된 변수는 일정한 상수값 유지한다. let 선언처럼 const선언도 선언된 블록 범위 내에서만 접근 가능하다.

또한, 상수인 관계로 값을 재할당, 재선언이 불가하다. 

 

const greeting = "say Hi";
const greeting = "say Hello instead";// error: Identifier 'greeting' has already been declared

 

 

예외인 경우도 존재한다. 

const 개체 업데이트는 안 되지만, 개체의 속성은 업데이트할 수 있다.

const greeting = {
	message: 'hello',
    time: 4
}

 

1) const 개체 업데이트

    greeting = {
        words: "Hello",
        number: "five"
    } // error:  Assignment to constant variable.

 

 

2) const 개체 속성 업데이트

    greeting.message = "say Hello instead";

 

 

 

 

 

 

const의 호이스팅

const 선언도 맨 위로 끌어올려지지만, 초기화되지 않는다.

 

 

 

 

 

참고하면 도움이 되는 내용

[JavaScript] TDZ(Temporal Dead Zone)이란?

 

[JavaScript] 호이스팅(Hoisting)이란? - 호이스팅이란

 

 

 

 

 

[정리] 세 가지 변수 선언법의 차이점

var 선언은 전역 범위 또는 함수 범위이며, let과 const는 블록 범위이다.

var 변수는 범위 내에서 업데이트 및 재선언할 수 있다.
let 변수는 업데이트할 수 있지만, 재선언은 할 수 없다.
const 변수는 업데이트와 재선언 둘 다 불가능하다.

세 가지 모두 최상위로 호이스팅 된다. var 변수만 undefined으로 초기화되고 let과 const 변수는 초기화되지 않는다.

var와 let은 초기화하지 않은 상태에서 선언할 수 있지만, const는 선언 중에 초기화해야 한다.

 

 

 

 

 

참고

https://www.freecodecamp.org/korean/news/var-let-constyi-caijeomeun/