Tag: class 구현

function으로 구현하는 class의 동작 방식

‘문법적 설탕’은 통용되는 단어이지만 어감이 이상한 건 어쩔 수 없다. 의역하여 ‘편리한 구문 용법’ 정도가 더 이해하기 쉬울 것 같다.

위키에서 syntactic sugar의 정의는 다음과 같다.

In computer science, syntactic sugar is syntax within a programming language that is designed to make things easier to read or to express.
컴퓨터 과학 분야에서 ‘편리한 구문 용법’이란 읽기 쉽고 표현하기 쉽도록 구성된 프로그래밍 언어 내의 구문이다.

즉, 달콤한 초콜릿처럼 손이 자주 가는 구문이라고 볼 수 있을 것 같다.

자바스크립트는 처음부터 모든 기능을 갖고 태어나지 않았으므로 ES 버전으로 대표되는 추가 기능은 기존의 문법으로 구현된 것이 많다.

class 또한 기존의 OOP에서 차용한 개념을 자바스크립트에서 구현한 것으로 구현 방식은 자바스크립트의 문법을 벗어나지 않는다.

따라서 사용자가 선언하고 사용하는 방식은 다르지만 다음에서 확인할 두 코드의 작동 방식은 동일하다.

function으로 선언된 부분이 기본 동작 방식이며 class가 선언되면 이 function과 완전히 동일한 방식으로 구현된다.

같은 기능을 구현할 때 function과 class 중 어떤 것에 더 선뜻 손이 가는지를 묻는다면 설탕의 의미를 생각해볼 수 있다.

function 사용

function createGame( user, point ) {
  this.user = user;
  this.point = point;
}

createGame.prototype.addPoint = function() { this.point++; };

const myGame = new createGame("Yoon", 0);

myGame.addPoint();

class 사용

class CreateGame {
  constructor (user, point) {
    this.user = user;
    this.point = point;
  }
  addPoint() { this.point++; }
}

const myGame = new CreateGame("Yoon", 0);
myGame.addPoint();