[JavaScript] var와 let의 차이, 호이스팅

성지혜·2022년 10월 25일
0

📍 var와 let의 차이

  1. 중복 선언 가능 여부
  2. 재할당 가능 여부
  3. 스코프 유효범위
  4. 호이스팅 방식

1. 중복 선언

var: 중복 선언 가능

// 변수 선언 + 초기화
var menu = "모츠나베";
console.log(menu); // 모츠나베 

// 변수 선언 + 초기화
var menu = "마라탕";
console.log(menu); // 마라탕 

// 변수 선언 (초기화 X)
var menu;
console.log(menu); // 마라탕

var는 중복해서 변수 선언을 여러번해도 에러 없이 각각 다른 값이 출력 가능하다.
=> 기존에 선언했던 변수의 존재를 까먹고 값을 재할당하게 되는 등의 실수를 저지르기 쉽다.

let/const: 중복 선언 불가능

let menu = "연어";
let menu = "육회"; 

let, const로 선언한 변수는 중복 선언이 불가능하다.
다시 선언할 경우 에러가 발생한다.
=> var에 비해서 코드 안전성이 높다.

2. 재할당

var/let: 값의 재할당이 가능하다.

const: 값의 재할당이 불가능하다.(상수를 선언)

3. 스코프(Scope)

스코프란 유효한 참조 범위를 뜻하며, var로 선언한 변수와 let, const로 선언한 변수의 스코프는 다르다.

var: 함수 레벨 스코프(functional-level scope)

function test() {
	var coco = "코코";    
    console.log(coco);
} 
test(); // 코코 

console.log(coco); // ReferenceError: coco is not defined

var는 함수 내부에 선언된 변수만 지역변수로 한정하며, 나머진 모두 전역변수로 간주한다.
test함수 내부에서 선언된 coco변수를 외부에서 참조시 에러가 발생한다.

함수를 제외한 영역에서 var로 선언한 변수는 전역변수로 취급된다.

if(true) {
	var coco = "코코";    
    console.log(coco); // 코코
} 
console.log(coco); // 코코

자바스크립트에서는 if, for, while, try/catch 문 등의 코드 블록 { ... } 내부에서 var로 선언된 변수를 전역 변수로 간주한다.

그래서 블럭 외부에서도 어디에서나 참조가능하다.

// 전역변수? => 블락 밖에서 선언을 한 어디서든 쓰일 수 있는 변수
// 지역변수? => 블락 {} 안에서 선언된 변수, 블락 안에서만 쓸 수 있음

let / const : 블록 레벨 스코프 (block-level scope)

let, const는 함수 내부는 물론이며 if, for문 등의 코드 블록에서 선언된 변수도 지역변수로 취급한다.

if(true) {   
	let coco = "코코";    
    console.log(coco); // 코코
} 

console.log(coco); // ReferenceError: coco is not defined

즉, var는 함수 내부에 선언된 변수만 지역 변수로 인정하는 함수 레벨 스코프이고, let, const는 블록 내부에서 선언된 변수까지도 지역변수로 인정하는 블록 레벨 스코프이다.

📍 호이스팅이란?

=> 함수가 실행되기 전에 안에 있는 변수들을 범위의 최상단으로 끌어올리는 것.
=> 코드가 실행하기 전 변수선언/함수선언이 해당 스코프의 최상단으로 끌어올려진 것 같은 현상을 말한다.
(두 문장 다 똑같은 뜻이다.)

var: 변수 호이스팅 발생

console.log(coco); // undefined 

var coco = "코코"; 

console.log(coco); // 코코

변수 coco가 선언되기 전에 참조되었음에도 에러가 발생하지 않는다. 이는 코드 실행 전에 자바스크립트 내부에서 미리 변수를 선언하고 undefined로 초기화 해두었기 때문이다.

let/const: 다른 방식으로 변수 호이스팅 발생

console.log(coco); // ReferenceError: coco is not defined 

let coco = "코코";
console.log(coco); // 코코

변수 coco가 선언되기 전에 참조하니 에러발생.
변수 선언과 초기화 사이에 일시적으로 변수 값을 참조할 수 없는 구간인 TDZ에 빠졌기 때문에 보이는 현상이다.

profile
많이많이 시도해보기

0개의 댓글