Prototype 정리

1. Prototype 소개

사용자의 정보를 담는 user 라는 변수를 선언하고 name과 age의 속성 값을 담고 있는 객체를 아래와 같이 할당했다고 친다.

var user = { name: "Sue", age: 100 };

그런데 어느 순간 user 라고 하는 사용자에 대한 정보가 담긴 변수를 사용하다가 아래 코드와 같이 해당 속성 값들을 담고 있는 객체에 다른 추가 정보를 넣을 일이 생기게 되고 새로운 변수에 담을 일이 생길 수 있다.

var developer = { name: "Sue", age: 100, position: "frontend" };

이렇게 되면 name: "Sue", age: 100 에 대한 중복된 코드가 생성이 된다.

중복되는 코드를 보면 우린 마음 한 켠이 찜찜해지고 중복을 줄일 방안에 대해 생각할 것이다! 🤔

자바스크립트의 Prototype을 이용한 상속(내려받기)이라는 개념을 통해 중복되는 코드를 줄일 수 있다.

중복되는 코드를 활용하면서 새롭게 선언되는 변수에 내용을 추가하는 것이다.

기존에 작성하였던 코드들을 다시 작성하며 알아본다!

var user = { name: "Sue", age: 100 };

var developer = {};

developer.__proto__ = user; // {name: "Sue", age: 100}

developer.name // "Sue"

developer.age // 100

developer // {} > [[Prototype]]: Object > age: 100 name: "Sue"

developer 라는 변수에 빈 객체를 할당해주었다가 developer.__prototype__ 에 user 라는 객체를 할당해주었기 때문에 하단에서 developer 를 선언하면 user 라는 변수가 가진 객체 정보를 내려 받을 수 있게 된다. 그것을 상속이라고도 한다.

Console

developer 에 중복된 객체 값을 담았으니 새로운 값을 추가하기 위해서는 아래와 같이 작성하면 된다.

developer.position = "frontend"; // "frontend"

developer // {position: 'frontend'} > position: 'frontend' [[Prototype]]: Object > age: 100 name: "Sue"

새로 담은 값인 position: 'frontend' 뿐만 아니라 상위 객체의 prototype 에 담긴 속성들인 name: "Sue", age: 100 속성들을 사용할 수 있게 된다.

Console

위와 같이 지금까지 써온 객체, 배열 그리고 기타 데이터 타입의 속성과 메서드들은 prototype 에 담기고 사용할 수 있게 된다.

Prototype 토글 클릭 후 볼 수 있는 값들

2. Prototype 활용 사례

아래 이미지와 같이 obj 라는 객체 변수 값에 속성과 메서드들이 자동으로 뜨게 된다.

이것은 위에서 살펴본 것처럼 prototype 에 이미 담겨서 혹은 내장되어 있어서 사용할 수 있도록 하는 것이다.

object 예시

array 예시

단순히 객체 정보를 확장하는 것 뿐만 아니라 정의 되어있는 기능들을 활용할 수 있다.