JS를 독학하면 놓치기 쉬운 부분들(3) - 객체와 프로토타입

김현우·2020년 10월 21일
0

JavaScript

목록 보기
3/8
post-thumbnail

자바스크립트는 객체다

흔히 아는 자바스크립트의 객체를 말하는 것이 맞다.

배열, 함수 모두 사실은 객체이며 그 중에서 함수는 일급 객체라고 불릴 만큼 자바스크립트에서 중요한 요소로 자리잡힌다.

컴퓨터 프로그래밍 언어 디자인에서, 일급 객체(영어: first-class object)란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. 보통 함수에 매개변수로 넘기기, 수정하기, 변수에 대입하기와 같은 연산을 지원할 때 일급 객체라고 한다.
출처: 위키백과

아래는 new Array()라는 코드로 만든 빈 배열이다.

보이는 바와 같이 내부적으로는 length프로퍼티, __proto__프로퍼티를 가진 객체이다. key와 value의 모양을 가진 구조이지 않은가. 객체가 맞다.

함수도 찍어보자.

마찬가지로 함수 또한 내부적으로는 객체이며, 당장 주요하게 볼 만한 프로퍼티로는 argumentsprototype, 그리고 __proto__가 있다.
arguments프로퍼티는 함수에 대해 포스팅 할 때 설명하도록 하고,
prototype__proto__프로퍼티는 프로토타입이라는 개념이 필요하므로 아래에서 다시 다루겠다.

아무튼 함수 또한 객체이다.

일반적인 객체를 만들어 보자

const obj1 = {a: 1}
console.log( obj1.hasOwnProperty('a') ) // true

위의 코드에서 a라는 프로퍼티 하나만 가지는 객체를 만들었다. 이 객체 안에 hasOwnProperty라는 메서드가 있지도 않는데 어떻게 콘솔엔 true가 찍힐까?

이는 어떤 객체에서 무언가 찾을 때, 그 객체에 찾는 것이 없으면 그 객체의 부모에게서 찾기 때문이다. 세상에 부모 없이 태어나는 생물이 있으랴. 별 것 아닌 듯 보이는 저 객체 또한 마찬가지이다. 우리는 모두 어디에서 와서 어디로 가는 지 곰곰히

그렇다면 방금 내가 만든 obj1이라는 객체의 부모는 누구일까.

그 부모를 가리키는 프로퍼티가 __proto__프로퍼티이다.

실은 [[Prototype]]이라는 프로퍼티인데, 크롬 브라우저에서는 __proto__라는 프로퍼티로 표현된다.

프로토타입

자바스크립트에서는 number, string, boolean, undefined, null을 제외한 모든 것이 객체이며, 모든 객체는 부모가 있다.

예를 들어, 배열의 부모는 Array.prototype이라는 객체이며, 이 객체의 부모는 Object.prototype이다.

우리가 배열을 만들고, 요소를 추가하기 위해 push()메서드를 쓰려고 하는데 이 메서드가 우리가 만든 배열 안에 있을까?
이 포스팅의 맨 처음에서 보았듯 갓 만든 배열에는 length__proto__프로퍼티 뿐이다. 그럼에도 우리가 빈 배열에서 push() 메서드를 쓸 수 있는 건, 배열의 __proto__가 가리키는 Array.prototype이라는 객체에 push() 메서드가 있기 때문이다.

위에서 함수를 콘솔에 찍었을 때 보았던 __proto__프로퍼티 또한, 함수의 부모이다.
함수의 부모는 Function.prototype객체이고, 이 객체의 부모는 Object.prototype객체이다.

Object.prototype 객체는 모든 객체의 1세대 조상이다.

그렇다면 함수를 찍었을 때 __proto__프로퍼티 말고 prototype프로퍼티가 있었는데 이건 또 무엇일까?

그것은 다음 장에서 생성자에 대해 다루면서 설명해야겠다.

0개의 댓글