[JavaScript] var let const 차이점

자바스크립트의 변수 선언 방식인 var let const 의 차이점

• var : 중복 선언 가능, 재할당 가능
• let : 중복 선언 불가능, 재할당 가능
• const : 중복 선언 불가능, 재할당 불가능

변수 선언 방식

var

선언한 변수와 동일한 변수명으로 중복 선언이 가능하다. 즉, 마지막에 할당된 값이 최종 변수에 저장된다.

간단한 테스트에는 편리할 수 있으나, 길고 복잡한 코드에서 같은 이름의 변수가 여러번 선언되어 사용되면 어떤 부분에서 값이 변경되고 문제가 발생하는지 파악하기 힘들다.

이를 보완하기 위해 ES6부터 추가된 변수선언 방식인 let과 const가 등장했다.

/* 중복 선언 가능, 재할당 가능 */
var title = "one";
var title = "two";
title = "three";

let

/* 중복 선언 불가능, 재할당 가능 */
let title = "one";
let title = "two"; // error
title = "three";

console.log(title); // three

const

변하지 않는 값(상수)을 변수로 선언할 때 사용

/* 중복 선언 불가능, 재할당 불가능 */
const title = "one";
const title = "two"; // error
title = "three"; //error

console.log(title); // one

---

scope

유효한 참조 범위가 다르다

var

• 함수 스코프 (function scope) : 함수 내에서 선언된 변수는 함수 내에서만 유효
• if절, for, while, try/catch 등의 코드블록 { ... } 내부에서 선언된 변수는 내외부 관계없이 유효하다.

function function_scope() {
    if(true) {
      var a = "hello";
    }
  console.log(a); // hello
}

console.log(a); // error

let / const

• 블록 스코프(block scope) : 함수를 포함한 모든 코드블록 { ... } 내부에서 선언된 변수는 코드 블록 내부에서만 유효하다

function function_scope() {
    if(true) {
      let a = "hello";
    }
  console.log(a); // error
}

console.log(a); // error

 

---

호이스팅

호이스팅(Hoisting)이란, 함수 실행 전 함수 내 존재하는 변수, 함수 선언에 대한 정보들을 모아 해당 scope의 최상단에 선언한 것처럼 동작하는 특성을 말한다.

 

 ✅  var 선언문 호이스팅

console.log(a); // undefined 

var a = "hello"
console.log(a); // hello

var 변수 a가 선언되기 전에 참조시, error가 발생하지 않고 undefined가 출력된다. 이는 코드 실행 전 미리 a 변수를 선언하여 undefined로 초기화를 해두었기 때문이다.

 

✅ 함수선언문 호이스팅

func();    // hello

function func() {
  console.log("hello");
}

함수 선언 전 호출 시 hello를 출력한다

 

✅ let / const 호이스팅 ➜  TDZ 

console.log(a); // error

let a = "hello";
console.log(1); // hello

let 의 경우 변수 a가 선언되기 전 참조 시, error가 발생한다. var 은 변수선언과 동시에 초기화가 이뤄지지만, let, const 변수는 선언만 할 뿐 초기화는 하지않고 변수 선언문을 만났을 때, 초기화를 수행한다. 때문에 호이스팅은 발생하나 변수의 선언과 초기화 사이 일시적으로 변수값을 참조할 수 없는 구간인 TDZ(Temporal Dead Zone)에 빠지게 된다.

 

✅ 함수표현문 호이스팅 ➜  TDZ 

func(); // error

var func = function() {
    console.log("hello");
}
func(); // hello

함수선언문이 아닌 함수표현식에서 마찬가지의 이유로 error가 발생한다.

[Javascript] 함수 작성 방법 3가지