Q.
js의 표준 내장 객체 api(프로토타입 메소드), 이거 왜 이름에 api가 들어가는지 이해가 안 돼. 내가 아는 api는 tmdb 데이터같은 걸 끌어올 때 사용하는 건데 왜 api라고 불러?
A.
좋은 질문이야! 진짜 헷갈릴 수 있어.
우리가 흔히 말하는 "API"는 보통 서버랑 통신할 때 사용하는 것, 예를 들면 TMDB API처럼 외부 데이터를 받아오는 걸 떠올리잖아? 근데 사실 API는 훨씬 더 넓은 개념이야.
✅ API의 본래 뜻
API는 Application Programming Interface의 줄임말이야.
"프로그래머(개발자)가 어떤 시스템이나 프로그램을 사용할 수 있도록 제공되는 인터페이스(접점, 사용법 모음)"를 뜻해.
즉, 꼭 인터넷이나 서버랑 통신하는 게 아니어도, 누군가가 만든 기능을 우리가 사용할 수 있게 해놓은 '사용법 모음'이면 다 API라고 부를 수 있어.
📦 그래서 JS의 표준 내장 객체도 API라고 하는 이유는?
예를 들어 JavaScript에는 이런 게 있지:
Array.prototype.map()String.prototype.includes()Math.random()JSON.parse()
이런 것들 전부 브라우저(또는 JS 엔진)가 미리 제공하는 기능들이야.
이걸 묶어서 "JavaScript 표준 API"라고 부르는 거야.
왜냐면:
- JavaScript라는 언어가 제공하는
- 프로그래머가 사용할 수 있는
- 정해진 방식(method, property) 들이기 때문이야.
🔄 정리하자면!
| 구분 | 설명 | 예시 |
|---|---|---|
| 서버 API | 외부 서비스와 통신할 수 있게 해주는 인터페이스 | TMDB API, Kakao API |
| 내장 API (또는 JS 표준 API) | JS 언어 자체에서 제공하는 기능 | Array.map(), Math.max() 등 |
즉, 너가 생각한 것도 맞는 말이고, JS 내장 기능을 API라고 부르는 것도 틀린 말은 아니야.
"API"라는 단어가 생각보다 범용적으로 쓰이기 때문에 생기는 혼동이지!
궁금한 거 더 있어? 😄
Q.
그러면 프로토타입이라는 의미는 뭐야?
A.
좋아, 이제 "프로토타입"으로 넘어가자!
JavaScript에서 이건 진짜 중요하고 자주 나오니까 한 번 정확히 이해해두면 엄청 도움이 돼 😎
💡 프로토타입(Prototype)이란?
간단히 말해서:
JavaScript에서 객체들이 공통된 속성이나 메서드를 공유할 수 있도록 만든 일종의 템플릿(원형) 이야.
조금 더 쉽게 풀어보자면...
👶 객체 생성의 비유
const user1 = {
name: 'Alice',
sayHi() {
console.log(`Hi! I'm ${this.name}`);
}
};
const user2 = {
name: 'Bob',
sayHi() {
console.log(`Hi! I'm ${this.name}`);
}
};이렇게 두 개 만들면 sayHi()가 중복돼. 비효율적이지?
그래서 JS는 이런 중복을 줄이기 위해 공통 메서드를 프로토타입에 저장해두고, 각 객체가 그걸 물려받아서 쓰도록 만들어놨어.
✅ 예시로 이해하기: Array.prototype
const fruits = ['apple', 'banana', 'cherry'];
fruits.map(fruit => fruit.toUpperCase());fruits는 배열이니까, JS는 "어? 얘는 배열이네. 그럼 Array의 prototype에 있는 map() 메서드 쓸 수 있겠다!" 하고 map()을 찾는 거야.
즉,
fruits는 배열 인스턴스Array.prototype은 모든 배열이 공통으로 사용하는 기능들(map, filter 등) 이 모여 있는 곳
🧬 이걸 "프로토타입 체인"이라고 해
JS는 객체에 어떤 걸 찾을 때, 직접 그 속성에 없으면 그 객체의 prototype을 따라 위로 올라가면서 찾아봐.
이게 바로 "prototype chain (프로토타입 체인)" 이라는 개념이야.
📌 정리!
| 용어 | 뜻 | 비유 |
|---|---|---|
| Prototype | 객체가 공유하는 메서드/속성들이 모여 있는 곳 | 설계도, 템플릿 |
Array.prototype | 배열들이 공유하는 기능(map, filter 등) | 배열 전용 도구함 |
| Prototype chain | 없으면 부모에게 물려받아 찾아보는 방식 | 상속처럼 위로 찾기 |
혹시 클래스 문법에서도 이게 어떻게 쓰이는지 궁금해?
그 얘기도 이어서 해줄 수 있어! 😄
Q.
그럼 실제로 array객체 내장 메소드를 사용할 때 array.slice() 이렇게 쓰지 array.prototype.slice() 이렇게 써본 적이 없는 것 같은데 prototype이 기본인데 생략해서 쓰는것뿐인거야?
A.
와, 진짜 정확한 질문이야!! 🎯
맞아, 바로 그거야 — 우리가 array.slice() 이렇게 간단하게 쓰는 건 실제로는 Array.prototype.slice를 생략해서 쓰는 것이야.
✅ 실제로 일어나는 일
const arr = [1, 2, 3];
arr.slice(1);이렇게 쓰면 JS 내부적으로는 이런 식으로 동작해:
Array.prototype.slice.call(arr, 1);즉, arr 객체는 내부적으로 Array.prototype을 부모로 가진 구조(프로토타입 체인)이기 때문에,
arr 안에는 slice라는 메서드가 직접 있진 않아도
JS가 "없네? 그럼 prototype 쪽에서 찾아볼까?" 하면서 Array.prototype.slice를 찾아내는 거야.
📦 요약하자면
arr.slice()는arr객체가Array.prototype을 상속받고 있기 때문에 가능한 거야.slice는 사실arr자신이 가지고 있는 게 아니라,Array.prototype에 있는 걸 빌려쓰는 중!- 그래서 우리가
.prototype을 명시적으로 쓰지 않아도 자동으로 찾아서 써주는 거야.
🔍 진짜 확인해보자
const arr = [1, 2, 3];
console.log(arr.hasOwnProperty('slice')); // false ❌
console.log(Object.getPrototypeOf(arr).hasOwnProperty('slice')); // true ✅이렇게 보면 정말로 slice는 arr 자체가 아니라 그 프로토타입에 있다는 걸 확인할 수 있어.
👀 왜 이렇게 만들었을까?
- 메모리 절약: 모든 배열마다
map,filter,slice같은 걸 새로 만들면 너무 낭비잖아? - 공통 기능 재사용: 모든 배열이 하나의 공통 메서드를 공유하게 만들면 훨씬 효율적이지.
결론:
너가 말한 것처럼,
array.slice()는Array.prototype.slice()를 생략해서 쓰는 거고,
실제 메서드는 prototype에 있는 걸 자동으로 찾아 써주는 구조야.
이해력 최고인데? 😎 더 궁금한 거 계속 물어줘도 돼!
