[JavaScript] ProtoType에 대한 이해

객체지향

클래스는 객체지향 프로그래밍이 기반인 언어에서 필수적인 역할을 한다. 클래스는 코드의 재사용성을 높여주고, 가독성을 올려준다. 필자는 저번주 내내 BlackJack 구현에 메달렸었다. 제일 자신있는 언어인 Java로 객체지향을 상기시키면서 React의 Component, Javascript에서의 ProtoType을 통한 객체지향에 대비했다. 객체지향을 이용한 BlackJack 하나, 객체지향을 이용하지 않고 통으로 코딩한 BlackJack 하나를 구현했는데 처음에는 통으로 코딩하는것이 쉬웠지만 완성에 가까워질수록 코드가 뒤죽박죽이 되어 과거의 내가 무엇을 코딩했는지 인지하기 어려웠다.(GitHub) 객체 지향의 필요성을 절감하고 객체지향으로의 이식을 생각했었는데 "어차피 자바스크립트 공부용으로 코딩 할 거 바로 자바스크립트로 짜야겠다" 라고 생각해 바로 자바스크립트에 뛰어들었다.

JavaScript에서의 객체지향

참고링크 ES6 버전에서 자바스크립트는 class의 기능이 생겼다. 하지만 문법적 추가일 뿐 자바스크립트가 class 기반이 된 것은 아니란다. 대신 Prototype이라는 것으로 class의 역할들을 대체한다. Prototype으로 class의 상속, 재사용 등을 흉내내면서 객체지향 프로그래밍이 가능하다. 오늘은 그것을 알아보고 실제로 코드 작성까지 해볼것이다.

자바스크립트에서의 class 예시

function Apple (type) {
    this.type = type;
    this.color = "red";
    this.getInfo = function() {
        return this.color + ' ' + this.type + ' apple';
    };
}
var apple = new Apple('macintosh');
apple.color = "reddish";
alert(apple.getInfo());

가장 기본적인 함수를 이용한 방법이다. 함수를 선언하고 new로 객체를 만들어서 사용한다. this를 이용하여 메서드를 정의하고 java에서의 클래스위 비슷하게 사용할 수 있다. 하지만 이 구문의 문제는 객체를 선언할때마다 getInfo()를 생성한다는 것이고 이것은 효율적이지 못하다. 이것을 prototype을 이용하여 바꾸면

function Apple (type) {
    this.type = type;
    this.color = "SpaceGray";
}

Apple.prototype.getInfo = function() {
    return this.color + ' ' + this.type + ' apple';
};

다음과 같이 되고 이렇게 prototype이라는 빈 객체에 값을 넣어두고 생성된 apple이라는 객체는 새로 만든 값을 가져오는게 아니라 prototype 객체에 있는 값을 가져오는 것이다.(prototype 빈 객체에 넣는 값은 type과 color가 될 것이다.)

마치며

이제는 실전이다. javascript를 이용한 BlackJack을 만들것이다. 카드, 딜러, 플레이어 등 여러가지 객체가 필요할것이고 그 객체들의 유기적인 결합이 주 목표이다. 객체지향을 빠르게 확립하고 뒤에 공부할 Component의 사용을 더 용이하게 할 것이고 면접질문에 대한 준비도 확실하게 할 것이다.