[JavaScript] Prototype? 대체 프로토타입이 뭘까?

in Dev. Log on Development, Javascript
[JavaScript] Prototype? 대체 프로토타입이 뭘까?

뻔한 문서적 이론은 인터넷에 널려있습니다. 그렇기에 저는 그러한 포스팅은 지양하며,
단순히 어떠한 것인지 이해하기 쉬운 형태로 작성했음을 알려드립니다.

자바스크립트를 하는 사람들이라면 한 번쯤은 들어봤을 ‘프로토타입’ 그리고 자바스크립트를 공부하는 사람이라면 필수적으로 방문해 봤을 ‘MDN’ 그곳에 항상 보이는 ‘prototype’
우리는 매일 보면서도 지나 쳤던 그것이 무엇인지 한번 알아보자!

들어가기에 앞서

우리가 어떠한 메소드 예를 들면 sort(),length,map 등을 사용할 때
이런 것들은 왜 사용할 수 있는 것일까 라고 생각한적이 있을까?

아마 없을 확률이 더 많을 것이다. 그냥 아~ 이런 기능이 있는 메소드구나 라고 생각하고
사용법만 알고 넘어가는 경우가 대부분일 것이라고 생각한다.

이 포스팅을 통해 왜 그런 것이고 프로토타입은 무엇인지 알 수 있을것이다.

프로토타입은 유전자다.

우리가 Class 나 생성자함수로 기본적인 붕어빵 틀이라는 부모를 만들었을때
new를 사용해서 생성자를 기본으로 한 많은 자식들을 생성한다.

// file: "생성자.js"  
// 생성자 함수
function 붕어빵틀(속재료) {
  this.name = 붕어빵;
  this.속재료 = 속재료;
}

//--------------------------------

// 클래스
class 붕어빵틀 {
  constructor(속재료){
    this.name=붕어빵;
    this.속재료=속재료;
  }
}

const 슈크림붕어빵 = new 붕어빵틀(팥);

여기에서 우리가 부모역활을 하는 붕어빵 틀에서 붕어빵이라는 자식을 생성했다.
그리고 생성자에서 정의한 메소드인 붕어빵틀.name,붕어빵틀.속재료 를 사용할 수 있다.
이처럼 새로운 객체에서 메소드를 사용할 수 있는 이유는?

원래 부모가 가지고 있었던 것이고 그것을 자식에게 그대로 내려주는 유전자이기 때문에
자식들도 그대로 사용할 수 있다. 라고 생각하면 이해가 쉽다.

Array와 String 생성자

자! 그렇다면 이제 우리가 흔히 사용 하는 배열 매소드를 확인해보자.
‘MDN’ 에서 배열에서 쓸수 있는 메소드를 찾아보면 Array.prototype.메소드명() 이라고 나온다.

mdn
MDN에 forEach를 검색하면 나오는 Array.prototype.forEach() 와 좌측의 많은 메소드들

우리가 검색한 메소드는 위의 유전자에 빗대어 설명한 것처럼 Array 라는 생성자가 가지고 있는 유전자다.
그렇다. 우리가 흔히 쓰는 배열은 사실 배열 생성자를 사용한 것이다.

// file: "Array.js"
const arr = [1, 2, 3, 4 ,5]

const arr = new Array(1, 2, 3, 4, 5)

위의 두 개는 같다.
이처럼 우리는 평소 Array라는 생성자 함수를 사용해서 배열을 만든 것이고 그동안 자주 썼던
배열 메소드들은 Array 생성자가 가지고 있는 기본적인 메소드 들이기 때문에 arr 라는 자식도
그 유전자를 사용할 수 있는 것이다.

콘솔에서 한번 해당 배열을 생성하고 로그를 찍어보면 prototype을 확인할 수 있다.
부모가 자식에게 다 내려준 유전자이기 때문에 우리는 그 많은 배열메소드를 다 사용할 수 있는 것이다.

console
배열이 가지고 있는 수많은 유전자(prototype들)

String도 마찬가지이다.

// file: "String.js"
const str = "문자열"

const str = new String("문자열")

이것 역시 같다.
(typeof로 확인하면 하나는 문자리터럴이고 하나는 객체이지만 그냥 넘어가자. 똑같이 사용할 수 있다.)
그동안 문자열도 우리는 클래스나 생성자함수처럼 문자열이라는 객체를 생성하였고 부모인 String 생성자가
가지고있던 기본적인 유전자들을 사용할 수 있던 것이었다.

정리

  • prototype은 부모객체 생성자가 가지고있는 기본적인 메소드들 이라고 생각하면 된다.
  • new로 생성하는 자식 객체들은 부모가 가지고 유전자(메소드)를 물려받았다.
  • Array.prototype.메소드명() 은? -> Array 생성자로 만든 배열에서 사용가능한 메소드 라는 뜻!
  • String.prototype.메소드명() 은? -> String 생성자로 만든 문자열에서 사용가능한 메소드 라는 뜻!
  • 흔히 내장 함수라고도 하나, 그냥 prototype이란게 이런 뜻이구나~

한줄 요약

이제 MDN 을 보고 prototype이 나오면?
“아~ 이건 요 생성자로 만든 것이면 사용 가능한 메소드라는 뜻이구나?”

쉽게 말해서 그냥 해당 생성자의 내장 함수라고도 하나 그냥 prototype이란게 이런거구나? 고 알고가자!

부록 - prototype으로 할 수 있는 것

prototype은 쉽게 말해서 유전자라고 하였다. 그리고 그 유전자를 우리는 따로 등록해서
단축키 마냥 편하게 사용 할 수도있다. 쉽게 말하면 객체의 key와 value를 등록할 수 있다는 말이다.

나는 배열에서 콘솔을 출력할수 있는 배열메소드를 만들고 싶다?

Array.prototype.console = function() {console.log("만들었다")};
// 콘솔창에 "만들었다" 라고 출력되는 console 이라는 배열 메소드를 만들었다.
const arr = [1,2,3];

arr.console()
// "만들었다" 라고 출력된다.

© 2022.02 by sunnyfterrain