프로토타입(prototype)의 모든 것 - 3/3편 : 앱(App)으로 가능해진 은행 업무

---

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

 

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

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

 

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

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

 

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

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

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

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

 

감사합니다.😎

 

---

 

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

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

---

앱(App)으로 가능해진 은행 업무

 

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

 

작가 pch.vector 출처 Freepik

 

 

지금은 앱(App)으로 안되는게 없는 세상입니다🌍

은행도 마찬가지죠.

대면이 필요한 서비스를 제외하고는 은행 앱(App)으로도 서비스를 자유롭게 이용할 수 있습니다.

 

function WooriBankOrigin(name, age, product) {
    this.name = name;
    this.age = age;
    this.product = product;
}

function WooriBankApp(name, age, product) {
    this.name = name;
    this.age = age;
    this.product = product;
}

const client1 = new WooriBankApp('이녀석', 31, '아주 좋은 적금');

 

WooriBankOrigin생성자는 우리은행의 본점, WooriBankApp생성자는 우리은행의 앱(App)입니다.

그리고 우리은행의 앱(App)으로 가입을 하고 적금을 만들었습니다.

 

앱(App)이 만들어진 이유가 무엇일까요?

본점의 기능을 모바일로 이용하기 위해 앱(App)이 만들어 졌다고 할 수 있습니다.

그렇다면 앱(App)을 만들 때,

본점의 기능을 똑같이 만드는게 아니라 본점의 기능을 가져오거나 기능과 연결이 된다면 데이터의 낭비를 줄일 수 있지 않을까요?

 

다음과 같이 고객 정보 할당 기능을 가져올 수 있습니다.

 

function WooriBankOrigin(name, age, product) {
    this.name = name;
    this.age = age;
    this.product = product;
}

function WooriBankApp(name, age, product) {
    WooriBankOrigin.apply(this, arguments);
}

const client1 = new WooriBankApp('이녀석', 31, '아주 좋은 적금');

console.log(client1);

 

apply는 실행하려는 함수의 this를 원하는 대상으로 바꿔서 실행하게 해주는 함수입니다.

그래서 WooriBankOrigin.apply(this, arguments); 라고 하면 WooriBankOrigin을 실행하긴 하는데 this를 WooriBankApp으로 바꾸고 인자로는 arguments를 사용하라는 뜻입니다.

 

이렇게 본점의 고객 정보 할당 기능을 가져와 앱(App)에서도 사용할 수 있게 되었습니다.

 

이제 앱(App)으로 만기수령금을 받아봅시다.

물론 만기수령금도 본점의 기능이므로 본점의 만기수령금 기능을 앱(App)으로 가져와야합니다.

이때 상속이라는 개념이 적용됩니다.

 

function WooriBankOrigin(name, age, product) {
    this.name = name;
    this.age = age;
    this.product = product;
}

WooriBankOrigin.prototype.getMoney = function() {
    return `${this.name}님의 ${this.product}이 만기되었습니다. 본점을 방문해주세요.`;
};

function WooriBankApp(name, age, product) {
    WooriBankOrigin.apply(this, arguments);
}

// 본점 기능 가져오기 전
let client1 = new WooriBankApp('이녀석', 31, '아주 좋은 적금');
console.log('본점 기능 가져오기 전 client1 => ', client1);

 

이전 편에서 객체는 [[Prototype]]에 있는 프로퍼티와 메서드는 모두 사용할 수 있다고 말씀 드렸습니다.

 

좀 더 자세히 말씀을 드리자면,

 

[[Prototype]] 내부에는 프로퍼티와 메서드 뿐만 아니라 [[Prototype]]이 또 있습니다.

위 이미지에서 첫 번째 [[Prototype]]을 보면 constructor말고도 두 번째 [[Prototype]]이 있는 것처럼 말이죠.

 

즉,

객체는 [[Prototype]]들을 계속 따라가다 더 이상 [[Prototype]]이 보이지 않을 때까지의 모든 [[Prototype]]에 있는 프로퍼티와 메서드를 사용할 수 있습니다.(이것이 모든 객체가 toString()을 해도 잘 동작하는 이유입니다)

 

이렇게 [[Prototype]]들이 내부적으로 계속 존재하고, 서로 연결되어 있기 때문에 '프로토타입 체인'이라고 불리는 것이고, 외부에 있는 [[Prototype]]이 내부에 있는 [[Prototype]]의 기능을 상속 받았다고 할 수 있습니다.

 

근데 '본점 기능 가져오기 전 client1'에서 첫 번째 [[Prototype]], 두 번째 [[Prototype]] 어디를 봐도 getMoney가 없기 때문에 getMoney를 실행할 수 없습니다.

지금으로썬 당연한거죠.

getMoney는 본점의 기능이기 때문에 WooriBankApp.prototype에 getMoney를 추가하는게 아니라

WooriBankOrigin.prototype에 추가를 했기 때문에 지금 상태에서 client1.getMoney()를 하면 getMoney라는 함수가 없다는에러가 발생할 겁니다.

 

이제 본점의 getMoney기능을 가져오겠습니다.

 

// client1의 [[Prototype]]의 [[Prototype]]이 참조하는 것을 
// WooriBankOrigin.prototype으로 변경하여 본점 기능을 가져 옴
Object.setPrototypeOf(WooriBankApp.prototype, WooriBankOrigin.prototype);

// 본점 기능 가져온 후
client1 = new WooriBankApp('이녀석', 31, '아주 좋은 적금');
console.log('본점 기능 가져온 후 client1 => ', client1);

 

'본점 기능 가져오기 전 client1'의 모든 [[Prototype]]과 달리,

'본점 기능 가져온 후 client1'의 두 번째 [[Prototype]]에 getMoney가 있기 때문에 만기수령금을 수령할 수 있습니다😀

앱(App)이 본점의 만기수령금 수령하는 기능을 상속받은 것이죠.

 

근데 만기신청을 앱(App)으로 했는데 만기수령금은 본점으로 받으러 가자니 매우 불편하죠?

앱(App)에 기능을 만들어 자동이체로 만기수령금을 받을 수 있다면 편할 것 같습니다.

 

 

WooriBankApp.prototype.getMoney = function(){
    return `${this.name}님의 ${this.product}이 만기되어 만기수령금이 1일 내로 자동이체 됩니다.`;
}

 

위 코드를 추가하면 이제 자동이체가 되어 본점에 방문하지 않아도 됩니다.

이 맛에 앱(App)을 사용하는 거겠죠?😎

 

근데 본점의 getMoney는 어떻게 됐을까요?

 

 

client1을 보면 getMoney가 2개가 있습니다.

 

자바스크립트는 모든 [[Prototype]]에서 동일한 이름의 프로퍼티나 메서드가 있을 경우에는 가장 먼저 발견되는 프로퍼티나 메서드를 실행합니다.

 

그래서 앱(App)에서 추가했던 getMoney가 가장 먼저 발견됐으므로 본점의 getMoney는 실행되지 않습니다.

혹여 본점의 getMoney를 다시 사용하고 싶으면 WooriBankOrigin.prototype.getMoney.apply(client1); 를 하면 됩니다.

 

 

---

 

 

이번 포스팅을 마지막으로 <프로토타입(prototype)의 모든 것> 총 3편이 마무리가 되었습니다.

다음 포스팅은 (번외) MDN도 다 이유가 있었구나! 로 돌아오겠습니다.

번외편이지만 자바스크립트 실력 향상에 꼭 필요한 내용이므로 꼭 포스팅을 확인해주세요😎