[TIL] 1일차, 객체지향 JavaScript 프로토타입

오늘은 CodeState 의 Section2 의 첫날임과 동시에, 객체지향 JavaScript 의 프로토타입과 관련된 스프린트를 진행하였다.

기존에 국비교육을 받으며 Java 를 배울때에, 내가 알고있던 지식은 메소드 호출을 통해 함수를 실행하는 방법이었다.

let counter1 = {
  value: 0,
  increase: function() {
    this.value++ // 메소드 호출을 할 경우, this는 counter1을 가리킵니다
  },
  decrease: function() {
    this.value--
  },
  getValue: function() {
    return this.value
  }
}

counter1.increase()
counter1.increase()
counter1.increase()
counter1.decrease()
counter1.getValue() // 2

이러한 방식이 단순 객체를 사용한 상태에서 카운터를 구현한 싱글톤 패턴의 함수이다.
메소드 호출 방식이기 때문에 JavaScript 에서 흔하게 쓰는 화살표 함수 방식으로는 작성하지 않고, 단순히 메소드만 계속해서 반복해서 호출하는 식으로 count 를 하고 있다.

기본적으로 JavaScript는 프로토타입 기반 언어라는 표현이 쓰여지고 있었는데, 여기서 프로토타입(Prototype)은 원형 객체를 의미한다고 한다.

즉, 모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다는 의미이다.

여기서 다음과 같은 예제가 주어지고 있다.

class Human {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sleep() {
    console.log(`${this.name}은 잠에 들었습니다`);
  }
}

let kimcoding = new Human('김코딩', 30);

Human.prototype.constructor === Human;       // 1번
Human.prototype === kimcoding.__proto__;     // 2번
Human.prototype.sleep === kimcoding.sleep;   // 3번

여기서 1번과 2번, 3번의 실행 결과는 어떻게나올까 ??

위와 같은 결과창을 개발자도구에서 확인 할 수 있는데, 모두 동일하게 true 값을 리턴하고 있다.

나중에 다시한번 되돌아보며 이해할수 있도록, 프로토타입과 관련된 공식문서 링크를 첨부하도록 하겠다.

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object_prototypes

스프린트를 진행 할 때에도 기본적으로 만들어져있는 객체를 다른곳에서 상속받아서, 새로운 key 를 추가하거나 기존에 상속받은 객체의 key 의 value 값을 변경하는 식으로 스프린트를 진행하였다.

여기서 새로 알게된 지식은 두가지이다.

1. class example1 extend example2
   constructor(불러올 요소){
   super();
   .
   .
   .
   }의 형식을 통해 상속받을 객체를 클래스에서 선언하고,
   super() << 을 통해서 적용시키는 방식을 기존에 아무것도 모르고 사용했었지만
   testCase 를 진행하면서 다시금 알게 되었다.

2. 클래스 내부에서 메소드를 만들어 준 후, 메소드를 응용해서 새로운 값을 return 하는 방식을 스프린트를 진행하며서 익히게 되었는데,
   super();
   .
   .
   .
   this.treasureList = [];

   newArr(treasure) {
   this.treasureList.push(treasure);
   }

위와 같은 형식으로 클래스 내부에서 새로운 배열을 가져와서 초기화 시킨 후,
아래에 새로 생성한 메소드를 통해서 값을 추가시키고 삭제시키거나 증감하는 과정에 대해 실습하였다.

그냥 머리로만 이해하고 넘어갔던 내용이 1~2주만 지나도 가물가물 했던 경험이 있기에, 앞으로도 잘 몰랐던 부분이나 이해가 잘 되지않는 부분은 TIL 을 작성하면서 되새김질 해야겠다.