#24 자바스크립트(JavaScript) - 프로토타입과 인스턴스

안녕하세요 에이블디 입니다!

 

이번 시간에는 프로토타입과 인스턴스에 대해 알아보려고 해요!

 

여러분 혹시 자바의 클래스라는 개념을 들어보셨나요?

객체지향 언어의 가장 최소 단위가 되는 것이 클래스인데요,

하지만 자바스크립트는 클래스라는 개념이 없습니다. (ES6에서 클래스의 개념이 생기긴 하지만 자바의 클래스와는 조금 성향이 다릅니다. 자바스크립트에서 제공하는 클래스는 일반 함수보다 좀 더 특별한 함수정도로 생각할 수 있겠네요. 자바스크립트의 클래스는 다른 포스팅에서 다루도록 하겠습니다.)

 

대신 기존의 객체를 복사하여 새로운 객체를 생성하는데요, 자바스크립트에서는 기본 데이터 타입을 제외한 모든 것이 객체입니다.

객체가 만들어지기 위해서는 자신을 만드는 데 사용된 원형인 프로토타입 객체를 이용하여 객체를 만듭니다.

이때 만들어진 객체 안에 __proto__ 속성이 자신을 만들어낸 원형을 의미하는 프로토타입 객체를 참조하는 숨겨진 링크가 있는데, 이 숨겨진 링크를 프로토타입이라고 합니다.

위의 개념이 어려우신 분들은 일단 다른 객체의 원형이 되는 객체가 프로토타입이라고 생각하시고 느낌만 가지고 넘어가 주세요!

 

그래서 자바스크립트를 프로토타입 기반의 언어라고 하는데요, 프로토타입 기반의 언어는 객체 원형인 프로토타입을 이용하여 새로운 객체를 만들어내고, 이렇게 생성된 객체 역시 또 다른 객체의 원형이 될 수 있습니다.

 

이렇게 프로토타입은 객체를 확장하고 객체 지향적인 프로그래밍을 할 수 있게 해 줍니다.

 

예를 들어 그렌저, 소나타, 아반떼 세가지 자동차가 있다고 가정할게요.

자동차는 자동차가 가진 공통적인 원형(속성과 기능)이 있습니다.

자동차를 만들때는 자동차 공장에서 각각 자동차에 맞는 공장을 새로 짓는것이 아니라 자동차의 원형이 되는 틀을 만들어서 각 자동차마다 원하는 특징을 넣어 차를 만들게 되는데요, 자동차 공장이 가진 틀을 프로토타입 객체라고 한다면, 자동차 공장에서 틀을 사용해 만들어낸 자동차(객체)를 인스턴스(Instance)라고 합니다.

 

자동차 공장의 자동차 틀(프로토타입)에서 각각 다른 자동차 세대(인스턴스)를 만들었다 가정했을 때 세대의 자동차(인스턴스)는 모두 자동차 틀 객체의 속성과 함수를 그대로 사용할 수 있습니다.

 

코드를 보면서 이해해 볼게요!

 

일단 자동차의 틀을 만들어야겠죠? 자동차가 가진 공통된 틀을 만들어 보겠습니다!

function Car(name, color, price) {
    this.name = name;
    this.color = color;
    this.price = price;
}

자동차 이름과 색상, 가격 속성을 가지고 있는 자동차의 공통된 틀(객체)을 Car라는 이름으로 하나 만들어 보았어요!

 

그럼 이 Car를 이용하여 그렌저 차량을 한대 만들어 볼까요?

여기서 Car는 프로토타입의 객체이고, 인스턴스는 그렌저 차량이 되겠죠?

객체의 인스턴스를 만들 때는 new 예약어를 사용하고, new 예약어 뒤에 프로토타입 객체의 이름과 () 소괄호를 작성해 주시면 되는데, 매개변수 넣어줄 인수가 필요할 땐 소괄호 안에 인수를 넣어주시면 됩니다.

그럼 그렌저 차량을 만들어 볼까요?

grandeur = new Car("그렌저", "흰색", 37000000);

3700만원짜리 흰색 그렌저 차량을 Car를 이용해서 만들었습니다!

이번엔 아반떼 한대, 소나타 한대를 더 만들어 볼게요!

sonata = new Car("소나타", "검정색", 28000000);
avante = new Car("아반떼", "파란색", 20000000);

Car를 이용해서 2800만원짜리 검정색 소나타 한대, 2000만원짜리 파란색 아반떼를 한대 만들었어요!

 

Car라는 동일한 객체를 이용해서 서로 다른 자동차 세대를 만들었는데, 세 가지 자동차 객체들이 각각 고유한 속성을 가지고 있는지 확인해 보도록 하겠습니다!

 

전체 코드는 다음과 같습니다!

function Car(name, color, price) {
    this.name = name;
    this.color = color;
    this.price = price;
}

grandeur = new Car("그렌저", "흰색", 37000000);
sonata = new Car("소나타", "검정색", 28000000);
avante = new Car("아반떼", "파란색", 20000000);

console.log(grandeur.name);
console.log(sonata.name);
console.log(avante.name);

코드를 실행해 보면!

 

 

그렌저, 소나타, 아반떼 세 가지 객체가 각각 고유의 이름(속성)을 가지고 있는 것을 확인할 수 있습니다!

 

이렇게 자주 쓰는 속성과 함수들을 틀처럼 미리 만들어 두고, 필요할 때마다 틀(프로토타입)을 복제한 인스턴스를 만들어 코드를 재사용할 수 있습니다!

 

다음 시간에는 객체를 만드는 방법에 대해 조금 더 알아보도록 하겠습니다!

 

그럼 다음 시간에 만나요!