[TIL] 자바스크립트의 변수 var, let, const 와 호이스팅

평소 공부를 하거나 회사에서 프로젝트를 진행할 때 항상 느꼈던 부분이 자바스크립트를 잘해야한다는 것이었는데 내가 제대로 알고 있는지 모르는지에 대해서 헷갈리는 부분들이 계속해서 나타난다. 그래서 끊임없이 공부를 하며 기본적인 것들이라도 다시 봐야한다는 것을 매번 느끼고 있는데 오늘 다시 봤던 부분이 변수와 변수 선언 방식인 var, let, const의 차이였다. 세가지 모두 변수를 선언할 때 사용하는데, var의 단점을 보완하기 위해 ES6부터 추가된 변수 선언 방식이 let과 const이다.

 

1. 변수란?

변수라는 것은 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 의미한다. 즉, 쉽게 말해 "하나의 값을 저장할 수 있는 저장공간"이라고 생각하면 될 것 같다.

 

여기서 변수는 하나의 값을 저장할 수 있다고 이야기했는데, 여러개의 값을 저장하고 싶다면 여러개의 변수를 사용하거나 배열 or 객체 등의 자료구조를 사용해 여러 값을 그룹화하여 지정할 수 있다.

// 각각의 변수를 만드는 방법
const userEmail = 'HelloWorld@email.com';
const userName = 'Minsu';

// 객체 형태로 묶기
const userData = { email: 'HelloWorld@email.com', name: 'Minsu' }; 

// 배열 형태로 묶기
const users = [
	{ email: 'HelloWorld1@email.com', name: 'Minsu' },
	{ email: 'HelloWorld2@email.com', name: 'Jin' }, 
	{ email: 'HelloWorld3@email.com', name: 'Sunny' }, 
];

 

2. 변수 선언

변수 선언이란 것은 변수를 생성하는 것을 말하는데 변수를 사용하려면 반드시 선언이 필요하다. 그래서 이 때 사용하는 것이 var, let, const이다. let과 const는 기존 var 키워드의 단점을 보완하기 위해 자바스크립트 ES6 부터 도입되었다.

• 자바스크립트에서 변수 선언은 선언단계 -> 초기화단계를 거쳐 수행된다.

- 선언단계 : 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알리는 과정
- 초기화 단계 : 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화하는 과정

 

1. var : 중복선언 가능, 재할당 가능

가장 먼저 var에 대해 알아보며 var 키워드가 어떤 단점을 가지고 있는지를 알아두면 let과 const를 보다 더 쉽게 이해할 수 있을 것이다.

var 키워드를 사용한 변수 선언은 선언 단계와 초기화 단계가 동시에 진행되는데 변수를 선언함과 동시에 이름을 등록하고 변수에 undefined를 할당해 초기화 하는 것이다. 그렇기 때문에 변수에 어떠한 값도 할당하지 않아도 undefined라는 값을 갖게된다.

또한 var의 경우에는 중복선언과 값의 재할당이 가능하여 혼란을 일으키기도 하는데 아래와 같이 값을 재할당할 수 있다.

// 변수선언과 값의 할당
var name = 'Minsu';
console.log(name); // Minsu

// 중복 선언 가능
var name = 'Loy';
console.log(name); // Loy

// 값의 재할당
name = 'Lia'
console.log(name); // Lia

 

[var 키워드의 문제점] -> let과 const 도입

• 변수의 중복선언이 가능하며, 예상치 못한 값을 반환할 수 있다.
• 변수 선언문 이전에 변수를 참조하면 언제나 undefined를 반환한다.
• 블록레벨 스코프를 지원하지 않고 함수 레벨 스코프를 지원해 함수 외부에서 선언한 변수는 모두 전역 변수로 처리된다.

 

2.  let : 중복 선언 불가능, 재할당 가능

let 키워드는 변수의 중복 선언이 불가능하지만 재할당은 가능하다.

let name = 'Minsu';
console.log(name); // Minsu

// 중복선언 불가능
let name = 'Lia';
console.log(name); // Uncaught SyntaxError: Identifier 'name' has already been declared

// 재할당 가능
name = 'Emaily';
console.log(name); // Emaily

 

3. const : 중복 선언 불가능, 재할당 불가능

const는 중복선언과 재할당 모두 불가능하다.

let name = 'Minsu';
console.log(name); // Minsu

// 중복선언 불가능
let name = 'Lia';
console.log(name); // Uncaught SyntaxError: Identifier 'name' has already been declared

// 재할당 불가능
name = 'Emaily';
console.log(name); // Uncaught TypeError: Assignment to constant variable.

3. 변수의 호이스팅

호이스팅이라는 것은 var 선언문이나 함수 선언문 등을 해당 스코프의 선두로 옮긴 것처럼 동작하는 특성을 의미한다. 자바스크립트 ES6에서 도입된 let, const는 물론이고 var, function, class 등의 키워드를 사용해서 선언하는 모든 식별자는 호이스팅된다.

 

가장 먼저 var를 사용한 변수 선언의 예시를 살펴보면 아래와 같다. var는 변수 선언과 초기화 단계가 한번에 이루어지기 때문에 변수 선언문 이전에 변수를 참조할 수 있게 된다.

// 선언 단계 실행 O, 초기화단계 실행 O
console.log(name); // undefined
var name;

 

반면에 let을 사용한 변수 선언은 조금 다르게 실행된다. let으로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행된다. 그렇기 때문에 변수 선언문 이전에 변수를 참조할 수 없는 것이다.

// 선언 단계 실행 O, 초기화단계 실행 X
console.log(score); // Uncaught ReferenceError: score is not defined

let score; // 변수 선언문에서 초기화 단계 실행 O
console.log(score); // undefined

 

 

4. 그렇다면 어떤 변수 선언 방식을 사용할까?

var의 여러가지 문제를 해결하기 위해 let과 const가 도입되었으며, 변수 선언에 기본적으로 const를 사용하고, 재할당이 필요한 경우에만 let을 사용하는 것이 예상치 못한 에러를 줄일 수 있는 방법인 것 같다.

• 재할당이 필요한 경우에는 let, 그렇지 않은 경우엔 되도록 const 사용!!

 

자바스크립트 기초문법 - 변수, 리스트, 딕셔너리