[심화] 01. 호이스팅·TDZ·생성자 함수

JavaScript 심화

호이스팅·TDZ부터 생성자 함수까지, 기초를 ‘심화 관점’으로 다시 잡기

변수 선언/실행 시점/객체 생성 흐름을 정리하고, 이후 파트(클로저·this·비동기)를 위한 기반을 만듭니다.

형태 요약노트 대상 심화 입문 포커스 실무에서 헷갈리는 지점

그림 1. 호이스팅과 TDZ(요약)

그림 2. new 생성자 함수의 내부 흐름

변수 선언: var / let / const 핵심만 정리

심화 과정의 첫 출발은 변수 선언과 실행 시점입니다. 특히 시험/면접/실무에서 자주 헷갈리는 부분이 호이스팅(hoisting)과 TDZ(Temporal Dead Zone)이므로, 여기만 정확히 잡아두시면 이후 개념(클로저/this/비동기)을 이해하기가 훨씬 쉬워집니다.

기억해 두실 한 문장
let/const는 “선언은 되지만 초기화 전 접근이 금지(TDZ)”이고, var는 “undefined로 먼저 초기화되는 듯 보일 수 있다”는 점이 핵심입니다.

• var: 함수 스코프 중심, 중복 선언 허용, 선언 전에 접근 시 undefined가 보일 수 있습니다.
• let: 블록 스코프, 중복 선언 불가, TDZ로 인해 선언 전 접근이 금지됩니다.
• const: 블록 스코프, 재할당 불가(단, 객체 내부 값 변경은 가능), TDZ 적용.

// TDZ 예시
console.log(a); // ReferenceError (let/const)
let a = 10;

생성자 함수: new가 해주는 일

객체를 만들 때 {} 리터럴만 쓰지 않고, 패턴이 반복되는 객체는 생성자 함수를 통해 깔끔하게 만들 수 있습니다.

function User(name) {
  this.name = name;
  this.say = function() { return `안녕하세요, ${this.name}님`; };
}

const u = new User('Soo');
console.log(u.say());

반드시 확인할 포인트

• new를 빼면 this가 의도대로 바인딩되지 않아 문제가 생길 수 있습니다(특히 strict 모드).
• 생성자에서 객체를 return하면, new로 만든 객체 대신 그 객체가 반환될 수 있습니다.

객체 메서드 & 계산된 프로퍼티(computed property)

객체를 다루는 방식도 심화 파트에서 자주 확장됩니다. 특히 메서드 축약 문법, 계산된 프로퍼티는 코드 가독성에 큰 도움이 됩니다.

const key = 'role';

const user = {
  name: 'Soo',
  [key]: 'admin',      // 계산된 프로퍼티
  sayHi() {            // 메서드 축약
    return `Hi, ${this.name}`;
  },
};

• 동적으로 키를 만들 때는 [expr] 형태를 적극 활용하시면 좋습니다.
• 동일한 키가 들어오지 않도록(충돌 방지) 설계를 하려면 다음 파트의 Symbol도 함께 보시면 도움이 됩니다.

참고 링크

• MDN: let
• MDN: const
• MDN: 객체 초기자(Object initializer)
• MDN: 생성자(new)