var, let, const : 자바스크립트 변수 선언 3대장

자바스크립트를 배울 때 가장 먼저 접하게 되는 개념이 변수라는 개념이다.

변수는 말 그대로 '변할 수 있는 수'를 의미하는데

자바스크립트에서는 해당 변수에 다양한 값을 할당할 수 있고,

이러한 변수를 이용해서 다양한 기능도 구현할 수 있다.

 

자바스크립트에서 변수는 기본 중에 기본이 되는 개념인데,

이러한 변수를 선언할 때 3가지 방법이 있는데, 방법마다 명확한 차이가 존재하기에 이 점을 정리해 보고자 한다.

 

---

변수 선언 및 할당 방식

var a = 1;
let b = 2;
const c = "text";

변수는 선언 키워드를 작성하고 그 옆에 변수 이름을 작성한 뒤,

변수에 담을 값을 입력하는 방식으로 변수를 선언하고 값을 할당한다.

 

변수에는 어떠한 값이든 담길 수 있다.

현재 예시에서는 숫자와 문자를 할당했는데, 함수, 배열, 객체 등 다양한 값을 할당할 수 있다.

 

여기서 변수를 선언할 때 키워드로 3개의 키워드 (var, let, const)를 사용할 수 있는데 각 키워드마다 특징이 다르다.

 

var

var 키워드는 ES6 등장 이전 사용했던 변수 선언 키워드다.

var가 가지고 있는 특징으로는 재선언, 재할당이 가능하다는 점이다.

 

var a = 1;
var a = "text";
console.log(a) // "text"

a = 2;
console.log(a) // 2

이런 특징으로 변수를 유연하게 사용할 수 있다는 장점이 있지만,

오히려 그 유연함 때문에 수많은 버그를 발생시킬 수 있다는 커다란 단점이 있다.

 

지금은 짧은 코드기 때문에 쉽게 문제점을 발견할 수 있지만

다량의 코드가 작성된 상황에서 재선언과 재할당이 가능해진다면 디버깅에 굉장한 시간을 쏟게 된다.

 

function test() {
  if (true) {
    var x = 10;
  }
  console.log(x); // 10
}

test();

또 하나의 var의 특징으로는 함수 스코프를 따른다는 점이다.

그 말은 변수의 유효 범위가 함수 내로 제한된다는 의미인데

var의 경우 블록 스코프 ({ })를 무시하고 함수 내부에서 선언된 변수에 접근할 수 있다.

 

728x90

let

let 키워드는 var의 문제점을 보완하기 위해 ES6에서 등장한 개념이다.

let의 특징은 재할당이 가능하지만, 재선언은 불가능하다는 점이다.

 

let a = 1;
let a = 2;
console.log(a); // Uncaught SyntaxError: Identifier 'a' has already been declared

let b = 1;
b = "text";
console.log(b) // "text"

위의 예시에서 볼 수 있듯, a 변수 예시를 통해서 재선언이 불가능하다는 것을 볼 수 있고

b 변수 예시를 통해서 재할당이 가능한 점을 볼 수 있다.

 

function test() {
  if (true) {
    let message = "Hello, block!";
    console.log(message); // "Hello, block!"
  }
  console.log(message); // 오류 발생 - 블록 외부에서 message에 접근할 수 없음
}

test();

또 하나의 let의 특징으로는 블록 스코프를 따른다는 점이다.

var와 다르게 블록 ({ }) 안에서 선언된 변수에는 블록 밖에서 접근이 불가능하다.

 

const

const 키워드 역시 var의 문제점을 보완하기 위해 ES6에서 등장한 개념인데,

특징으로는 재선언, 재할당 모두 불가능하다는 점이다.

 

const a = 1;
const a = 2;
console.log(a); // Uncaught SyntaxError: Identifier 'a' has already been declared

const b = 3;
b = 'text';
console.log(b); // Uncaught TypeError: Assignment to constant variable

위의 예시를 통해서 const로 선언한 변수는 재선언, 재할당 모두 에러 메시지를 출력하는 것을 볼 수 있다.

이렇게 재선언, 재할당이 모두 불가능하기 때문에 변하지 않아야 하는 상수를 주로 할당한다.

 

const arr = ["a"];
arr.push("b");

console.log(arr) // ["a","b"]

변하지 않는 값이라고 얘기해서 const를 통해 할당된 모든 값이 변하지는 않는다.

배열이나 객체의 내부 값은 변경이 가능하다.

다시 말하면, 재할당이 불가능한 것이지 데이터 형태에 따라서 내부 값은 변경이 가능하다.

 

또 하나의 특징으로는 const 역시 블록 스코프를 따른다.

 

Summary

	재선언	재할당	스코프
var	O	O	함수 스코프
let	X	O	블록 스코프
const	X	X	블록 스코프

 

 

---

함께 읽으면 좋은 글 리스트

Scope : 변수, 너에게 닿을 수 있는 그 범위

실행 컨텍스트 : 자 이게 너가 사용할 수 있는 친구들이야

호이스팅 : 변수, 함수 끌어~ 올려!

 

포스팅 작성에 참고한 감사한 글들

F-Lab : 자바스크립트의 var, let, const 차이점과 호이스팅 이해하기

팔만코딩경 : var, let, const 차이점