JavaScript/고급/Lesson 20
프로토타입 — *JS 의 객체지향*
45분·theory
이 챕터
2/2
프로토타입 — *JS 의 객체지향*
🎯 이 lesson 을 읽고 나면
이 lesson 을 다 읽고 나면 아래 3가지를 자신 있게 할 수 있습니다.
- ▸✅ prototype chain + __proto__ 의 동작
- ▸✅ class 가 prototype 의 syntactic sugar 인 이유
- ▸✅ Object.create vs new 키워드 비교
학습 목표를 체크리스트로 두고 다 답할 수 있게 되면 lesson 을 닫으세요.
프로토타입이 뭐냐
핵심 한 줄
JS 의 객체지향은 클래스 기반이 아닌 프로토타입 기반. 모든 객체는 자기 부모 객체 (프로토타입) 를 가지고, 메서드를 상속 받습니다.
다른 언어와 다른 점
객체가 다른 객체를 직접 상속. 클래스라는 템플릿 단계 가 없습니다.
프로토타입 체인
요청하면 위로 올라가며 찾습니다. 이게 프로토타입 체인.
class 문법 — 겉치레
ES6 (2015) 부터 class 키워드 지원. 하지만 내부는 여전히 프로토타입.
클래스 기반 언어 스타일 로 작성 가능. 하지만 알고 보면:
프로토타입 체인 그대로.
자주 보는 프로토타입 메서드
모든 내장 메서드 (map·filter·toUpperCase 등) 가 프로토타입 에 정의돼 있어서 모든 배열·문자열이 공유. 메모리 효율 ↑.
직접 만들기
옛 생성자 함수 방식. 지금은 class 문법이 더 깔끔 — 거의 항상 class 사용.
흔한 함정
1. arrow function 은 prototype 없음:
2. __proto__ 직접 조작 위험:
3. for...in 의 의외 동작:
한 번 정리
- ▸JS = 프로토타입 기반 객체지향
- ▸모든 객체는 부모 (프로토타입) 보유
- ▸
class는 문법 설탕 — 내부는 프로토타입 - ▸상속·메서드 공유의 메커니즘
⚡ 직접 해보기 — class 상속 + 프로토타입 체인
클래스 상속이 내부적으로는 프로토타입 체인임을 직접 확인.
✏️ JS 코드
📟 콘솔 출력
▶ 실행 버튼을 눌러보세요
⚠️ 브라우저 샌드박스에서 실행 — console.log()만 지원, alert/fetch 불가
🤖 AI 에게 이렇게 요청해보세요
이 lesson 의 개념을 알면 AI 에게 구체적으로 지시할 수 있습니다. 막연한 "고쳐줘" 가 아니라 어휘를 가진 요청 — 그게 토큰 절약의 출발점입니다.
- ▸"이 변수에 적절한 TypeScript 타입 어노테이션 붙여줘"
- ▸"이 === 와 == 혼용을 === 로 통일하고 의도 명확히 해줘"
- ▸"이 코드의 JSON.parse 결과에 unknown 타입 + 타입 가드 추가해줘"
왜 이게 토큰을 줄이나
개념을 모를 땐 AI 답변을 받고도 "그게 뭐예요?" 를 다시 물어야 합니다. 그 "다시 물음" 이 토큰을 잡아먹습니다. 개념 한 번 익혀두면 대화가 한 번에 끝납니다.
먼저 읽으면 좋은 개념: ES2022~2025 최신 문법 — AI 생성 코드의 단골