[JS] var, let, const 차이점 3가지 : Scope, Hoisting, 변수 선언

목차

자바스크립트의 변수란?

프로그래밍에서의 변수는 값을 나타내는 문자나 문자들의 집합이며 실행 중인 컴퓨터 프로그램에서, 임의의 값을 저장한 메모리 주소에 대응합니다.

쉽게 얘기하면 변수(variable)는 하나의 값을 저장하기 위해 메모리 공간에 이름을 붙인 것을 의미합니다.

JS에서 사용하는 변수는 var, let, const 3가지가 있습니다.

이 3가지의 차이를 1. 변수 선언 방식 , 2. Scope 범위, 3. 호이스팅과 TDZ으로 나누어 알아보겠습니다.

js logo

 

변수 선언 방식

var

이전에 사용했던 변수 선언 방식으로 ES6 이후에는 추가된 let과 const가 추가되었습니다.

var는 한 번 선언한 후 다시 선언해도 에러가 발생되지 않습니다.

var myNum = 1
console.log(myNum) // 1

var myNum = 9
console.log(myNum) // 9

따라서 유연하게 코드를 작성할 수 있지만, 코드가 길어지면 이미 사용한 변수를 덮어버릴 수 있어서 잠재적 위험이 있습니다.

그래서 let과 const가 추가된 것이죠.

 

let

let은 var과 유사하게 변수를 선언하는 방식입니다.

하지만, 위에서 말한 var의 문제점을 해결해 재선언을 한 경우 SyntaxError를 발생시킴

let myNum = 1
console.log(myNum) // 1

let myNum = 9 // Uncaught SyntaxError: Identifier 'myNum' has already been declared

 

const

const 또한 변수를 선언하는 방식으로 let과 마찬가지로 중복 선언이 불가능합니다.

그리고 또 다른 특징으로는 재할당이 불가능합니다.

한 번 할당된 값을 다른 값으로 덮을 수 없는 것입니다.

const myNum = 1
console.log(myNum) // 1

const myNum = 9 //Uncaught TypeError: Assignment to constant variable.

따라서 const는 상수 값으로 변하지 않는 값을 선언할 때 주로 사용됩니다.

const PI = 3.14;
const MY_NUM = 88777788

PI 값은 const로 선언되었으므로, 값이 변하지 않는 값으로 사용하면 됩니다.

 

Scope Rules

var과 다르게 let과 const는 선언한 변수를 지역 스코프로 인정하는 블록 레벨 스코프를 따릅니다.

쉽게 애기하면 함수, if문, for문, 반복문 등을 코드 블록이라고 생각하면 됩니다.

if문 안에서 let과 const로 선언된 변수들은 해당 if문 안에서만 유효하다.라고 생각하면 됩니다.

흔히 말하는 지역 변수로 선언되는 것입니다.

if문 예시를 보겠습니다.

let a = 1

if (true) {
  let a = 5  
  console.log(a) // 5
}

console.log(a) // 1

if문 안에서의 a 값은 5 이지만, if문이 끝난 다음 밖에서는 다시 1이 출력되는 것을 확인할 수 있습니다.

 

function 예시를 보겠습니다.

function varTest() {
  var x = 1;
  {
    var x = 2;  // same variable!
    console.log(x);  // 2
  }
  console.log(x);  // 2
}

function letTest() {
  let x = 1;
  {
    let x = 2;  // different variable
    console.log(x);  // 2
  }
  console.log(x);  // 1
}

// 코드 출처 https://developer.mozilla.org/

 

Hoisting & Temporal dead zone(TDZ)

호이스팅이란 함수 내부에 있는 선언들을 모두 끌어올려 해당 함수 유효 범위의 최상단에 선언하는 것을 뜻합니다.

자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑는 과정에서 내부적으로 끌어올려 처리하는 것을 뜻하며 실제 메모리에서는 변화는 없습니다.

미리 선언문을 실행하는 것이라고 생각하면 되지만, 실재 값이 할당되기 전까지는 undefined값을 가집니다. 단지 Error만 안 난다 정도로 보면 됩니다.

내용 출처 : 팔만코딩경

var

/* 변수 호이스팅 */
console.log(a); // undefined -> 선언 전인데 Error 안남

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


foo(); // foo  -> function 선언 전인데 Error 안남

function foo() {
    console.log("foo");
}

변수가 선언 전이지만 에러가 발생하지 않는 것을 확인할 수 있습니다.

 

let, const

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

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

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

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

let과 const는 Error가 발생하는 것을 확인할 수 있습니다.

이 두 변수가 호이스팅이 발생하지 않은 것은 아닙니다.

let과 const는 변수 선언을 사전에 해두지만 초기화를 하지 않으므로 값을 참조할 수 없습니다. 따라서 동작을 할 수 없어 Error가 발생되는 것입니다.

var는 호이스팅으로 변수 선언 후 undefined로 초기화해두므로 Error가 발생하지 않는 것입니다.

function do_something() {
  console.log(bar); // undefined
  console.log(foo); // ReferenceError
  var bar = 1;
  let foo = 2;
}

 

 

지금까지 Javascript의 3가지 변수에 대해서 1. 선언 방식, 2. Scope, 3. Hoisting으로 나누어 차이점을 알아보았습니다.

이런 것도 되나 싶을 정도로 다양한 것들이 되는 자바스크립트이므로 이러한 변동적인 부분을 잘 알고 있어야 좋을 것 같네요.