프로토타입(prototype)의 모든 것 - 1/3편 : 프로토타입(prototype)을 느껴라

---

안녕하세요 이녀석입니다.😎

 

자바스크립트의 공부방법으로 공식문서인 MDN이나 W3Schools, 도서, 강의가 있을 겁니다.

저도 마찬가지였고 지금도 현재 진행형이죠.

 

공부하면서 느낀건데 MDN을 보면 번역본이다 보니 이해하기 조금 난해한 부분이 분명 있었고,

저뿐만 아닌 다른 분들도 그런 부분이 있으셨을 거예요.

 

그래서 제가 이해한 것들을 쉽게 기록을 해보려 합니다.

쉽게 하려다 보니 공식 문서나 여러 강의와 다른 부분이 있을 테지만 제 글을 읽고

분명 도움이 되리라 하는 마음에 포스팅을 작성해 나가도록 하겠습니다.

혹여 부족한 부분과 다른 좋은 내용을 언제든 알려주시면 감사히 배울 테니 언제든 알려주세요.

 

감사합니다.😎

---

 

<프로토타입(prototype)의 모든 것>은 총 3편과 번외편으로 나눠서 포스팅합니다.

• 프로토타입(prototype)을 느껴라
• 은행의 서비스 저장소
• 앱(App)으로 가능해진 은행 업무
• (번외) MDN도 다 이유가 있었구나!

---

프로토타입(prototype)을 느껴라

자바스크립트에서 객체가 공통 메서드와 프로퍼티를 사용할 수 있는 이유는 프로토타입 체인을 이용했기 때문입니다.

 

자바스크립트의 프로토타입이란?

MDN에서는 위 처럼 프로토타입을 설명하고 있지만 여러 분들은 프로토타입의 정확한 의미보다는 예제를 통해서 프로토타입을 느껴보시는 게 더 좋다고 생각합니다.

 

읭? 느낀다는 게 뭐냐고요??

 

지금부터 느끼러 가보겠습니다🚀

(생성자 함수에 대한 자세한 설명은 지금 여기에서는 다루지 않습니다. 나중에 요청에 따라 포스팅하겠습니다.)

---

const person = {
  name: '이녀석',
  age: 31,
  sayHobby: function() {
    console.log(`${this.name}의 취미는 코딩입니다`);
  }
}

 

먼저, 간단하게 객체를 생성하고 변수 pserson에 할당해보겠습니다.

여러 분들도 아시다시피 pesrson.name, person.age, person.sayHobby()는 잘 동작할 겁니다.

이유는 name, age, sayHobby를 정의했기 때문이죠.

 

그렇다면 person.toString()도 동작할까요?? (동작할 테니 제가 물어봤겠죠...?😅)

 

person.toString(); // '[object object]'

 

보시다시피 잘 동작합니다. '[object object]'가 무슨 의미인지는 중요하지 않습니다.

여기서 중요한 것은 person에는 toString: function() {}이 없는데도 동작했다는 것입니다.

person에서 정의 하지 않은 프로퍼티, 메서드가 동작하는 이유는 자바스크립트에서 내부적으로 프로토타입 객체를 이용한 체이닝(chaining), 즉 프로토타입 체인이 동작했기 때문입니다.

---

function WooriBank(name, age, product) {
    this.name = name;
    this.age = age;
    this.product = product;
    this.getMoney = function(){
        console.log(`[${this.product}]이 만기가 되어 만기수령금을 수령해주세요^^`);
    }
}

const client = new WooriBank('이녀석', '31', '이자가 매우 쎈 적금');

client.getMoney(); // '[이자가 매우 쎈 적금]이 만기가 됐으므로 만기수령금을 수령해주세요^^'

 

이번에는 생성자함수를 이용해서 객체를 만들었습니다.

당연히 client.getMoney()는 잘 동작합니다.

console.log(client)를 해보면 getMoney라는 함수가 있기 때문이죠.

 

그렇다면, 제가 위에서 프로토타입 체인에 의해 정의하지 않은 메서드도 사용할 수 있다 했으니 client.getCreditScore()를 해보겠습니다.

 

client.getCreditScore(); // '이녀석고객님의 신용점수는 100점입니다.'

 

짜잔~~ '이녀석고객님의 신용점수는 100점입니다.'가 동작했습니다.

여러분들은 안되시겠지만요......😭

저만 되는 이유는 숨겨진 코드가 있기 때문이고, 숨겨진 코드에 의해 client.getCreditScore()는 프로토타입 체인에 의해서 동작했기 때문입니다.

숨겨진 코드가 무엇인지는 은행의 서비스 저장소 편과 함께 말씀드릴게요.😎

 

프로토타입 객체, 프로토타입 체인이 뭔지 아직 모르셔도 됩니다. 모르는 게 당연한 겁니다. 일단은 프로토타입 체인이라는 것에 의해 정의하지 않은 프로퍼티, 메서드를 사용할 수 있다는 것만 알고 느끼시면 됩니다👍