[JS] Prototype과 Prototype chain 👬🏼

지금은 자바스크립트의 마지막 알고리즘과 자료구조에 대해 배우고 있지만, 내가 이해가 안되는 부분이 많아서 가장 주춤했던 부분이 Prototype이 다가왔을 때 부터 인 것 같다.

그래서 시간이 있을 때 꼭 Prototype을 조금이라도 이해하도록 해보자라는 마인드로 오늘 정리를 한다.

현재 참여하는 강의에서도 다루었지만 강의 자료를 바탕으로 여러 가지 정보를 참고했는데 아래에 작성했다.

• 생활코딩 Prototype/Prototype Chain
• Modern Javascript Deep Dive 19장. 프로토타입
• 인프런 "코어 자바스크립트"
• NomadCoder 객체지향 프로그래밍 영상

그리고 너무 깊게 다룬다면 끝도 없기 때문에 현재로선 이해할 수 있는 "Prototype"의 개념과 "Prototype Chain"에 대해서 스스로 정리해보고자 한다.

Prototype이란?

영어인 "Prototype"을 해석하면 어떤 말인가?

"원형"이라는 뜻이다.
여기서 원형은 "객체의 원형"을 의미한다.

자바스크립트를 이루고 있는 것은 원시 타입인 number, string 등을 제외한 거의 모든 것이 객체이다.

여기서 객체는 우리가 알고 있듯이 아래처럼 key와 value의 쌍으로 이루어진 Property를 가질 수 있다.

<script>
  let obj = {
  	name : "hyunwoo", // property
  	age : "30" // property
  }
</script>

위의 객체 obj를 console.dir()을 통해 출력해보면 아래와 같은 결과가 나온다.

우리가 설정했던 프로퍼티인 name과 age가 보이고, 아래에 우리가 설정하지도 않은 프로퍼티가 여러 개도 함께 출력이 된다.

여기서 우리는 Prototype이라는 단어를 처음 볼 수 있게 된 것이다.

본론으로 들어가자면 Prototype이라는 프로퍼티 내의 속성들은 "생성자"를 통해서 객체가 만들어질 때 그 객체에 연결된다.

아래를 보도록 하자.
우리는 객체인 변수 obj를 생성했는데 "객체 리터럴" 방식으로 선언을 했다. 하지만 "객체 리터럴" 방식으로 선언한 것은 사실 "생성자 함수"를 통해 생성된 것이라 볼 수 있다.

그래서 위와 똑같이 console.dir()로 출력했을 때 생성자 함수를 뜻하는 Prototpye의 프로퍼티인 constructor는 함수인 function Object(name, age)를 가리키게 된다.

여기서 Prototype을 이해하려면 생성자 함수를 이해해야 할 것 같다.

생성자 함수

생성자는 "함수"인데 앞에 new 키워드가 붙어서 새로운 객체인 instance를 생성한 후 반환하는 "생성자 함수"가 된다.
위에서 new Object()처럼 말이다.

<script>
  // 생성자 함수 Sub() 선언
  function Sub(name, age){
  	this.name = name;
  	this.age = age;
  }
  
  // 새로운 객체 instance 생성
  var obj = new Sub("hyunwoo", 30);
</script>

그런데 우리는 누가봐도 생성자 함수를 통한 객체의 생성은 매우 불편해보인다.
그냥 객체 리터럴을 통해 var obj = { name:"hyunwoo", age:30}처럼 적으면 훨씬 간단하게 객체를 생성할 수 있는데 말이다.

이 부분에서는 "객체지향 프로그래밍(OOP)"가 대답이 될 수 있겠다.

만약 우리가 게임에서 캐릭터를 만든다면 어떻게 만들 수 있을까?

<script>
  const user1 = {
	name: "John",
  	hp : 85,
  	skill : "fire ball",
  	xp : 0,
  }
  
  const user2 = {
	name: "Jane",
  	hp : 120,
  	skill : "strike",
  	xp : 0,
  }
  
  const user3 = {
	name: "Mike",
  	hp : 120,
  	skill : "blink",
  	xp : 0,
  }
</script>

위처럼 유저 하나 하나의 name, hp, mp, skill 등의 프로퍼티를 생성해줘야한다는 번거로움이 있다.
일일이 생성해야한다면 그만큼 시간과 같이 리소스의 소모도 크고, 실수의 가능성도 커진다.

그래서 위의 예제를 보면 데이터의 xp : 0라는 key와 value가 동일하게 반복되는 것을 볼 수 있다.
이것을 하나의 설계도를 두고 데이터 값만 따로 작성을 한다면 어떨까?

아래의 예제는 아직은 정리를 하지 않은 클래스(Class)를 사용한다.
간단히 말하자면 클래스는 하나의 객체를 만드는 "설계도"이며 "템플릿" 같은 개념이다.

다음 게시글로 클래스를 이해하고 정리해보도록 하겠다. 😄

<script>
  // 유저를 생성할 템플릿 클래스 생성
  class User {
  	constructor(name, hp, skill){
  		this.name = name;
  		this.hp = hp;
  		this.skill = skill;
  		this.xp = 0;
  	}
  }
  
  const user1 = new User("John", 85, "fire ball");
  const user2 = new User("Jane", 120, "strike");
  const user3 = new User("Mike", 120, "blink");
</script>

위처럼 작성 시 이전 예제와 같은 값이 출력이 된다. 훨씬 가독성이 쉬워지고 값을 넣기에도 편리해지고 재사용성이 높아진 것을 볼 수 있다.

이것과 똑같이 Prototype을 통해서 코드의 재사용성을 높일 수 있다.

<script>
  function User(name, hp, skill){
  	this.name = name;
  	this.hp = hp;
  	this.skill = skill;
  }
  
  // prototype을 통한 xp 프로퍼티 생성
  User.prototype.xp = 0;
  
  const user1 = new User("John", 85, "fire ball");
</script>

위처럼 생성자함수의 Prototype를 통해 프로퍼티 xp를 생성했다.
그리고 user1을 console.log()로 확인을 했을 때 아래처럼 출력이 된다.

근데 우리가 생성한 프로퍼티 xp는 보이지 않는데 어디에 있는 것일까?

xp는 바로 Prototype 안에 존재한다.

그래서 만약 xp의 값을 필요할 때 객체 내에 출력되는 프로퍼티는 아니지만 문제없이 접근이 가능하다.

Prototype을 쉽게 생각하자면 조상으로부터 물려받은 "유전자"라고 할 수 있다.

조상 중 운동선수가 있을 때 내가 운동에 대한 재능을 가지고 있다는 것은 모르지만 운동종목에서 나도 모르게 능력을 발휘할 수 있는 그런 개념으로 이해하면 될 것 같다. 😅

여기서 물려받는 개념을 Prototype Chain이라고 할 수 있을 것 같다!

Prototype Chain

나는 강의를 들으면서 "체이닝"이라는 말을 많이 들었다.
체인은 내가 생각하는 🔗 사슬을 말하는 것이니 연결된다는 뜻으로 이해했었는데 체이닝 개념이 정확히 일치한다.

"연쇄적으로 이어지는 동작 방식"이라고 생각을 하면 될 것 같다.

실용적인 예제는 아니지만 개념을 이해를 위해 생활코딩에서 가져온 예제를 살펴보도록 하자.

<script>
  function Ultra(){};
  Ultra.prototype.ultraProp = true; // 이 부분을 주목해야한다.

  function Super(){};
  Super.prototype = new Ultra();

  function Sub(){};
  Sub.prototype = new Super();

  var o = new Sub();
  console.log(o.ultraProp); // 어떤 값이 나올까?
</script>

console.log(o.ultraProp)을 출력하면 어떤 값이 나올까?

나는 처음에 변수 o는 생성자 함수 new Sub()를 통해 생성된 인스턴스이고 function Sub(){}를 보아하니 아무런 프로퍼티를 생성하지 않았으니까 undefined가 나오지 않을까? 라고 생각했다.

하지만 나오는 값은 true가 나온다.

코드를 하니씩 설명을 하자면 이렇다.

<script>
  function Ultra(){}; // 생성자 함수 Ultra() 선언
  Ultra.prototype.ultraProp = true; // Ultra의 Prototype을 통해 프로퍼티 ultraProp 의 키와 값 생성

  function Super(){}; // 생성자 함수 Super() 선언
  Super.prototype = new Ultra(); // Super.prototype을 생성자 함수 Ultra()의 인스턴스로 생성

  function Sub(){}; // 생성자 함수 Sub() 선언
  Sub.prototype = new Super(); // Sub.prototype을 생성자 함수 Super()의 인스턴스로 생성

  var o = new Sub(); // 변수 o를 생성자 함수 Sub()의 인스턴스로 생성
  console.log(o.ultraProp); // true
</script>

보면 "이게 무슨 코드지?"라는 생각을 가질 수 있다. 솔직히 나도 처음 봤을 때 이걸 어떻게 해석해야하는 건지 몰랐다.

근데 보면 공통적인 부분이 많다. 각 인스턴스인 prototype은 각각의 생성자 함수로 순차적으로 생성되고 있는 것을 볼 수 있다.

여기서 Prototype은 "유전자"라고 했다.

보이지는 않지만 현재 생성자 함수 Ultra가 가진 protoype.ultraProp는 아래의 생성자 함수에 영향을 주고 있다.
각각 생성된 인스턴스들을 console.log()를 통해 살펴보도록 하자.

점차 내려가면서 Prototype가 늘어나면서 ultraProp가 존재하는 것을 볼 수 있다.
이것은 Prototype의 상속때문인데 그림으로 쉽게 표현해겠다.

Ultra에서 Prototype을 통해 생성한 ultraProp = true는 내가 설명한 "유전자화"가 되었다.

그래서 상위 객체(인스턴스)인 Ultra로부터 Super가 ultraProp = true를 물려받게 되고

아래의 인스턴스 또한 모두 상속을 받게 된다.

그래서 당사자는 모르지만 가지고 있는 프로퍼티에 접근할 수 있는 것이다.

접근을 통해 나온 결과를 Prototype Chain에 의해 이루어졌다라고 할 수 있을 것 같다.

Prototype을 통해 데이터에 접근할 때 어떤 과정이 일어나는가?

<script>
  function Ultra(){};
  Ultra.prototype.ultraProp = true; // 이 부분을 주목해야한다.

  function Super(){};
  Super.prototype = new Ultra();

  function Sub(){};
  Sub.prototype = new Super();

  var o = new Sub();
  console.log(o.ultraProp); // 어떤 값이 나올까?
</script>

현재 코드를 다시 보자면 ultraProp를 생성한 곳은 Ultra이다.
하지만 변수 o에서 ultraProp에 접근을 했을 때 true가 반환이 되었다.

과정이 어떻게 된 것인지 보도록 하자.

이런 식으로 자신에게서 찾다가 찾지 못하면 상위 객체로 올라가면서 찾아서 결과를 반환하는 것이 Prototype Chain이다.

그리고 중요한 점은 상위 객체로 순차적으로 올라가면서 검색을 했을 때 먼저 나오는 값을 출력한다는 것이다.

---

정리를 마치며 ⛳️

오늘은 진짜 공부한 느낌이 들어서 뿌듯한 것 같다.

내가 몰랐던 부분을 깨닫고 이것을 공부해야지라고 계획을 했는데 열심히 준비를 하면서 정리를 하고 나니 더욱 그런 것 같다.

물론 위에 있는 정보를 여러 곳에서 참고를 했고 나의 이해를 바탕으로 작성이 되었기 때문에 잘못된 부분도 있을 것이라고 생각한다.

그래서 다른 분들께 확인을 받고 수정을 해볼 예정이다.

오랜만에 나의 공부한 기록을 적는데 재미있었다. 다음은 클래스를 정리를 할 건데 기대가 된다. 😄