자바스크립트에 클래스가 필요한 이유

Published: at 오후 02:00

ES6에 자바스크립트에 클래스가 추가되었다. 하지만, 기존에도 자바스크립트는 클래스 없이도 프로토타입을 이용해 객체를 생성할 수 있었다. 그렇다면, 자바스크립트에 클래스가 필요한 이유는 무엇일까?

목차

펼치기

클래스의 탄생 배경

자바스크립트는 프로토타입 기반 언어이다. 프로토타입 기반 언어는 클래스 기반 언어와 다르게 객체를 생성할 때 다른 객체를 참조하여 상속을 구현한다. 이러한 특징 때문에 자바스크립트는 클래스 기반 언어와 다르게 객체를 생성하는 방법이 다르다.

하지만, 자바스크립트의 인기가 늘면서, 기존 클래스 기반 언어를 사용해온 개발자들이 자바스크립트를 사용하게 되었다. 이러한 개발자들은 자바스크립트의 프로토타입 기반 언어의 특징을 이해하기 어려워하는 경우가 많았다. 때문에 다른 프로그래밍 언어들과의 호환성, 앞으로의 자바스크립트의 미래를 위해서라도 클래스 문법의 도입은 필수적이었다고 볼 수 있다.

객체 생성 및 상속 방법 비교

프로토타입을 이용한 객체 생성 방법

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayHello = function() {
  console.log(`안녕하세요, ${this.name}입니다.`);
}

Person.staticMethod = function() {
  console.log('static method');
}

const person = new Person('홍길동', 30);
person.sayHello();

클래스 문법을 이용한 객체 생성 방법

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

  sayHello() {
    console.log(`안녕하세요, ${this.name}입니다.`);
  }

  static staticMethod() {
    console.log('static method');
  }
}

const person = new Person('홍길동', 30);
person.sayHello();

프로토타입을 이용한 상속 구현 방법

function Developer(name, age, language) {
  Person.call(this, name, age);
  this.language = language;
}

Developer.prototype = Object.create(Person.prototype);
Developer.prototype.constructor = Developer;

Developer.prototype.writeCode = function() {
  console.log(`${this.language}로 코드를 작성합니다.`);
}

const developer = new Developer('김철수', 25, 'JavaScript');
developer.sayHello();
developer.writeCode();

클래스 문법을 이용한 상속 구현 방법

class Developer extends Person {
  constructor(name, age, language) {
    super(name, age);
    this.language = language;
  }

  writeCode() {
    console.log(`${this.language}로 코드를 작성합니다.`);
  }
}

const developer = new Developer('김철수', 25, 'JavaScript');
developer.sayHello();
developer.writeCode();

클래스 문법의 장점

문법적으로 비교해 봤을때, 다음과 같은 장점이 있다.

클래스 활용

instanceof 연산자 활용

instanceof 연산자를 사용하면 객체가 특정 클래스에 속하는지 아닌지를 확인할 수 있습니다. 특히 커스텀 에러를 만들고 확장해서 사용할때 유리하다.

// 자바스크립트 자체 내장 에러 클래스 Error의 '슈도 코드'
class Error {
  constructor(message) {
    this.message = message;
    this.name = "Error"; // (name은 내장 에러 클래스마다 다릅니다.)
  }
}

class ValidationError extends Error {
  constructor(message) {
    super(message);
    this.name = "ValidationError";
  }
}

try {
  let user = readUser('{ "age": 25 }');
} catch (err) {
  if (err instanceof ValidationError) {
    alert("Invalid data: " + err.message);
  } else if (err instanceof SyntaxError) {
    alert("JSON Syntax Error: " + err.message);
  } else {
    throw err;
  }
}

추상 클래스 활용

abstract 키워드를 사용하면 추상 클래스를 만들 수 있습니다. 추상 클래스는 직접 인스턴스를 만들 수 없고, 다른 클래스에서 상속받아 사용해야 합니다. 주로, 추상 클래스는 상속받은 클래스에서 구현해야 하는 메서드를 정의할 때 사용한다. 이를 통해 코드의 구조를 더 명확하게 할 수 있다.

abstract class Animal {
  abstract makeSound(): void;

  move(): void {
    console.log("roaming the earth...");
  }
}

class Dog extends Animal {
  makeSound() {
    console.log("woof");
  }
}

const dog = new Dog();
dog.makeSound();
dog.move();

private 필드 활용

클래스 내부에서만 접근할 수 있는 private 필드를 사용하면 클래스 내부의 데이터를 보호할 수 있다. private 필드는 클래스 내부에서만 접근할 수 있기 때문에 외부에서 직접 접근할 수 없다. 이를 통해 클래스의 데이터를 보호하고, 데이터의 무결성을 보장할 수 있다.

class Counter {
  #count = 0;

  increment() {
    this.#count++;
  }

  decrement() {
    this.#count--;
  }

  getCount() {
    return this.#count;
  }
}

const counter = new Counter();
counter.increment();
counter.increment();
counter.decrement();
console.log(counter.getCount()); // 1

static 메서드 활용

static 키워드를 사용하면 클래스의 인스턴스를 만들지 않고도 클래스의 메서드를 호출할 수 있다. static 메서드는 클래스의 인스턴스와 관계없이 클래스의 동작을 정의할 때 사용한다. 주로, 유틸리티 함수나 팩토리 함수를 만들 때 사용한다. 이런식으로 Math에 어떤 메서드가 있는지 다 알지 않아도, IDE의 코드제안 기능을 활용해 연관된 메서드를 사용할 수 있다.

class Math {
  static add(a, b) {
    return a + b;
  }

  static subtract(a, b) {
    return a - b;
  }
}

console.log(Math.add(1, 2)); // 3
console.log(Math.subtract(3, 2)); // 1

데이터 시각화 및 애니메이션

데이터 시각화나 애니메이션을 구현할때도 활용할 수 있다. 클래스를 활용할때 생기는 복잡한 로직을 캡슐화, 구조화 하여 가독석을 높일 수 있다. 그로인해 재사용성과 유지보수성이 올라가는 효과를 볼 수 있다.

class Chart {
  constructor(data) {
    this.data = data;
  }

  draw() {
    console.log('Drawing chart with data:', this.data);
  }
}

class BarChart extends Chart {
  draw() {
    console.log('Drawing bar chart with data:', this.data);
  }
}

class LineChart extends Chart {
  draw() {
    console.log('Drawing line chart with data:', this.data);
  }
}

function drawAnyChart(chart) {
  chart.draw();
}

const barChart = new BarChart([10, 20, 30]);
const lineChart = new LineChart([40, 50, 60]);

drawAnyChart(barChart); // Drawing bar chart with data: [10, 20, 30]
drawAnyChart(lineChart); // Drawing line chart with data: [40, 50, 60]

결론

자바스크립트는 프로토타입 기반 언어이지만 클래스가 필요한 이유는 다음과 같다.

따라서, 클래스 문법을 이용하면 코드의 구조를 더 명확하게 할 수 있고, 객체 지향 프로그래밍의 개념을 더 쉽게 표현할 수 있다. 클래스 문법을 활용하면 코드의 가독성을 높이고, 유지보수성을 높일 수 있다.

Reference