자바스크립트의 변수 선언법: let, var, const

최건우·2023년 1월 31일

JavaScript

자바스크립트

목록 보기

3/3

var

변수를 선언하고, 선택적으로 초기화할 수 있다.
재선언: 가능
재할당: 가능
변수는 어디에 선언되어있든 간에, 어떠한 코드가 실행되기 전에 처리된다. 이는 코드 안에서 어디서든 변수 선언은 최상위에 선언된 것과 동등하다. 이는 호이스팅(hoisting) 문제를 야기한다.
변수의 범위는 현재 실행 문맥으로써, 그 변수를 둘러싼 함수 혹은 함수 외부에 전역으로 선언된 변수도 될 수 있음.

호이스팅(hoisting)

인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다. 변수 선언이 함수 또는 전역 코드의 상단에 이동하는 것과 같아서 올라간다는 의미의 hoisting으로 불린다.

var의 호이스팅

var로 선언한 변수는 호이스팅 시 undefined로 변수를 초기화한다.

let, const의 호이스팅

let, const로 선언된 변수도 호이스팅 대상이다. 하지만, var와 달리 undefined로 변수를 초기화하지 않는다.
떄문에, 변수 초기화 전에 읽는 코드가 먼저 나타나면 에러가 발생한다.

선언만이 호이스팅 대상

호이스팅은 변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는 현상으로 이해할 수 있다. 예를 들면 다음과 같다.

console.log(num); // 호이스팅한 var 선언으로 인해 undefined 출력
var num; // 선언
num = 6; // 초기화

반면, 다음 예제는 선언 없이 초기화만 존재한다. 따라서 호이스팅도 없고, 변수를 읽을 수 없다.

console.log(num); // ReferenceError
num = 6; // 초기화

더 많은 예시

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

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

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

// console.log(a + "" + b); // <- ReferenceError 
a = '크랜'; // a 초기화
b = '베리'; // b 초기화

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

항상 변수의 범위 상단에 변수를 선언하는 습관을 들여야 한다. 스코프 체인으로 변수를 감싸는 형태로 지역변수화하면 호이스팅 문제를 피할 수 있다.

let

블록 스코프의 범위를 가지는 지역 변수를 선언하며, 선언과 동시에 임의의 값으로 초기화할 수도 있다.
재선언: 불가능
재할당: 가능

let name = "Choi";
// let name = "Park"; // (X) 재선언 불가능
...
...
name = "Kim";  // (O) 재할당 가능
console.log(name) // "Kim"

const

블록 범위의 상수를 선언한다. 변하지 않는(Immutable) 값을 할당할 때 사용한다.
재선언: 불가능
재할당: 불가능

const name = "Choi";
// const name = "Park"; // (X) 재선언 불가능
...
...
// name = "Kim";  // (X) 재할당 불가능
console.log(name) // "Choi"

선언되지 않은 변수들

var, let, const 등의 선언 명령어가 붙지 않은 사용되는 변수들은 다음과 같은 특징이 있다.

선언되지 않은 변수들은 항상 전역변수이다.
선언되지 않은 변수들은 변수들을 할당하는 코드가 실행되기 전까지는 존재하지 않는다.
선언되지 않은 변수들은 실행 콘텍스트의 프로퍼티를 변경/삭제할 수 있다.

이러한 세 가지 특징 때문에, 변수 선언 오류는 예기치 않은 결과로 이어질 수 있다. 그러므로 항상 전역 범위 여부와 상관없이 변수를 선언하는 것이 권장되며, ECMAScript 5의 strict mode에서는 선언되지 않은 변수에 할당하면 오류가 출력된다.

출처

최건우

부족한 경험을 채우기 위한 나만의 기록 공간

이전 포스트