[JavaScript] let, const, var 차이 + 호이스팅 개념 정리

 

 

 

 

• 자바스크립트는 기본적으로 함수 레벨 스코프를 따름
• 모든 선언(var, let, const, function, class)를 호이스팅함
• 호이스팅
• 변수를 선언하기 전에 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당
• var 선언문이나 function 선언문 등을 해당 스코프의 선두로 옮긴 것처럼 동작하는 특성
• 변수의 선언과 할당을 분리해서 선언 부분을 스코프의 가장 위쪽으로 끌어올림
• 초기화를 제외한 선언만 호이스팅

 

 

블록레벨 → let, var, const 다시 정리 → 함수 스코프, 블록 스코프

 

• const, let → block scope

굳이 함수로 작성 안 해도 됨

 

• var → function scope

 

전체 문서: 전역 변수(global scope)

함수, 변수: 지역 변수(local scope)

 

 

지역 변수(local scope) -> 함수, 블록

 

함수 범위(function scope)

• 함수 안에서 변수가 선언되면 함수 안에서만 사용 가능
• 함수 외부에서 선언한 변수는 모두 전역 변수

 

블록 범위(block scope)

• if, switch, for, while문, try/catch문 등 안에서 선언됐으면 그 안에서만 가능
• { 중괄호 안에서 선언된 변수 }

 

for 루프의 i

• for loop 안에서만 사용 가능한 지역 변수
• i는 자유변수. for 루프의 생명 주기가 종료되어도 변수 i를 참조하는 함수가 있으면 계속 유지됨

for (let i = 0; i < 3; i++) {

console.log(i);

}

 

전역 객체(global object)

• 모든 객체의 유일한 최상위 객체
• browser-side: window 객체
• server-side(node.js): global 객체

 

변수 생성 과정 

선언 - 초기화 - 할당

var: 선언-초기화(동시에 실행) -> 할당

let: 선언 - 초기화 - 할당

 

let foo = 1; // 전역 변수

 

{

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

  let foo = 2; // 지역 변수

}

 

let foo = 1;

 

{

  // 호이스팅 과정

  // 스코프의 선두 부분: 선언단계(스코프에 변수 등록)

  // 일시적 사각지대(TDZ)

  console.log(foo) // ReferenceError

  let foo; // 초기화

  foo = 2; // 할당

}

 

---

 

 

참고 자료

Function Scope & Block Scope in JS

호이스팅 - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN

let, const | PoiemaWeb