Prototype, 프로토타입

👇🏻 참조 수준이 아니라 그대로 갖다가 글로 옮긴 거기 때문에 꼭 영상보기를 강추한돠

https://www.youtube.com/watch?v=wUgmzvExL_E 

설명의 신...

---

Prototype 프로토타입 | 제품이 출시되기 전의 원래의 형태 또는 전형적인 예, 기초, 표준

 

나는 프로젝트를 할 때 필요에 의해서 종종 UI를 디자인하는 경우가 있다. 디자인할 때, 피그마를 이용하는데 여기에서 Prototype이라는 단어가 굉장히 많이 쓰인다. 

 

다음과 같이 말이다.

UI 디자인은 웹 서비스나 어플을 출시하기 전에 사용자가 보게 될 화면을 만드는 것인데 이것을 '프로토타입을 작성한다'라고 한다.

 

 

 

 

그러면, 프로그래밍 언어에서 Prototype이란 무엇일까. 

사실, 프로토타입은 거지같게도 자바스크립트에만 있는 특이한 문법이다. 다음과 같은 코드가 있다.

 

<script>
	function parents() {
        	this.dad = "아빠";
		this.mom = "엄마";
	}

	var baby = new parents();
</script>

 

코드를 실행하고 브라우저 콘솔에 parents라고 입력해보자. 어떤 결과가 나오는가.

 

예상대로, 작성한 함수를 보여준다. 근데 parents. 까지 작성해보면 아래의 왼쪽과 같이 다양한 메소드들이 나타나고 우리가 찾는 prototype을 눌러보면 오른쪽과 같이 나타난다.

 

 

 

우리가 prototype이라는 것을 코드로 작성한 적이 있었던가  

 

없다. 우리가 한 것이라고는 parents 함수를 만든 후 baby 객체(object)를 생성한 것이 전부다. 한마디로, 지 혼자 자동으로 생성한 것이라는 생소한 소리다.

 

자바스크립트에서 함수를 만들어 객체를 생성하는 것은 부모가 자식을 낳는 것과 같다.
parents 함수  |  부모
baby 객체       |  자식

 

그리고 prototype은 자식이 자동적으로 내장되어 있는 부모의 유전자라고 생각하면 된다.

도데체 무슨 소리냐 한다면 화내지말고 위의 코드 baby 선언 위에 다음과 같은 한 줄을 추가해보자.

 

parents.prototype.name = 'Lim'

 

parents 에 프로토타입을 이용해 자료를 추가하는 코드이다. 그리고 콘솔에 baby와 baby.name을 입력해보자.

 

 

분명 baby에는 name이 보이지 않지만 baby.name에서는 찾을 수 있다. 우리는 parents(부모)에 직접 값을 추가하지는 않았지만 prototype(유전자)에 값을 추가하고 baby(자식)에 물려주었기 때문에 값을 사용할 수 있는 것이다.

 

즉, 객체에 직접 값을 추가하지 않고 프로토타입에 값을 추가하더라도 그 객체로부터 생성되는 자식 객체는 값을 사용할 수 있게 된다.

 

 

 

 

 

이것이 어떻게 가능할까.

이는 자바스크립트의 작동원리와 관련이 있다. 

 

우리가 자바스크립트에서 객체의 값을 찾을 때, 컴퓨터에게 "baby.name" 이렇게 이렇게 말한다.

그럼 이제 컴퓨터는 해당되는 값을 찾으러 가는데 우리의 예시에서는 baby에 해당 값이 없다.

 

하지만 컴퓨터는 포기하지 않고 baby의 부모, 즉 parents 까지 뒤져서 해당 값을 찾는다.

만약 여기서도 찾을 수 없다면 컴퓨터는 찾을 때까지 부모의 유전자를 뒤진다. 

 

이것은 우리가 배열을 생성할 때, 각종 메소드(sort, length)같은 것들을 사용할 수 있는 이유이기도 하다.

우리는 var array = new Array(1,2,3) 이렇게 배열을 생성한다.

엄밀히 말하면 자바스크립트 Array 객체의 자식 객체를 생성하는 것이기 때문에 Array 유전자에 있는 메소드를 사용할 수 있는 것이다.

 

그래서 만약에 내가 한번 Array에 적용할 수 있는 함수를 만들어보고 싶다는 욕망이 있다면 유전자에 그 욕망을 갖다 붙이면 된다.

 

<script>
	Array.prototype.desire = function(){
    	console.log('욕망이 폭발한다. 세상을 바꿔야해 ")}
        
    	var disaster = new Array()
</script>

 

그리고 출력을 해보면 나의 욕망은 출력이 되지만 '무'욕망은 정의되어 있지 않다.

 

 

 

 

 

그렇다면, 프로토타입이 없는 객체도 있을까? 

YESS, 매우 존재한다. Object.prototype은 아무런 프로퍼티도 상속받지 않는다. 

 

하지만, 사용자 정의 생성자 (Date.prototype)은 Object.prototype을 상속하는 객체를 프로토타입으로 갖는다. 

new Date()로 생성한 객체는 Date.prototype과 Object.prototype으로부터 프로퍼티를 상속받게 되는 것이다.

 

이것을 프로토타입 체인(Prototype Chain)이라고 한다. 

 

여기까지 이해를 했다면 이제 아래의 사이트가 생소하게 느껴지지 않을 것이다.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

Array.prototype.sort() - JavaScript | MDN