[JavaScript]프로토타입(Prototype)이란?

객체(Object)

JavaScript의 프로토타입을 설명하기 전에 객체에 대해 살펴봅시다. JavaScript는 배열, 문자열 심지어 함수도 객체로 간주합니다.

 

다음 예제는 배열 생성 후 요소 추가, 삭제 그리고 요소의 개수를 출력합니다.

const array = [1, 2, 3];
array.push(4);

console.log(array);
console.log(array.length);

array.pop();
console.log(array);

실행 결과

array라는 변수를 대괄호로 초기화했으므로 array는 배열로 정의됩니다. 따라서 push()와 pop() 함수 그리고 length 프로퍼티를 사용할 수 있습니다.

 

그렇다면, 변수를 빈 객체로 초기화 후 push() 함수를 사용하면 어떻게 동작하는지 다음 예제로 알아봅시다.

const object = {};
object.push(1);
object.push(2);

console.log(object);

에러 내용

object라는 변수는 객체로 생성되었기 때문에 push() 함수가 상속되지 않습니다. 따라서, push() 함수를 호출하면 구문 에러가 발생합니다.

 

위 내용을 정리하자면, 변수를 대괄호([])로 초기화하면 해당 변수는 JavaScript 엔진에 의해 배열로 정의되고 배열에서 사용할 수 있는 함수와 프로퍼티가 상속된다는 것을 의미합니다.

---

프로토타입(Prototype)

함수와 프로퍼티가 상속된다는 것은 특정 객체가 push(), pop() 함수와 length 프로퍼티를 가지고 있다는 것을 의미합니다. 여기서 말하는 특정 객체를 프로토타입(Prototype)이라고 합니다. 

 

아래는 프로토타입 정의입니다.

JavaScript의 모든 객체(배열, 객체, 함수 등)는 상위 객체를 참조하며, 이 상위 객체를 프로토타입이라고 말합니다. 

다음 예제는 배열의 프로퍼티를 확인합니다.

const array = [];

console.dir(array);

실행 결과

다음 예제는 객체의 프로퍼티를 확인합니다.

const obj = {};

console.dir(obj);

실행 결과

실행 결과에 공통적으로 존재하는 [[Prototype]] 프로퍼티가 바로 프로토타입입니다. 프로토타입 체이닝에 의해 array는 Array의 함수 및 프로퍼티, obj는 Object의 함수 및 프로퍼티를 사용할 수 있습니다.

배열의 프로토타입을 확인해보면, push() 그리고 pop() 함수가 존재합니다.

그러나 객체의 프로토타입에는 push()와 pop() 함수가 존재하지 않으므로 push() 함수를 호출했을 때 구문 오류가 발생했습니다.

JavaScript의 모든 객체의 프로토타입은 값을 할당하는 시점에 결정되며, 프로토타입은 변경될 수 있습니다.

 

다음 예제는 변수를 선언 > 배열 할당 > 객체 할당 시점의 프로토타입을 보여줍니다.

let arr;  // 초기값 없음
console.dir(arr);

arr = []; // 배열 할당
console.dir(arr);

arr = {}; // 객체 할당
console.dir(arr);

실행 결과

실행 결과에서 알 수 있듯이 초기값이 없으면, undefined로 출력되고 값을 할당하면 할당된 값에 따라 프로토타입이 변경됩니다.

---

정리

• JavaScript는 값을 할당하는 시점에 프로토타입이 정해집니다.
• 프로토타입은 상위 객체를 의미합니다.