[JavaScript] 변수(let, const, var) + 호이스팅

자바스크립트에서 사용 가능한 변수인 let, const, var를 알아볼 것이다. 각 타입을 기준으로 변수 생성 과정부터 스코프 등에 대해 확인해보겠다.

📍 변수

• let : 변할 수 있는 값

let grade = 'F';
//...
	grade = 'A+';

• const : 변하지 않는 값 (절대로 바뀌지 않는 상수) -- 주로 대문자로 변수명 선언

const PI = 3.14

나아가, 사용자 지정 변수와 문자열과 섞어서 사용하기 위해 백틱 기호를 사용할 수 있다. 백틱 기호 안 ${}에 포함할 변수명을 입력해준다. 해당 기호에 숫자를 넣으면 계산되어 나오기도 한다.

const name = "velog";
const msg = `My name is ${name}`;
const msg1 = `오늘은 ${14+1}일`;

• var : 한번 선언된 변수 다시 선언 가능

console.log(name); //undefined
var name = 'hj';

console.log(name); //let, const -- 가능

var는 호이스팅에 따라 선언하기 전에도 사용 가능하다. 물론 선언은 호이스팅되지만 할당은 호이스팅되지 않는다. 따라서 첫 번째 console.log에 대해 콘솔 창에는 undefined가 찍히게 된다.

호이스팅(hoisting) 은 scope 내부 어디서든 변수 선언은 최상위에 선언된 것처럼 행동한다는 의미이다.
let과 const의 경우, 호이스팅이 가능하지만 함수를 선언하여 할당하기 전의 영역은 TDZ(Temporal Dead Zone)이기 때문에 실행되지 않는다.

📍 변수의 생성 과정

1. 선언 단계
2. 초기화 단계
3. 할당 단계

var는 1, 2 단계를 같이 진행한다. 따라서 초기화 시 'undefined'를 할당해준다. 위의 코드에서도 발견할 수 있다.

let은 1, 2 단계가 분리된다. 선언은 호이스팅에 따라 진행되지만, 2단계는 1단계 이후 코드에 도달해야 실행된다.

const는 1, 2, 3단계가 모두 한 번에 진행된다. 1단계만 진행했다고 해서 초기화하지 않으면 에러가 난다. 또한 let과 var는 값을 바꿀 수 있으니 3단계가 분리되지만 const는 값이 바뀌지 않기 때문이다.

📍 스코프

var : 함수 스코프 (function-scoped)
let, const : 블록 스코프 (block-scoped)

블록 스코프는 함수, if문, for문, while문, try/catch문 등을 의미한다. let과 const는 해당 코드 블럭 내에서만 유효하다. 즉, 코드 블럭 내부에서 선언된 변수는 지역 변수인 것이다.

함수 스코프는 함수 안에서 선언된 변수가 지역 변수가 된다. 블록 스코프 내외로는 모두 사용 가능하다. 함수만 주의하면 된다.

코딩앙마의 자바스크립트 기초 강좌 와 중급 강좌 수강 후 정리한 글입니다.