🧹 ES6 클래스 문법 vs 기존 prototype 방식 – 차이와 내부 구조 비교

🧹 ES6 클래스 문법 vs 기존 prototype 방식 – 차이와 내부 구조 비교

ES6(ECMAScript 2015)부터 자바스크립트에 class 문법이 도입되면서, 기존의 prototype 기반 객체 생성 방식이 훨씬 직관적으로 변했습니다.
하지만 내부적으로는 여전히 프로토타입 체인 위에서 동작한다는 점에서 본질은 동일합니다.
이번 글에서는 ES6 클래스 문법과 기존 prototype 방식의 차이점과 동작 방식의 유사성을 비교합니다.

---

1. ES5 – prototype 기반 객체 생성

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

const p1 = new Person("Alice");
console.log(p1.sayHi()); // 👉 Hi, I'm Alice

• Person은 생성자 함수
• sayHi는 Person.prototype에 정의됨
• 모든 인스턴스는 __proto__를 통해 해당 메서드에 접근

---

2. ES6 – class 문법 기반 객체 생성

class Person {
  constructor(name) {
    this.name = name;
  }

  sayHi() {
    return `Hi, I'm ${this.name}`;
  }
}

const p2 = new Person("Bob");
console.log(p2.sayHi()); // 👉 Hi, I'm Bob

• 훨씬 직관적이고 익숙한 OOP 스타일
• 내부적으로는 여전히 prototype에 메서드를 정의

---

3. 클래스와 함수 방식의 내부 구조 비교

console.log(typeof Person); // 👉 "function"
console.log(Person.prototype.sayHi); // 👉 함수 존재 (prototype에 저장됨)

클래스도 결국 함수로 동작하며, 메서드는 prototype에 저장됩니다.
즉, 문법이 달라졌을 뿐 프로토타입 기반 구조는 동일합니다.

---

4. class 문법의 주요 특징

• 생성자 함수는 constructor()로 정의
• 메서드는 prototype에 자동으로 등록
• 클래스는 호이스팅되지 않음 (선언 전에 사용 불가)
• new 없이 호출하면 오류 발생

const p = Person("Charlie"); // ❌ TypeError: Class constructor Person cannot be invoked without 'new'

---

5. 클래스 상속도 프로토타입 체인을 활용

class Animal {
  speak() {
    return "Generic sound";
  }
}

class Dog extends Animal {
  speak() {
    return "Bark!";
  }
}

const d = new Dog();
console.log(d.speak()); // 👉 "Bark!"

Dog는 Animal의 프로토타입을 상속받습니다.
extends는 내부적으로 Object.setPrototypeOf()로 연결됩니다.

---

6. class 문법 vs prototype 방식 비교

항목	class 문법 (ES6)	prototype 기반 (ES5)
문법	간결하고 명확한 OOP 스타일	함수 + prototype 조합
메서드 위치	자동으로 prototype에 저장	직접 prototype에 추가
호출 시	new 필수	new 없이 호출 가능 (권장 X)
상속	extends, super()	prototype 연결 수동 처리

---

📌 마무리

ES6 클래스 문법은 자바스크립트를 더 객체지향적으로 표현할 수 있도록 추상화한 문법입니다.
그러나 내부적으로는 기존의 prototype 기반 구조와 동일하게 동작하며, 표현 방식만 달라졌을 뿐 핵심 원리는 같습니다.

다음 글에서는 extends와 super를 활용한 클래스 상속 구조를 상세히 설명하고,
실제 메서드 오버라이딩과 super 호출 타이밍까지 함께 살펴보겠습니다.