프로토타입과 객체

박다영·2022년 12월 7일
0

javascript

목록 보기
9/15

javascript 의 모든 요소는 객체 object 이며,
javascript 의 핵심은 프로토타입 prototype 이다.

이를 이해하려면, 우리가 쓰고있던 메서드를 살펴봐야 한다.
우리는 배열에서 forEach, map 등의 메서드를 사용해왔다.

메서드(method)란?
key : value 로 구성된 객체 내부의 프로퍼티 중 그 value 값이 함수인 것을 말한다.

그렇다면 우리는 forEach, map 이라는 메서드를 배열에 적어넣은 적이 없는데,
어떻게 사용할 수 있었던 걸까?

그것은 우리가 새로운 배열을 생성하면, 자바스크립트가 자동으로
forEach, map 같이 배열에서 쓸 수 있는 메서드를 프로토타입을 통해 붙여주기 때문이다.

정확히 말하자면, 프로토타입이 가진 메서드를 참조해서 쓸 수 있게 해주는 것인데,
좀 더 구체적으로 설명해보겠다.

위의 캡쳐에 나온 것처럼 모든 자바스크립트의 객체는
명세서에서 명명한 [[Prototype]]이라는 숨김 프로퍼티를 갖는다.
이 프로퍼티의 기능은 객체에 없는 프로퍼티를 불러오려고 할때,
자바스크립트가 자동으로 프로토타입을 참조해서 해당 프로퍼티를 찾는 것이다.
(프로토타입이란, 어떤 객체에서 참조하는 상위 객체를 말한다.)

쉽게 말해 현재 객체에 없는 메소드를 호출하려고 하면,
연결된 상위 객체로 올라가 해당 메소드를 찾아와서 쓸 수 있게 해주는 것이다.
그래서 우리가 매번 배열을 만들 때마다 forEach, map 등의 메서드를 써넣지 않아도
배열이면 자동으로 해당 메서드를 사용할 수 있었던 것이다.

이러한 동작 방식을 프로토타입 상속이라고 부른다.
연결된 프로토타입의 메서드가 새로운 객체에 상속된다는 뜻!

그래서 배열이면, 배열 프로토타입을 참고하고,
객체면, 객체 프로토타입을 참고하고,
문자열이면, 문자 프로토타입을 참고하고,
숫자형이면, 숫자 프로토타입을 참고한다.

실제로 콘솔에 배열, 객체, 유사배열객체, 문자열, 숫자형을 각각 써보면 이렇게 나온다.

그리고 한가지 재미있는 사실은, 배열이든, 문자열이든, 숫자형이든
처음 참조하는 프로토타입을 열어 맨 아래로 내려보면,
객체 프로토타입을 또 참조하고 있다는 것을 알 수 있다.
그래서 "모든 것은 객체를 상속받는다."라는 말을 하는 것이다.
결국 모든 내장 프로토타입의 상속 트리 꼭대기엔 Object.prototype이 있기 때문이다.

이를 통해 우리는 javascript 의 모든 요소가 객체 object 라는 것을 알 수 있다.

참고 : 프로토타입 상속
참고 : 내장 객체의 프로토타입

profile
개발과 디자인 두마리 토끼를!

2개의 댓글

comment-user-thumbnail
2022년 12월 8일

와웅👍👍

1개의 답글