Prototype Inheritance

앞서, 몇 개의 배열 기능들에 대해 배웠다.

• Add / remove 기능 : push, pop / shift, unshift
• Helper 기능 : map, filter, find, reduce

 

이 때, 배열에 새로운 기능들을 넣고 싶다면 어떻게 하면 좋을까?

예를 들어,

[9, 8, 6, 1].last() 는 배열의 가장 마지막 요소를 리턴하게 한다던지,

[1, 2, 3, 4, 5].evens() 는 배열의 짝수 부분만 리턴하게 한다던지의 방법 말이다.

이 말인 즉슨, 배열에 last()와 evens()라는 메서드를 내가 직접 코드할 수 있냐는 것이다.

 

 

물론 배열 기능들에 대해 커스터마이징을 할 수 있다.

아래의 절차를 따르면 가능하다.

 

• function(파라미터) {코드} 의 식으로 함수를 정의한다. (화살표 함수와는 다르다.)
• 위의 function을 Array.prototype 에 할당 ( = ) 한다.
• 배열에 대해, this 키워드를 이용하여 프로퍼티에 접근한다. (this는 시스템 예약어이다.)

아래를 통해 실습해보자.

 

 

Array.prototype.last = function() {
  return this[this.length - 1]
};

const a = [1, 2, 3].last()
const b = [4, 5, '마지막'].last()

console.log(a)
console.log(b)

• Array.prototype의 last에 받은 배열의 길이 - 1 인덱스의 요소를 리턴하는 함수를 할당했고,
• 이를 배열에 곧 장 쓸 수 있게 되었다.

 

---

하나 더 실습해보자.

 

아래 코드를 보고 질문에 답해보자.

Array.prototype.papaya = function (i = 0, z = 0) {
  if (i === this.length) return z
  return this.papaya(i + 1, this[i] + z)
}

const juicy = [7, 8, 2].papaya // juicy는 뭘까?
const juicy2 = [7, 8, 2].papaya() // juicy2는 뭘까?

Array.prototype.papaya  자체는 실행되지 않은 함수 그 자체이므로,

juicy는 함수가 될 것이고,

 

juicy2는 papaya를 ()를 붙임으로써 실행했기 때문에

위의 연산이 진행되어 return된 17이 출력된다. 

 

---

위의 예시들에서, 우리가 만든 기능들이 모든 배열에 적용이 가능하다는 것을 알게 되었다.

이러한 접근법을 prototype inheritance라고 한다.

그런데 왜 이렇게 부를까?

• Prototype : 만들고자 하는 기능을 Array.prototype에 할당해서 사용한다.
• Inheritance(상속) : 기능을 만들면, 영향받는 모든 배열들은 모두 이 기능을 사용할 수 있다.

Array.prototype.greet = function() {
  return this[0]
}

c.greet() // return 9

// Array.prototype.greet가 배열보다 아래 선언되어 있음에도 불구하고
// 전역에서 이 기능을 사용할 수 있게 된다.