[JavaScript] class는 교실이 아니라 객체이다

들어가며

최근 참여하고 있는 우아한테크코스 프리코스의 1, 2주차를 지나며 그동안 해오던 것과는 다른 방식인 객체지향 프로그래밍을 사용하여 코드를 작성하기 시작했습니다. 이젠 서로 다른 두 방법을 모두 익히게 되어 이를 통해 프로그래밍 그 자체에 대한 더 깊은 이해로 나아가기 위한 초석이 될 것이라 믿고 있습니다. 그리고 여기에 스스로 익힌 클래스에 대한 내용을 정리해두도록 하겠습니다.
https://time-map-installer.tistory.com/258

<우아한테크코스 2024 프리코스> 1주차 후기: 숫자야구게임, 그런데 객체로 만든다고?

---

소개

JavaScript는 객체 지향 프로그래밍(OOP)을 지원하는 유연한 언어입니다.
ES6에서 도입된 class는 보다 명확하고 직관적인 방식으로 객체를 생성하고 상속하도록 합니다.
JavaScript 클래스의 기본 구조, 사용 방법, 다른 파일에 import하는법과 클래스의 확장에 대해 살펴볼 것입니다.

---

1. 클래스의 기본 구조

JavaScript의 클래스는 주로 constructor, 메서드, 그리고 속성의 세 가지 주요 구성 요소로 이루어져 있습니다

1. Constructor
   • constructor는 클래스로부터 객체를 생성할 때 호출되는 특별한 메서드입니다.
   • 이 메서드는 객체의 초기 상태를 설정하는데 사용합니다.

class Example {
  constructor(value) {
    this.value = value;
  }
}

위의 코드에서, Example 클래스는 value라는 속성을 가지고 있으며, 이 속성은 객체를 생성할 때 constructor를 통해 설정됩니다.
여기에 다른 클래스의 메서드에서 반환되는 값을 설정하여 사용할 수 있습니다.

2. 메서드(method)
   • 메서드는 객체가 수행할 수 있는 행동을 정의합니다.
   • 클래스 내부에서 정의되며, 객체를 통해 호출될 수 있습니다.

class Example {
  constructor(value) {
    this.value = value;
  }

  displayValue() {
    console.log(this.value);
  }
}

위의 코드에서, displayValue 메서드는 객체의 value 속성을 콘솔에 출력합니다.

3. 속성
   • 속성은 객체의 상태를 나타내는 변수를 의미합니다.
   • constructor 내부에서 this 키워드를 사용해서 설정될 수 있습니다.

class Example {
  constructor(value) {
    this.value = value;  // 'value'는 Example 클래스의 속성입니다.
  }
}

위의 코드에서, value는 Example 클래스의 속성으로, 객체의 초기 상태를 설정하는데 사용됩니다.

객체를 생성하고 사용하려면?

const obj = new Example('Hello, World!');
obj.displayValue();  // 출력: Hello, World!

위의 코드에서, new Example('Hello, World!')을 통해 Example 클래스의 인스턴스를 생성하고, displayValue 메서드를 호출하여 value 속성의 값을 출력합니다. 이 방식으로 다른 클래스 내에서 특정 클래스 메서드의 값을 받아서 사용할 수 있습니다.

전체적인 요소를 포함해서 다시 확인해보겠습니다.

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`); 
    // this.name에 받아온 name값을 받아왔기에 this.name을 활용합니다.
  }
}

const animal = new Animal('Animal'); // 'Animal'은 Animal클래스 constructor의 name에 매핑됩니다.
animal.speak(); // 출력: Animal makes a noise.

위 예시에서 Animal 클래스는 name 속성과 speak 메서드를 가지고 있습니다. new 키워드를 사용하여 인스턴스를 생성하면, animal 객체를 통해 메서드를 호출할 수 있습니다.

---

2. 클래스 사용하기

클래스는 객체를 생성하고 관리하는 일종의 템플릿입니다. new 키워드를 사용하여 클래스의 인스턴스를 생성하면, 해당 클래스의 메서드와 속성에 접근할 수 있습니다. 여기서 클래스 괄호에 넣는 특정 값은 메서드로 전달하는 값이라고 볼 수 있습니다.

const myAnimal = new Animal('Dog'); // 'Dog'는 Animal class의 constructor에서 선언되고 사용합니다.
myAnimal.speak(); // 출력: Dog makes a noise.

---

3. 다른 파일에서 클래스 import 하기

모듈 시스템을 사용하면 클래스를 다른 파일로 분리하고 필요한 곳에서 불러와 사용할 수 있습니다. 예를 들어, Animal 클래스가 정의된 Animal.js 파일이 있다면, 이를 다른 파일에서 사용할 수 있습니다.

// Animal.js
export class Animal {
  // ... 클래스 정의
}

// main.js
import { Animal } from './Animal.js';

const myAnimal = new Animal('Cat');
myAnimal.speak();

---

4. 클래스 확장하기

클래스는 extends 키워드를 사용하여 다른 클래스로부터 상속받을 수 있습니다. 이를 통해 부모 클래스의 모든 메서드와 속성을 사용할 수 있으며, 필요에 따라 오버라이드하거나 새로운 메서드와 속성을 추가할 수 있습니다.

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

const myDog = new Dog('Rex');
myDog.speak(); // 출력: Rex barks.

클래스 확장은 근본이 되는 클래스에 공통적인 기능을 정의하고, 이를 상속받아 추가 기능이나 수정된 기능을 가진 새로운 클래스를 만들 때 유용합니다.
예를 들어, 웹 애플리케이션에서 다양한 UI 컴포넌트를 다루어야 합니다.

• BaseComponent라는 클래스에 모든 컴포넌트의 공통 기능을 정의하고,
• ButtonComponent 클래스에서는 이를 상속받아 버튼 특유의 기능을 추가합니다.
  이렇게 확장을 하면서 코드의 재사용성이 향상되고, 각 컴포넌트의 관리가 훨씬 수월해집니다.

---

Plus. 확장 불가능한 클래스

Object.freeze 메서드를 사용하여 클래스의 확장을 방지할 수 있습니다. 이 방법은 클래스의 모든 인스턴스가 동일한 메서드와 속성을 갖도록 하여 일관성을 유지하려 할 때 유용합니다.

class Cat extends Animal {
  // ... 클래스 정의
}

Object.freeze(Cat);

class BigCat extends Cat {
  // 이 코드는 에러를 발생시킬 것입니다.
}

---

결론, 그리고 질문

JavaScript의 클래스는 코드의 구조를 개선하고, 객체의 생성과 관리를 보다 효율적으로 수행할 수 있도록 도와줍니다. 클래스의 확장성과 모듈화는 대규모 애플리케이션 개발에 있어 필수적인 요소이며, 이를 통해 보다 유지보수가 용이하고 확장 가능한 코드베이스를 구축할 수 있습니다.

많은 백엔드 및 JavaScript Backend 개발환경에서는 객체지향 프로그래밍을 활용해서 프로그램을 개발합니다.
하지만 현재 사용되고 있는 프론트엔드 로직 개발 방향성은 OOP에서 함수형 프로그래밍으로 대체되는 상황입니다. 이렇게 변화하는 이유는 무엇일까요?

---

End