[JavaScript] 클린 코드 - 5. 클래스

1. 함수보단 클래스를 사용한다.

함수로 상속을 구현하기는 어렵다. 상속이 필요하다면 클래스를 사용하는 것이 좋다.

// BAD
const Animal = function (age) {
  if (!(this instanceof Animal)) {
    throw new Error("Instantiate Animal with `new`");
  }

  this.age = age;
};

Animal.prototype.move = function () {};

const Mammal = function (age, furColor) {
  if (!(this instanceof Mammal)) {
    throw new Error("Instantiate Mammal with `new`");
  }

  Animal.call(this, age);
  this.furColor = furColor;
};

Mammal.prototype = Object.create(Animal.prototype);
Mammal.prototype.constructor = Mammal;
Mammal.prototype.liveBirth = function liveBirth() {};

const Human = function (age, furColor, languageSpoken) {
  if (!(this instanceof Human)) {
    throw new Error("Instantiate Human with `new`");
  }

  Mammal.call(this, age, furColor);
  this.languageSpoken = languageSpoken;
};

Human.prototype = Object.create(Mammal.prototype);
Human.prototype.constructor = Human;
Human.prototype.speak = function speak() {};

// GOOD!
class Animal {
  constructor(age) {
    this.age = age;
  }

  move() {
    // ...
  }
}

class Mammal extends Animal {
  constructor(age, furColor) {
    super(age);
    this.furColor = furColor;
  }

  liveBirth() {
    // ... 
  }
}

class Human extends Mammal {
  constructor(age, furColor, languageSpoken) {
    super(age, furColor);
    this.languageSpoken = languageSpoken;
  }

  speak() {
    // ...
  }
}

2. 메서드 체이닝을 사용한다.

메서드 체이닝

메서드가 객체를 반환할 때 반환된 객체를 통해 다른 함수를 호출하는 과정
여러 메서드 호출을 연결해 하나의 실행문으로 표현할 수 있다.

메서드 체이닝을 사용하면 코드를 간결하고 이해하기 쉽게 만들어준다.

사용하는 방법은 연결하고 싶은 메서드의 반환 값으로 this를 리턴하면 된다.

// BAD
class Car {
  constructor() {
    this.make = "Honda";
    this.model = "Accord";
    this.color = "white";
  }

  setMake(make) {
    this.make = make;
  }

  setModel(model) {
    this.model = model;
  }

  setColor(color) {
    this.color = color;
  }

  save() {
    console.log(this.make, this.model, this.color);
  }
}

const car = new Car();
car.setColor("pink");
car.setMake("Ford");
car.setModel("F-150");
car.save();

// GOOD
class Car {
  constructor() {
    this.make = "Honda";
    this.model = "Accord";
    this.color = "white";
  }

  setMake(make) {
    this.make = make;
    return this; // Method Chaning
  }

  setModel(model) {
    this.model = model;
    return this; // Method Chaning
  }

  setColor(color) {
    this.color = color;
    return this; // Method Chaning
  }

  save() {
    console.log(this.make, this.model, this.color);
    return this; // Method Chaning
  }
}

const car = new Car().setColor("pink").setMake("Ford").setModel("F-150").save();

참조

저작자표시 비영리

1. 함수보단 클래스를 사용한다.

2. 메서드 체이닝을 사용한다.

참조

티스토리툴바