[javascript] 호이스팅 var, let, const

adc0612·2022년 4월 13일
0

자바스크립트 변수

var

  • 선언
    var는 한번 선언된 변수를 다시 선언할 수 있다.
    var drink = 'coke';
    console.log(drink); // coke
    var drink = 'pepsi';
    console.log(drink); // pepsi
  • 호이스팅
    var는 호이스팅이 된다.
    var는 선언하기 전에 변수를 사용해도 에러가 나지 않는다.
    console.log(drink); // undefined
    var drink = 'pepsi';
    이유는 var는 아래와 같이 변수선언이 위로 끌어올려진다.
    실제로 코드상에서는 끌어올려지지 않지만 자바스크립트 엔진안에서 var 선언부분을 최상단으로 올린다.
    "console.log"시 undefined가 나오는 이유는 선언은 호이스팅 되지만 할당은 호이스팅이 되지 않는다.
    var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다.

    호이스팅 (hoisting)
    JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다.
    즉, 함수와 변수 선언부분이 코드 최상단부분으로 올라간다고 이해하면 된다.
    다만 선언과 초기화를 함께 수행하는 경우, 선언 코드까지 실행해야 변수가 초기화된 상태가 됨을 주의하세요.

    var drink;
    console.log(drink); // undefined
    var drink = 'pepsi';
  • 스코프
    var는 함수 스코프를 가진다.
    블록안에서 선언한 var변수는 블록 밖에서도 이용이 가능하다.
    const a = 30;
    if (a ===30) {
    	var i = 1;
    }
    console.log(i); //사용 가능
    하지만 함수 내에서 선언한 var변수는 블록 밖에서 사용이 불가능하다.
    function add(a, b) {
    	var i = a+b;
    }
    add(1,3);
    console.log(i); //사용 불가능

let

  • 선언
    let은 한번 선언된 변수를 다시 선언 못 한다.
    let drink = 'coke';
    console.log(drink); // coke
    let drink = 'pepsi'; // redeclaration error (재선언 에러)
    console.log(drink);
  • 호이스팅
    let도 호이스팅이 된다.
    하지만 let은 선언하기 전에 사용하면 ReferenceError가 발생한다.
    console.log(drink); // Reference error
    let drink = 'pepsi'; 
    let은 호이스팅이 되어 선언부분이 최상단으로 끌어올려지지만 TDZ(Temporal Dead Zone)에 들어간다. 변수 스코프의 맨 위에서 변수의 초기화 완료 시점까지의 변수는 "시간상 사각지대"(Temporal Dead Zone, TDZ)에 들어간 변수라고 표현한다.
    let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않는다.
    let은 초기화하기 전에는 읽거나 쓸 수 없다(선언 구문에 초기 값을 지정하지 않은 경우 undefined로 초기화함). 초기화 전에 접근을 시도하면 ReferenceError가 발생한다.
  • 스코프
    let은 블록 스코프를 가진다.
    블록(중괄호 안에 영역) 안에서 선언한 let변수는 블록 안에서만 사용이 가능하다.
    const a = 30;
    if (a === 30) {
    	let i = 1;
    }
    console.log(i); // 에러
    블록 영역 스코프: 함수, if문, for문, while문, try/catch 등등

const

  • 선언
    const는 한번 선언되면 바꿀 수 없다. 즉, 다시 선언도 못 한다.
    const drink = 'coke';
    console.log(drink); // coke
    const drink = 'pepsi'; // redeclaration error (재선언 에러)
    const는 선언과 동시에 할당을 해야한다.
    const drink;
    drink = 'coke'; // 선언 에러
    console.log(drink); 
  • 호이스팅
    const도 호이스팅이 된다.
    const도 선언하기 전에 사용하면 ReferenceError가 발생한다.
    console.log(drink); // reference error
    const drink = 'pepsi'; 
  • 스코프
    const도 블록 스코프를 가진다.
    블록(중괄호 안에 영역) 안에서 선언한 const변수는 블록 안에서만 사용이 가능하다.
    const a = 30;
    if (a === 30) {
    	const i = 1;
    }
    console.log(i); // 에러

비교

varletconst
변수의 생성과정1. 선언 + 초기화
2.할당
1. 선언
2. 초기화
3.할당
1. 선언 + 초기화 + 할당
호이스팅된다.되지만 변수사용은 불가능되지만 변수사용은 불가능
스코프함수 스코프(functional-scope)블록 스코프(block-scope)블록 스코프(block-scope)

0개의 댓글