[번역] 자바스크립트 클래스는 해롭다

[sbyeol3]

원문 : https://calvin.hashnode.dev/javascript-classes-are-harmful

꽤 대담한 표현이지만, 자바스크립트를 좀 다뤄본 개발자라면 다들 느끼는 감정일 겁니다.
자바스크립트는 제대로 배우지 않으면 나쁜 코드를 작성하게 됩니다. 그러나 이 점은 반대로 자바스크립트를 숙달하지 않고도 빠르게 개발할 수 있다는 장점이 되기도 합니다. 자바스크립트의 이런 점이 프로그래밍의 두 가지 중요한 패러다임으로 빠지기 전까지 오랫동안 지속되어서는 안됩니다.

• 프로토타입 상속
• 함수형 프로그래밍

자바스크립트 창조자가 이러한 기둥들을 만든 것은 아니지만 자바스크립트는 두 패러다임을 많은 사람들에게 보여주었습니다.

생성자는 항상 틀리다

// constructor function
function Person () {
    this.name = 'John',
    this.age = 23
}

// create an object
const person = new Person();

여러분이 생성자 함수를 만들고 그 함수를 상속할 때 자바스크립트가 가지는 능력을 모두 사용할 순 없습니다.

• 생성자 함수에서 객체를 반환하는 것은 프로토타입 체인을 무너뜨리는데 이는 더 이상 새로운 객체에 this가 바인딩되지 않는다는 뜻입니다.
• this를 사용할 수 없으므로 진짜 팩토리 함수보다 덜 유연합니다.
• strict 모드를 사용하지 않고 생성자 함수를 new로 호출하는 것을 까먹는다면, this에 할당한 모든 것들이 전역 네임스페이스로 이동합니다. 이 점이 아주 치명적이죠.

자바스크립트는 어떠한 함수든 새로운 객체를 반환할 수 있으므로 생성자 함수가 필요하지 않습니다.

객체 리터럴을 사용하거나

const dog = {
    name: 'Naya',
    sex: 'female',
    age: 2,
    breed: 'Rottweiler mix'
};

**Object.create()**를 사용하거나

const person = {
  isHuman: false,
  printIntroduction: function() {
    console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
  }
};

const me = Object.create(person);

me.name = 'Matthew'; // "name" is a property set on "me", but not on "person"
me.isHuman = true; // inherited properties can be overwritten

me.printIntroduction();
// expected output: "My name is Matthew. Am I human? true"

동적 객체 확장(dynamic object extension) 을 사용하면 우리가 필요한 모든 것들을 가질 수 있습니다.

  const dynamic1 = "Marks";
  const dynamic2 = "Age";
  const user = {
      Name : "GeeksForGeeks",
      [dynamic1] : "57",
      [dynamic2] : "42"
    };

팩토리 함수란?

function createJelly() {
  return {
    type: 'jelly',
    colour: 'red'
    scoops: 3
  };
}

자바스크립트에서 팩토리 함수란 new가 필요하지 않고, 전역 공간을 오염시킬 위험성이 없는 생성자 함수입니다.

클래스 상속

클래스 상속은 일반적으로 하나의 조상으로부터 상속받을 수 있으므로 나중에 곤란한 상황에 놓여질 수 있습니다.
개발자들은 보통 모든 OO 디자인이 결국 잘못됐다는 걸 알게 됩니다.

Elliot에 의하면 자식과 부모 클래스의 긴밀함은 모듈식 코드와 재사용 가능한 코드의 정반대에 놓이게 된다고 합니다. 무엇으로부터 무엇을 상속받는지를 다시 구성하기 위해 코드베이스로 다시 돌아가야 하지만 완전히 리팩토링하기에는 결합도가 너무 높을 수 있습니다.

어플리케이션이 커질 수록, 문제는 더욱 심각해지며 클래스의 혼잡함이 가중되어 버그가 나타나면 한 군데가 아니라 버그와 관련된 모든 코드를 고쳐야 할 수 있습니다.

클래스는 해롭습니다

꽤나 대담한 문장이지만 Eliiot은 소프트웨어 재작성과 복제 문제에 의해 큰 기업에서 낭비되는 시간의 양이 더 중요하다고 생각합니다.
큰 기업의 경우 어느정도 여유를 가지고 수정할 수는 있지만 스타트업은 그럴 여유가 없습니다.
ES6은 새로운 문서에서 클래스 패턴을 확장함으로써 이러한 문제를 더 나쁘게 만들었고, 수많은 포스팅과 책에서 클래스의 사용을 강조합니다.

더 깨끗한 코드

자바스크립트 코드에서 생성좌 클래스 상속을 제거한다면

• 읽고 쓰기가 더 쉬워지며
• 더 유연해지고
• 더 표현적인 코드가 됩니다.

언어의 특성에 대해 열린 마음을 가지는 것이 대중적이지만, 무엇이 옳은 방법이고 그른 방법인지는 분명히 있습니다. 올바른 방법을 선택하세요. ~ Eric Elliott