new

new 키워드는 생성자 함수(Constructor Function) 또는 클래스(class)를 호출해서 새로운 인스턴스(Instance)를 만드는 연산자이다.
new 없이 생성자(Constructor)를 호출하면 this가 전역 객체를 가리키므로 반드시 new를 붙여야 한다.

new 연산자가 하는 4단계 동작

빈 객체 생성 — {} 형태의 새 빈 객체(Object)를 메모리에 만든다.
this 바인딩 — 생성된 빈 객체를 this에 바인딩(binding)한다.
프로퍼티 추가 — 생성자 함수 본문을 실행하며 this에 속성(Property)과 메서드(Method)를 추가한다.
반환 — 생성자 함수가 명시적으로 객체를 return하지 않으면 this(새 객체)를 자동으로 반환한다.

기본 사용법

JavaScript

클래스와 함께 사용

ES6 클래스(class) 문법에서도 동일하게 new로 인스턴스(Instance)를 생성한다.

JavaScript

prototype 연결

new로 생성된 객체의 __proto__는 자동으로 생성자 함수의 prototype에 연결된다.

JavaScript

new 없이 호출했을 때의 문제

JavaScript

new.target을 사용하면 new 없이 호출됐는지 감지할 수 있다.

JavaScript

new 연산자가 하는 4단계 동작

빈 객체 생성 — {} 형태의 새 빈 객체(Object)를 메모리에 만든다.

this 바인딩 — 생성된 빈 객체를 this에 바인딩(binding)한다.

프로퍼티 추가 — 생성자 함수 본문을 실행하며 this에 속성(Property)과 메서드(Method)를 추가한다.

반환 — 생성자 함수가 명시적으로 객체를 return하지 않으면 this(새 객체)를 자동으로 반환한다.

기본 사용법

JavaScript

function Person(name, age) {
  this.name = name; // 2단계: this에 바인딩된 객체에 프로퍼티 추가
  this.age = age;
}

const alice = new Person('Alice', 30); // 4단계: this(새 객체)가 반환됨
console.log(alice.name); // >> Alice
console.log(alice instanceof Person); // >> true

클래스와 함께 사용

ES6 클래스(class) 문법에서도 동일하게 new로 인스턴스(Instance)를 생성한다.

JavaScript

class Animal {
  constructor(type) {
    this.type = type;
  }
  speak() {
    return `${this.type} says hello`;
  }
}

const dog = new Animal('Dog');
console.log(dog.speak()); // >> Dog says hello

new 없이 호출했을 때의 문제

JavaScript

function Person(name) {
  this.name = name;
}

const p = Person('Bob'); // new 없이 호출 → this가 전역 객체
console.log(p);          // >> undefined
console.log(globalThis.name); // >> Bob (전역이 오염됨)

new.target을 사용하면 new 없이 호출됐는지 감지할 수 있다.

JavaScript

function Safe(name) {
  if (!new.target) throw new Error('new 키워드를 사용하세요.');
  this.name = name;
}

new 연산자가 하는 4단계 동작

기본 사용법

클래스와 함께 사용

prototype 연결

new 없이 호출했을 때의 문제

Synapse Map Insight

new

new 연산자가 하는 4단계 동작

기본 사용법

클래스와 함께 사용

prototype 연결

new 없이 호출했을 때의 문제

Synapse Map Insight