[리액트 기초 스터디] JavaScript의 생성자 함수 동작 과정

목차 (OPEN)

• 📑 JavaScript의 생성자 함수 동작 과정
• 🧭 전체 흐름 미리 보기
• 🟥 생성자 함수 선언
• 🟧 new로 호출하기
• 🟨 내부 동작
• 🟩 일반 호출과의 차이점
• 📚 결론

 

 

 

 

 

 

📑 JavaScript의 생성자 함수 동작 과정

자바스크립트에서 생성자 함수(Constructor Function)는 객체를 찍어내는 전통적인 방법이다.

옛날에는 class 문법이 없었어서 새로운 객체를 만들 때 function을 생성자처럼 썼고,

지금도 내부 동작 원리를 이해하려면 꼭 알아야 하는 부분이라고 한다.

 

따라서 이번 포스팅에서는 new 키워드와 함께 생성자 함수가 정확히 어떤 순서로 무엇을 하는지를 단계별로 뜯어보고자 한다.

 

 

---

🧭 전체 흐름 미리 보기

new Person("소연", 24) 같은 코드를 실행하면, 자바스크립트는 아래의 단계를 자동으로 해준다.

• 새로운 빈 객체({ }) 생성
• 이 새 객체와 Person.prototype을 연결해준다.
• Person 함수의 본문을 실행하면서 this를 새 객체로 바꿔준다.
• this.name = "소연" 처럼 속성을 붙여준다.
• 함수가 따로 객체를 반환하지 않았다면, 기본적으로 this (방금 만든 새 객체)를 반환한다.

그래서 위와 같은 과정을 거쳐 결과적으로 Person { name: "소연", age: 24 } 같은 객체가 만들어지는 것이다.

그럼 이제 각 단계를 아래에서 더 자세히 확인해보자.

 

---

🟥 생성자 함수 선언

관례적으로 생성자 함수 이름은 대문자로 시작한다고 한다. (파스칼 케이스)

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

 

이 Person 함수는 일반 함수처럼 생기긴 했지만, new와 함께 쓰면 특별한 동작을 하게 된다.

 

---

🟧 new로 호출하기

const p1 = new Person("소연", 24);
console.log(p1); // Person { name: "소연", age: 24 }

 

여기서 new 라는 키워드의 의미는 '나 객체좀 만들어줘'라는 의미이다.

즉, Person을 그냥 실행하는 게 아니라, 객체를 하나 만들어서 그 안에 값을 채워주는 흐름으로 실행되게 된다.

 

 

---

🟨 내부 동작

1) 새 빈 객체 생성

먼저 자바스크립트가 { } 같은 새로운 빈 객체를 하나 만든다.

이 객체가 곧 인스턴스(예제에서는 p1)이 될 예정이다.

 

 

2) 프로토타입 연결

1번 과정을 거쳐 생성된 객체는 그냥 비어있는 것은 아니고, 부모 설명서 같은 거를 붙여놓게 된다.

그리고 이걸 바로 Person.prototype 이라고 부르던 것이다.

const p1 = new Person("소연", 24);
console.log(Object.getPrototypeOf(p1) === Person.prototype); // true

 

그래서 만약에 p1이 어떤 속성을 못 찾고 있으면,

"혹시 네 부모(Person.prototype)에 있니?"하고 거기 가서 알아서 찾아보게 되는 것이다.

그리고 요런거를 프로토타입 체인이라고 부른다.

 

 

3) this 바인딩

이제 Person("소연", 24) 함수의 본문을 실행하는데,

이때 this가 방금 만든 새 객체를 가리킬 수 있도록 자동으로 바꿔준다.

function Person(name, age) {
  // 여기서 this === 새로 만든 인스턴스
  this.name = name;
  this.age = age;
}

 

즉, this.name = name 이라는 것은

새 객체 안에 name이라는 속성이 생기는 것을 의미한다.

 

 

4) 속성 및 메서드 초기화

이제 이 단계에서 객체 안에 필요한 속성들을 실제로 붙이게 된다.

this.name = name;
this.age = age;

 

 

그런데 함수(메서드)는 어떻게 붙일까?

여기에는 크게 2가지 방법이 있다고 한다.

 

 

4-1) 생성자 안에 직접 작성하기

function BadPerson(name) {
  this.name = name;
  this.sayHi = function () {
    return `Hi, ${this.name}`;
  };
}

 

위와 같은 방법의 단점은 인스턴스마다 함수가 복사되기 때문에 메모리가 낭비된다는 것이다.

 

 

4-2) prototype에 작성하기

Person.prototype.sayHi = function () {
  return `Hi, ${this.name}`;
};

const p1 = new Person("소연", 24);
console.log(p1.sayHi()); // "Hi, 소연"

 

이러한 방법을 사용하면 모든 인스턴스가 하나의 함수만을 공유하기 때문에 메모리를 절약할 수 있다고 한다.

 

 

5) 반환 규칙

이제 마지막 단계인데, 이 단계에서는 반환이 자동으로 이루어진다.

 

이때 return이 따로 없다면 this를 반환하고,

return {...} 같은 객체를 명시적으로 반환했다면 그게 우선시된다.

그리고 만약 return 10 같은 원시값을 반환했다면, 이는 무시되고 그냥 this가 반환된다고 한다.

function A() { this.v = 1; }
console.log(new A()); // A { v: 1 }

function B() { this.v = 2; return { x: 99 }; }
console.log(new B()); // { x: 99 } ← this 무시

function C() { this.v = 3; return 7; }
console.log(new C()); // C { v: 3 } ← 원시값 무시

 

 

---

🟩 일반 호출과의 차이점

일반 호출과의 차이는 아래와 같다.

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

const x = Person("소연"); // ❌ 그냥 호출
console.log(x);           // undefined
console.log(globalThis.name); // 브라우저: "소연" (전역 오염 위험)
                             // Node (strict): TypeError 발생 가능

const y = new Person("소연"); // ✅ new 호출
console.log(y); // Person { name: "소연" }

 

위의 코드에서 볼 수 있듯이 그냥 호출하면 this가 전역(또는 undefined)을 가리켜서 버그나 전역 오염이 발생할 수 있지만,

new는 새 객체 생성 및 this 바인딩을 보장해준다는 장점이 있다.

(그래서 생성자 함수는 반드시 new와 함께 써야 하는 것이다.)

 

 

또한, 실제로 new를 빼먹었을 때를 대비해서 아래와 같은 방어 코드를 사용하기도 한다고 한다.

function SafePerson(name) {
  if (!new.target) return new SafePerson(name); // new 없이 호출해도 안전
  this.name = name;
}

function SafePerson(name) {
  if (!(this instanceof SafePerson)) return new SafePerson(name);
  this.name = name;
}

 

 

---

📚 결론

이번에 생성자 함수의 동작 과정을 단계별로 정리하면서

단순히 new를 붙이느냐 마느냐의 차이가 이렇게 큰 의미를 가진다는 것을 새삼 느끼게 되었다.

 

그동안은 그냥 new를 붙이면 객체가 만들어진다고만 알고 있었는데,

사실 그 안에서는 '빈 객체 생성 -> 프로토타입 연결 -> this 바인딩 -> 속성 초기화 -> 반환 규칙 적용'

이렇게 여러 단계가 진행된다는 사실을 알고 나니, 객체가 어떻게 만들어지는지 머릿속에 훨씬 명확한 그림이 그려진 것 같다.

 

그리고 가장 인상 깊었던 게, 그냥 함수 호출과 new 호출에서 this가 전역을 가리키느냐, 새 객체를 가르키느냐의 차이는

실무에서 버그로 이어질 수도 있다는 점이었다.

앞으로는 꼭 생성자 함수나 클래스 같은 코드를 사용할 때 this가 어디를 바라보고 있는지를 항상 신경써줘야겠다.

 

오늘 포스팅 내용이 개인적으로 정말 흥미로웠어서

앞으로도 추상적으로 'new를 사용하면 새 객체가 만들어지지 ~'하고 넘기는 것이 아니라

그 내부의 동작 과정을 알아보는 시간을 꾸준히 가져야겠다.