variable(변수)

📌 var

변수의 생성 과정
1. 선언 단계
2. 초기화 단계
3. 할당 단계

• var는 선언하기 전에 사용할 수 있다.

console.log(name);  // undefined
var name = ‘Mike’;

• 위 코드는 다음과 같이 동작함

var name;
console.log(name);
name = ‘Mike’;

• var로 선언한 변수는 코드가 실제로 이동하진 않지만 최상위로 끌어 올려진것 처럼 동작함 => hosting(호이스팅)
• undefined를 찍는 이유는 선언은 호이스팅 되지만 할당은 호이스팅이 되지 않기 때문
• 같은 상황에서 let은 에러를 발생시킴, 하지만 호이스팅 되지 않는건 아님
• 호이스팅 : 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것 처럼 행동
• let은 Temporal Dead Zone 때문에 error를 발생

📌 Temporal Dead Zone(TDZ)

// console.log(name); // Temporal Dead Zone - Error
const name = ‘Mike’; // 함수 선언 및 할당
console.log(name); // 사용 가능

📌 Hosting(호이스팅)

let age = 30;

function showAge() {
    console.log(age);

    let age = 20;  // Error
}

showAge();

• 호이스팅은 스코프 단위로 일어난다.
• console.log(age); 부분이 TDZ이기 때문에 error 발생.
• 함수 스코프 내부에서 호이시팅이 일어나면서 TDZ에 호출된 console.log 함수에 걸려 오류를 뱉음.

var
1. 선언 및 초기화 단계(동시에 일어남)
2. 할당 단계
💡 초기화: undefined를 할당해주는 단계

let
1. 선언 단계
2. 초기화 단계
3. 할당 단계
💡 선언 직후 호이스팅 되지만 초기화 단계는 코드에 도달했을때 이루어진다. 때문에 reference error 발생

let name;
name = ‘Mike’;

// 재할당 가능

const
1. 선언 + 초기화 + 할당

const gender; // SyntaxError: Missing initializer in const declaration
gender = ‘male’;

// const는 재할당이 불가능 하기 때문에 SyntaxError 발생

📌 스코프

• var : 함수 스코프(function-scoped) => 함수 내부에서 선언한 변수만 지역변수가 됨
• let, const : 블록 스코프(block-scoped)
• 블록 스코프는 모든 코드 블록에서 선언된 변수가 코드블록 안에서만 유효하며 외부에서는 접근 불가능
• 즉, 코드 블록 내부에서 선언한 변수는 “지역 변수”

// var 예시
const age = 30;
if (age > 30) {
   var txt = ‘성인’;
}

console.log(txt); // 성인