var, let, const 각각의 차이점

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

자바스크립트에서 변수를 선언할 때 사용하는 var let const 각각의 차이점은 무엇일까요?

차이점

가장 큰 차이는 var의 경우 function-scoped let과 const는 block-scoped라는 것입니다. 스코프에 대해 설명하기 전, var가 갖고 있는 문제에 대해 먼저 알아보겠습니다.

변수 선언 방식

우선, var의 경우 변수 선언에 있어서 혼란을 야기할 수 있는 부분이 존재합니다.

var age = 10;
console.log(age); // 10

var age = 20;
console.log(age); // 20

위 코드에서 같은 이름의 변수를 한 번 더 선언했음에도 에러가 발생하지 않고 정상적으로 출력되는 것을 확인할 수 있습니다.

이는 변수 선언에 대해 중복 변수명에 대한 제약이 없어 테스트에 편리할 수 있으나, 코드가 복잡해지면 새로 작성한 변수의 이름이 기존 변수와 동일해서 기존 변수에 덮어씌워지는 문제가 생길 수도 있습니다.

그렇다면 그 이후 나온 let과 const의 경우에는 위 문제가 해결되었을까요?

let age = 10;
console.log(age); // 10

let age = 20; // error

위 코드는 아래 age 변수 선언식에서 에러가 발생합니다. 이는 const도 동일하며, 사용자로 하여금 실수를 유발시킬 수 있는 var의 변수명 재사용이 더이상 불가능해졌음을 알 수 있습니다. 그렇다면 let과 const의 차이는 무엇일까요? 이 둘의 차이는 값이 불변한지에 대한 여부입니다.

let의 경우에는 이미 선언한 변수에 값을 다시 할당할 수 있습니다.

let age = 10;
age = 20;
age = 30;

그렇지만 const의 경우, 이미 선언한 변수에 값을 다시 할당할 수 없습니다.

const age = 10;
age = 20; // error

호이스팅

호이스팅이란 함수 안에 있는 선언을 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 의미합니다.

호이스팅에 대해서는 포스트 하나 분량의 게시글을 작성할 수 있어서 별도로 작성하도록 하고, 해당 게시글에서는 간단히 알아보도록 하겠습니다.

console.log("Hello, World");
var varVariable = "one";
let letVariable = "two";

위 코드는 아래와 같이 해석됩니다.

var varVariable;

console.log("Hello, World");
varVariable = "one";
let letVariable = "two";

여기에서 우리는 한 가지를 알 수 있습니다. var로 선언한 변수의 경우 호이스팅이 발생해 최상위로 변수 선언이 옮겨졌지만, let의 경우에는 호이스팅이 발생하지 않았습니다.

var로 코드를 작성하는 경우 호이스팅이 발생해서 같은 이름의 변수나 함수로 값이 변질될 수 있습니다. 호이스팅이 자주 일어나는 코드의 경우 유지보수가 어려워지며, 쓸모없는 코드가 생길 수 있습니다.

스코프

자바스크립트를 공부하면서 스코프라는 말을 자주 접할 수 있습니다. 이 스코프에 대해 알아보도록 하겠습니다.

스코프는 범위라는 뜻을 갖고 있습니다. 즉, 변수에 접근할 수 있는 범위를 의미하며, 전역 스코프(global scope)와 지역 스코프(local scope)가 있습니다.

전역 스코프(Global Scope)

브라우저를 기준으로 변수가 함수 바깥이나 중괄호 바깥에 선언되었다면 전역 스코프에 정의된다고 볼 수 있습니다. Node.js의 경우 전역 스코프에 대해 다르게 정의합니다.

전역 스코프에 정의된 변수를 전역 변수라고도 이야기 합니다. 전역 변수를 선언하면 코드 모든 곳에서 해당 변수를 사용할 수 있습니다.

var msg = 'Hello World!';

function printMsg () {
  console.log(msg);
}

printMsg();
console.log(msg);

위 코드의 실행 결과를 보면 'Hello World!' 텍스트가 두 번 노출되는 것을 확인할 수 있습니다.

var을 사용해서 전역 변수를 선언할 경우, 변수가 덮어씌워지는 현상이 발생할 수 있어서 사용에 주의가 필요합니다.

지역 스코프(Local Scope)

전역 스코프와는 다르게 특정 부분에서만 사용 가능한 변수는 지역 스코프 내에 포함되어 있다고 할 수 있습니다. 이런 변수를 지역 변수라 칭합니다.

자바스크립트에는 함수 스코프(function scope)와 블록 스코프(block scope) 두 개의 지역 스코프가 존재합니다.

다른 언어(C와 Java 등)을 접해본 경험이 있다면 블록 스코프가 익숙할 것입니다. 여기서 말하는 블록은 {...}을 의미하며, 이 블록을 벗어난다면 블록 내부에 선언된 변수를 참조할 수 없습니다.

{
  let age = 10;
}

console.log(age); // error

위 코드는 let을 사용해 블록 안에 age 변수를 선언했으며, 블록 밖에서 age 변수에 접근하려 할 때 에러가 발생한 것을 확인할 수 있습니다.

하지만 var의 경우에는 다릅니다.

{
  var age = 10;
}

console.log(age); // 10

위 코드는 var을 사용해 블록 안에 age 변수를 선언했으며, 블록 밖에서 age 변수에 접근이 가능합니다. 이는 곧 var는 블록 스코프를 가지지 않는다는 말이 됩니다.

함수 스코프(function scope)

function printAge() {
  if (true) {
    var age = 10;
  }

  console.log(age);
}

printAge(); // 10 console.log(age); // error

위 코드에서 if 문 안에 선언한 age 변수를 if 문 밖에서 가져올 수 있습니다. 이는 var로 선언한 변수는 선언된 함수의 내부 어느 곳에서라도 접근이 가능하기 때문입니다. 위 코드가 만약 블록 스코프를 가졌다면 if 문 블록 내에서만 age 변수에 접근할 수 있으므로 printAge 함수 내부의 console.log에서 에러가 발생했을 것입니다.

블록 스코프(Block Scope)

블록 스코프는 if 문 for 문의 블록 내부에서 선언한 변수는 블록 외부에서 사용할 수 없습니다.

정리

1. var로 선언한 변수는 선언하기만 한다면 선언 전에 사용할 수 있다.
2. var는 같은 이름으로 중복 선언할 수 있다.
3. var은 함수 레벨 스코프 let과 const는 블록 레벨 스코프
4. const의 경우 값을 수정할 수 없어 반드시 선언하는 동시에 초기화를 해야한다.