1. 🗺️ 개념 지도 (Overview)

객체 간의 상속을 구현하는 JS 의 방식

한 줄 요약:

자바스크립트 객체가 상속처럼 동작할 수 있게 해주는 연결 구조

이 주제가 왜 중요한가?

• 자바스크립트의 객체 동작 원리를 이해하는 핵심 개념
• 상속 / 메서드 공유 / 메모리 구조를 이해하는 기반
• class 문법도 결국 내부적으로는 프로토타입 기반으로 동작

[Prototype]
├── [[Prototype]]
│   ├── __proto__ (접근자)
│   └── Object.getPrototypeOf()
├── Constructor
│   └── prototype (생성자 속성)
├── Prototype Chain
│   ├── 상속 구조
│   └── Object.prototype → null
├── 메서드 공유
└── class (문법적 설탕, syntactic sugar)

2. 📖 핵심 개념 정리

⚠️ 단순 복붙 금지! 반드시 자신의 말로 재작성할 것

2-1. Prototype

자바스크립트에서 모든 객체는 ‘부모객체’를 갖고 있는데, 이게 프로토타입이다. 어떤 객체의 속성을 찾을 때 해당 객체에 없으면 자동으로 부모 객체인 프로토타입에서 찾게된다.

1. 객체 생성 시, 내부적으로 [[Prototype]] 이 함께 생성됨.
2. 객체의 속성을 접근하면 객체 자신 → 객체의 [[Prototype]] → … → 순으로 탐색함
3. nulll에 도달할 때까지도 없으면 결국 undefined

function Box(width, height) {
  this.width = width;    // 가로
  this.height = height;  // 세로

  this.getArea = function() {

function Box(width, height) {
  this.width = width;    // 가로
  this.height = height;  // 세로
}

// Box 함수의 프로토타입에 getArea 메서드를 추가해 모든 인스턴스가 상속받아 사용할 수 있도록 한다
Box.prototype.

핵심 포인트:

• 모든 객체는 내부적으로 [[Prototype]]을 가진다
• __proto__는 이를 접근하기 위한 getter/setter
• 생성자 함수의 prototype은 인스턴스의 부모 역할

2-2. 프로토타입 체이닝 (Prototype Chain)

프로토타입들이 연결되어있는 걸 보고 체인구조라고 한다. 결국 속성 탐색을 할 때 해당 체인을 따라 탐색하게되는 것. 최상위 부모에는 Object.prototype이 존재하며, 그 위는 null이다.

1. 객체의 프로퍼티 접근
2. 본인 객체 확인
3. 부모(__proto__) 확인
4. 최상위(Object.prototype) 확인
5. 없으면 null 반환

// 실제로 컴퓨터는 아래처럼 생성자 함수로 인식한다.
// const arr = new Array(3, 2, 5, 4);
const arr = [3, 2, 5, 4];

console.log(arr.sort());   // [ 2, 3, 4, 5 ]
console

핵심 포인트:

• 속성 탐색은 현재 객체 → 부모 → ... → Object.prototype → null
• 중간에 찾으면 즉시 반환 (탐색 종료)
• 체인이 길어질수록 성능에 약간 영향 있음 (but 대부분 무시 가능)
• JS의 상속은 복사가 아니라 “참조 기반 연결”

2-3. proto vs prototype vs [[Prototype]]

자바스크립트에서 “프로토타입”이라고 부르는 것은 사실 하나가 아니라

3가지 서로 다른 개념이 섞여 있는 것이다.

이걸 구분 못하면 계속 헷갈리게 된다.

1. [[Prototype]]
   • 모든 객체가 내부적으로 가지는 숨겨진 속성
   • 실제로 상속 연결을 담당하는 진짜 프로토타입
   • 우리가 직접 접근할 수는 없음 (명세 개념)

   const obj = {};
   // 내부적으로
   obj.[[Prototype]] === Object.prototype

2. proto
   • [[Prototype]]에 접근하기 위한 getter/setter
   • 브라우저에서 제공하는 비표준 → 현재는 표준화됨 (하지만 권장 X)

3. 🔍 깊이 이해하기

왜 이렇게 설계됐을까? (Design Decision)

이 기술/개념이 왜 이런 방식으로 만들어졌는지 배경을 이해하자

• JS는 클래스 기반 언어들과 달리 프로토타입 기반으로 설계되어있다.
  • 메모리 효율 : 메서드를 인스턴스마다 복사하지 않고 프로토타입에 하나만 두어서 공유하게됨
  • 동적 언어 특성 : 런타임에 프로토타입에 메서드를 추가해도, 모든 인스턴스에 즉시 반영됨

다른 개념과의 비교

유사한 개념과 차이점 정리 (면접에서 자주 나오는 포인트)

실무에서는 어떻게 쓰이나?

실제 프로젝트에서 마주칠 수 있는 상황

• 직접 prototype을 건드리는 경우는 드물지만
• 아래 개념들 전부 프로토타입 기반

1. Class 문법

   class Box {
     constructor(width, height) {
       this.width = width;
       this.height = height;
     }
   
     getArea()

4. 🎤 구두 설명 연습

면접관 앞에서 말하듯이 작성. 읽는 용도가 아니라 말하는 연습을 위한 섹션

"프로토타입이 뭔가요?" 질문에 대한 답변 스크립트

[도입 - 핵심 정의 먼저]
"프로토타입은 자바스크립트 객체가 속성이나 메서드를 상속받는 부모 객체입니다."

[부연 - 왜/어떻게]
"이것이 필요한 이유는 메서드를 모든 인스턴스에 복사하지 않고
 하나의 프로토타입 객체에 두어 메모리를 효율적으로 쓰기 위함입니다.
 동작 방식은, 객체에서 속성을 찾을 때 자기 자신 → 프로토타입 → 그 프로토타입...
 순으로 체인을 따라 올라가며 탐색하고, 최종적으로 null에 도달하면 undefined를 반환합니다."

[마무리 - 실무 연결]
"실제로 Array.prototype.map 같은 내장 메서드들도 이 체이닝 덕분에 모든 배열 인스턴스에서
 사용 가능하며, 저는 이 원리를 이해한 뒤 polyfill 구현이나 상속 구조 설계 시 활용했습니다."

⏱️ 1분 요약 버전

면접관이 바쁠 때, 딱 1분 안에 설명하는 버전

프로토타입 = 자바스크립트 객체의 '부모 참조'
→ 속성 탐색 시 자기 자신부터 null까지 체인을 따라 올라감
→ 덕분에 메서드 한 번 정의로 모든 인스턴스 공유 가능
→ __proto__(접근자) ≠ Func.prototype(생성자용 프로퍼티) 구분 주의

5. ❓ 예상 면접 질문 & 답변

각 질문에 대해 STAR 구조 혹은 두 문장 요약으로 작성

기본 질문

심화 질문 (꼬리질문 대비)

🧨 함정/난이도 높은 질문

function Foo() {}
Foo.prototype.x = 1;
const a = new Foo();
Foo.prototype = { x: 2 }

6. 📝 나만의 요약 노트

공부하고 나서 진짜 내 머릿속에 남은 것들만 정리

오늘 이 주제에서 가장 중요한 것 3가지

1. JS 상속 = 복사가 아니라 프로토타입 연결이다
2. 메모리 효율을 고려한다면 메서드는 prototype에 넣는 방법도 있다
3. 속성 탐색은 체이닝 구조로 동작한다