[JavaScript] var, let, const 차이점 정리 (호이스팅, 스코프)

🐥 var, let, const 차이점 정리 (호이스팅, 스코프)

출처:https://roadmap.sh/javascript

자바스크립트 로드맵의 전체를 보고싶으시다면 👉 자바스크립트 로드맵 (JavaScript Roadmap)

 

이 포스팅을 통해 알 수 있는 내용✍️
1. 변수 선언 방식 (var, let, const)
2. 호이스팅
3. 스코프 (block, function, global)
4. var, let, const 차이점

 

안녕하세요. 오늘은 자바스크립트 변수에 대해서 알아보겠습니다.

자바스크립트의 변수 선언 방식에는 var, let, const가 있습니다.

이것들은 호이스팅과 스코프에서 차이가 있습니다.

호이스팅이란 ?

인터프리터(소스 코드를 한줄씩 바로 실행하는 컴퓨터 프로그램 또는 환경)가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다.

초기화는 제외하고 선언의 경우만 코드의 최상단으로 옮깁니다.

따라서, 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있음을 말합니다.

var 같은 경우에는 undefined로 초기화가 되지만 const, let 같은 경우에는 초기화가 되지 않습니다.

// var
console.log(test);
var test = 1;

// 결과값: undefined
// 선언만 최상단으로 옮겨졌기 때문에 변수는 아직 1로 초기화되지 않은 상태이다.

// const, let
console.log(test);
console.log(test2);
const test = 1;
let test2 = 1;

// ReferenceError: Cannot access 'test' before initialization
// ReferenceError: Cannot access 'test2' before initialization

스코프란 ?

스코프는 말그대로 범위를 말합니다. 여기서 범위는 변수에 접근할 수 있는 범위를 뜻합니다.

스코프는 계층적인 구조를 가지기 때문에

하위 스코프 → 상위 스코프 접근은 가능하지만⭕,

상위 스코프 → 하위 스코프 접근은 불가능합니다.❌

스코프 종류
1. 전역 스코프(global): 모든 범위
2. 함수 스코프(function): 함수 내 범위
3. 블록 스코프(block): while, if, for 등과 같이 중괄호{} 범위
4. 지역 스코프(local): 함수 스코프와 블록 스코프를 합쳐서 부르는 말

우선순위 : 지역 스코프 > 전역 스코프

 

1) 렉시컬 스코프: 함수의 호출 위치가 아닌 선언 위치에 따라 상위 스코프를 결정 -> 클로저(closure)와 관련

 

---

결론

	호이스팅	스코프	변경 여부
var	호이스팅 시 변수를 undefined로 초기화	전역 or 함수 스코프	재선언, 값 수정 가능
let	호이스팅 시 변수 초기화X	함수 or 블록 스코프	재선언 불가능, 값 수정 가능
const	호이스팅 시 변수 초기화X	함수 or 블록 스코프	재선언 불가능, 값 수정 불가능

 

 

+) es5에서는 var만을 사용해서 변수를 선언했지만 es6에서는 var의 단점을 보완하기 위해서 let, const를 도입했습니다.