const, let, var가 뭘까? 어떻게 다를까?

우리는 자바스크립트에서 const, let, var를 사용하여 변수를 선언한다. 그렇다면 이 세가지 구문의 차이점은 무엇일까?

var은 변수 선언 방식에서 큰 단점이 있고,
const와 let은 ES6 이후 이를 보완하기 위해 추가된 변수 선언 방식이다.

👉 차이점 요약

var: 재선언ㅇ, 재할당ㅇ, function-scoped
let: 재선언x, 재할당ㅇ, block-scoped
const: 재선언x, 재할당x, block-scoped

---

1️⃣ var, let

ES6(ES2015)전에는 var가 유일한 변수 선언 방식이였다.
하지만 var의 두가지 특징이 다음과 같은 문제점을 가져온다.

1) var은 재선언이 가능하다

var language = 'javascript'
console.log(language) // javascript

var language = 'react'
console.log(language) // react

변수를 다시 선언해도 에러가 나지 않는 것을 확인할 수 있다.

이는 코드량이 많아지면 이전에 선언된 변수를 잘못 재선언하는 경우임에도 오류를 발견하기 어려워지는 문제점이 있다.

반면, 이러한 문제점을 개선하고자 let은 var와 달리 재선언이 불가능하다.

let language = 'javascript'
console.log(language) // javascript

let language = 'react'
console.log(language)
// Uncaught SyntaxError: Identifier 'name' has already been declared

2) var은 블록이 아닌 함수 범위(function-scoped)이다.

지역범위가 블록단위인 c, c++와 같은 대부분의 언어와 달리 var는 함수범위이기 때문에 프로그래밍 시 혼동을 줄 수 있다.

function hi(){
  for(var i = 0; i < 5 ;i++){
    console.log(i) // 1, 2, 3, 4
    if(true){
      var color = "red"
    }
  }
  console.log(i) // 5
  console.log(color) // red
}

console.log(i) // error
console.log(color) // error

위 예제의 경우도 i변수는 for문, color 변수는 if문 밖에서는 접근될 수 없어야 하지만, var를 사용한 경우 이 변수들에 접근할 수 있다는 문제점이 있다.

let은 함수가 아닌 블록 범위이기 때문에 이 경우 아래와 같이 ReferenceError를 출력한다.

function hi(){
  for(let i = 0; i < 5 ;i++){
    console.log(i) // 1, 2, 3, 4
    if(true){
      let color = "red"
    }
  }
  console.log(i) // ReferenceError
  console.log(color) // ReferenceError
}

같은 블록 안, 재선언은 불가능, 재할당은 가능

---

2️⃣ const

const가 var와 let와 다른 점은 여러번 재할당 될 수 있는 var, let과 달리 const는 한번만 할당될 수 있는 상수라는 것이다.

var language = 'javascript'
let language2 = 'react'
const language3 = 'react-native'
const temp;
// Uncaught SyntaxError: Missing initializer in const declaration

language = 'javascript'
language2 = 'react'
language3 = 'react-native'
// Uncaught TypeError: Assignment to constant variable.

따라서 const는 초기값이 없는 경우와 재할당이 되는 경우 에러가 발생한다.

---

Refs

var, let, const 차이점

---

호이스팅(hoisting)이 뭘까?

호이스팅(Hoisting)이란, 코드가 실행되기 전에 var 선언문이나 function 선언문 등이 해당 스코프의 선두로 옮겨진 것처럼 동작하는 특성을 말한다.

함수 호이스팅이 발생하는 원인은 자바스크립트의 변수 생성(Instantiation)과 초기화(Initialization)의 작업이 분리돼서 진행되기 때문이다.

자바스크립트는 ES6에서 도입된 let, const를 포함하여 모든 선언(var, let, const, function, function*, class)을 호이스팅한다.

👉 undefined vs ReferenceError

// test1.js
console.log(a) // undeined
console.log(b) // undeined
var a = "Hello"
var b = "world"

// test2.js
console.log(a) // ReferenceError

호이스팅에 대해 알아보기 전 undefined와 ReferenceError의 차이점은 무엇일까?

• undefined: 아직 값이 할당되지 않고 선언만 된 변수의 값, 선언되지 않은 변수의 타입과 값
• ReferenceError: 이전에 선언되지 않은 변수에 접근하려 할 때 발생

그렇다면 test1의 경우, a와 b가 ReferenceError를 발생하지 않았으므로 a,b가 이미 선언되었다는 뜻인데 어떻게 된 것일까??

var의 호이스팅

우리는 보통 var a = 10 이와 같이 변수를 선언한다. 하지만 그 뒷면에서 javascript는 모든 변수와 함수를 호이스팅하고 있다.

따라서 test1의 경우에서 에러가 발생하지 않았던 것이다!
즉, test1의 코드는 다음과 같은 방식으로 동작한다.
(초기화가 아닌 선언만 끌어올림)

var a;
var b;
console.log(a) // undeined
console.log(b) // undeined
a = "Hello"
b = "world"

---

• 하지만 let과 const는 호이스팅 되지만 오류를 발생한다.

carName = "Volvo";
let carName;

var로 선언된 변수와 달리 let으로 선언된 변수는 선언될 때까지 사용하는 것은 불가능하므로, 선언문 이전에 참조하면 ReferenceError가 발생한다.

carName = "Volvo";
const carName;

const선언되기 전에 변수를 사용하는 것은 구문 오류이므로 코드가 실행되지 않는다.

---

function의 호이스팅

sayHello(); // Output: 'Hello'

function sayHello() {
  console.log('Hello');
};

자바스크립트에서는 컴파일 단계에서 호이스팅된 변수와 함수들을 모두 메모리에 저장한다. 따라서 함수의 경우도 var와 같이 맨위로 선언이 되므로 위 코드에서 sayHello는 아래 선언된 함수를 실행하여 'Hello'를 출력한다.

하지만 이러한 이유(함수를 모두 메모리에 저장하므로 메모리가 낭비 됨)로 자바스크립트 전문가들은 함수 생성에 있어서 함수 선언식(Function declarations)보다 호이스팅에 영향을 받지 않는함수 표현식(Function expressions)만을 사용할 것을 권장하고 있다.

함수표현식을 이용하여 위 코드를 다시 작성해보자.

sayHello(); // Uncaught TypeError: sayHello is not a function

var sayHello = function() {
  console.log('Hello');
};

이 경우 var = sayHello만 상단부로 호이스팅이 되므로 실질적인 함수 내용은 메모리에 저장되지 않아 메모리 낭비를 줄인다. 이렇게 함수 표현식으로 함수를 작성할 경우 sayHello()는 undefined()로 TypeError를 발생시키기 때문에 반드시 함수를 정의한 다음에 사용해야 한다.

---

Refs

Understanding Hoisting in JavaScript

18: Hoisting in JavaScript Explained | What is Hoisting in JavaScript | JavaScript Tutorial

Hoisting in JavaScript Explained in (About) 5 Minutes