[JavaScript] var, let, const

---

1. 변수란?

1) 정의

• 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름
• 기억하고 싶은 데이터 값을 메모리에 저장하고, 저장된 데이터 값을 재사용하기 위해 사용
• 식별자: 변수의 이름을 '식별자(identifier)'라고도 하는데, 식별자는 값 자체가 아닌 값을 저장하고 있는 메모리 주소를 기억한다. 식별자는 변수명에 국한된 개념이 아니고, 변수, 함수, 클래스 등의 이름은 모두 식별자라고 할 수 있다.

 

2) 변수의 생성 3단계 - 선언, 초기화, 할당

(1) 변수 선언

• 변수 선언이란 변수를 생성하는 것, 즉 값을 저장하기 위해 메모리 공간을 확보하고 변수명과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있도록 준비하는 것을 말한다.
• 변수를 선언할 때는 var, let, const 키워드를 사용한다.

var number // console.log(number) = undefined
let i
const result

 

(2) 변수 초기화

변수 객체에 등록된 변수를 메모리에 할당한다. 이 단계에서 변수는 undefined로 초기화된다.

 

(3) 값의 할당

• 변수에 값을 저장하는 것을 말한다.
• 변수에 값을 할당할 때는 할당 연산자 '='를 사용하고, 할당 연산자는 우변의 값을 좌변의 변수에 할당한다.

let score; // 변수 선언
score = 100; // 값의 할당

let score = 100; // 변수 선언과 값의 할당을 하나의 문으로 표현

• 여기서 유의할 점은, 변수 선언과 값의 할당의 실행 시점이 다르다는 것이다. 변수 선언은 런타임 이전에 먼저 실행되지만, 값의 할당은 런타임에 실행된다.

자세한 것은 3. 변수 호이스팅 참고

 

3) 값의 재할당, 변수 참조

(1) 값의 재할당

• 값의 재할당이란 이미 값이 할당되어 있는 변수에 새로운 값을 또 다시 할당하는 것을 말한다.
• var, let으로 선언한 변수는 값을 재할당할 수 있지만, const로 선언된 변수는 재할당이 불가능하다.

let score = 100;
score = 90; // 값의 재할당

 

(2) 변수 참조

• 변수 참조란 변수에 저장된 값을 읽어들이는 것을 말한다.

const number = 10
number // 10, 변수 참조

 

 

---

2. var, let, const

1) var vs. let vs. const

• var는 ES5까지 변수를 선언할 수 있는 유일한 방법이었으나, ES6에서 let과 const으로 변수를 선언할 수 있게되었다.
• var로 선언된 변수는 재할당과 중복 선언이 모두 가능해서, 동일한 이름의 변수가 선언되어 있는 것을 모르고 중복된 이름으로 선언하더라도 에러가 발생하지 않아 오류를 발생할 가능성이 높다.
• 따라서 var를 사용하는 대신 let과 const를 사용한다. (var 사용이 불가능한 것은 아님)
• 변수 선언에는 기본적으로 const를 사용하고, 재할당이 필요한 경우에만 한정하여 let을 사용한다.

 

2) 재할당 및 중복선언 여부

• var : 재할당 가능, 중복선언 가능
• let : 재할당 가능, 중복선언 불가능
• const : 재할당 불가능, 중복선언 불가능

변화하지 않는 변수를 선언할 때는 let 대신 const를 사용한다. const로 선언한 변수를 '상수(constant)'라고 하고, 상수는 재할당할 수 없으므로 상수를 변경하려고 하면 에러가 발생한다.

 

3)  스코프

• 스코프란 식별자의 유효범위(접근할 수 있는 범위)를 의미한다.
• var : 함수 레벨 스코프
• let, const : 블록 레벨 스코프

출처 https://blog.devgenius.io/understanding-scope-in-javascript-f88e946636ac

- 함수 레벨 스코프 : 함수를 선언할 때마다 새로운 스코프를 생성하며, 함수 내에서 선언한 변수는 그 함수 내에서만 유효하고, 함수 외부에서는 참조할 수 없음
- 블록 레벨 스코프 : 코드 블록(함수, if문, for문, while문 등) 내에서 선언된 변수는 그 코드 블록 내에서만 유효하며, 코드 블록 외부에서는 참조할 수 없음

 

4) 호이스팅(hositing)

• 호이스팅이란, 모든 선언문이 해당 스코프의 맨 위로 끌어 올려진 것처럼 동작하는 특성을 의미한다.
• var, let, const와 같은 변수뿐만 아니라 function, class 키워드를 사용하여 선언하는 모든 식별자(변수, 함수, 클래스 등)는 호이스팅 된다.
• 단, let과 const는 var와 달리 호이스팅 시 undefined로 변수를 초기화하지는 않는다. 따라서 변수의 초기화를 수행하기 전에 읽는 코드가 먼저 나타나면 예외가 발생한다.

// 예제 1
// y만 호이스팅 대상

x = 1; // x 초기화. x를 선언하지 않은 경우 선언. 그러나 명령문에 var가 없으므로 호이스팅이 발생하지 않음
console.log(x + " " + y); // '1 undefined'
// JavaScript는 선언만 호이스팅하므로, 윗줄의 y는 undefined
var y = 2; // y를 선언하고 초기화


// 예제 2
// 호이스팅은 없지만, 변수 초기화는 (아직 하지 않은 경우) 변수 선언까지 병행하므로 변수를 사용할 수 있음

a = '크랜'; // a 초기화
b = '베리'; // b 초기화

console.log(a + "" + b); // '크랜베리'

 

다음은 함수의 예시이다.

// 일반적인 코드 작성 순서

function catName(name) {
	console.log(`제 고양이의 이름은 ${name}입니다.`)
 }
 
 catName("호랑이");
 // "제 고양이의 이름은 호랑이입니다."

// 호이스팅 예시

catName("나비");

function catName(name) {
	console.log(`제 고양이의 이름은 ${name}입니다.`);
}
// "제 고양이의 이름은 나비입니다."

• '나비'의 경우 함수 호출이 함수 자체보다 먼저 작성되었음에도 불구하고, 정상적으로 console.log가 출력되는 것을 볼 수 있다.

 

5) var, let const 비교 정리

 

 

---

참고자료

「모던 자바스크립트 Deep Dive」, 이웅모, 위키북스

mdn web docs | 호이스팅