[JS] 클래스 (Class)

1. 자바스크립트의 클래스(Class)란?

자바스크립트의 클래스는 객체를 만드는 설계도입니다. 쉽게 말해, 클래스가 붕어빵 틀이라면 클래스로 만든 객체는 그 틀로 만든 붕어빵입니다. 클래스는 객체지향 프로그래밍의 개념을 지원하며, 여러 객체를 생성할 때 공통되는 속성과 메서드를 정의할 수 있습니다. 자바스크립트의 클래스는 ES6(ECMAScript 2015)에서 도입되었습니다.

 

2. 클래스와 인스턴스, 붕어빵 틀과 붕어빵 관계

 

클래스는 붕어빵 틀처럼 어떤 물건을 찍어내는 틀이라고 생각할 수 있습니다. 그 틀에는 붕어빵의 모양과 재료(속성) 등이 정의되어 있습니다. 예를 들어, 붕어빵 틀에는 크기, 모양, 안에 팥이나 슈크림 같은 내용물이 무엇인지가 정해져 있습니다.

객체는 그 틀로 찍어낸 붕어빵입니다. 같은 틀로 만든 붕어빵이지만, 각 붕어빵은 조금씩 다를 수 있습니다. 팥이 들어간 붕어빵도 있고, 슈크림이 들어간 붕어빵도 있을 수 있는 것처럼 말이죠.

class 붕어빵틀 {
  constructor(속재료) {
    this.속재료 = 속재료;
  }

  굽기() {
    console.log(`${this.속재료} 붕어빵이 구워졌습니다!`);
  }
}

const 팥붕어빵 = new 붕어빵틀('팥');
팥붕어빵.굽기();  // 팥 붕어빵이 구워졌습니다!

const 슈크림붕어빵 = new 붕어빵틀('슈크림');
슈크림붕어빵.굽기();  // 슈크림 붕어빵이 구워졌습니다!

 

여기서 붕어빵틀은 클래스이고, 팥붕어빵과 슈크림붕어빵은 그 클래스를 기반으로 만들어진 객체(붕어빵)입니다.

 

3. 클래스 사용하기

1. 클래스 정의하기

클래스를 정의하는 방법은 class 키워드를 사용합니다. 클래스는 주로 속성(프로퍼티)과 메서드(동작)로 구성됩니다.

class Person {
  // 생성자: 객체가 생성될 때 호출되어 초기값을 설정합니다.
  constructor(name, age) {
    this.name = name;  // 'this'는 생성되는 객체 자체를 가리킵니다.
    this.age = age;
  }

  // 메서드: 객체의 동작을 정의합니다.
  greet() {
    console.log(`안녕하세요, 저는 ${this.name}이고 나이는 ${this.age}입니다.`);
  }
}

• constructor: 클래스가 객체를 생성할 때 호출되는 메서드입니다. 여기서 객체의 초기 상태(속성)를 설정합니다.
• this: 현재 생성된 객체를 가리킵니다. 생성자 내에서 this.name이나 this.age처럼 객체의 속성을 정의합니다.
• 메서드: greet() 같은 메서드는 객체가 수행할 동작을 정의합니다

2. 객체 생성하기

정의된 클래스를 바탕으로 객체를 생성하려면 new 키워드를 사용합니다.

// Person 클래스로부터 객체를 생성합니다.
const person1 = new Person('Alice', 30);
const person2 = new Person('Bob', 25);

// 메서드를 호출해 객체의 동작을 수행합니다.
person1.greet();  // 안녕하세요, 저는 Alice이고 나이는 30입니다.
person2.greet();  // 안녕하세요, 저는 Bob이고 나이는 25입니다.

• new 키워드: 클래스로부터 새로운 객체를 생성합니다. 이때 생성자가 자동으로 호출됩니다.
• 객체 사용: 생성된 객체(person1, person2)는 클래스의 속성과 메서드를 사용합니다.

참고로 인스턴스는 특정 클래스에서 생성된 객체를 의미합니다. 클래스는 객체를 생성하기 위한 틀(설계도)이고, 그 클래스로 만들어진 각각의 객체가 인스턴스라고 부릅니다. 

 

+ 객체와 인스턴스

• 객체(Object): 자바스크립트에서 객체는 데이터(속성)와 기능(메서드)을 담고 있는 자료 구조입니다. 객체는 변수에 할당할 수 있고, 프로그램에서 사용됩니다. 예시에서 person은 하나의 객체입니다.

const person = {
  name: 'Alice',
  age: 30,
  greet() {
    console.log(`안녕하세요, 저는 ${this.name}입니다.`);
  }
};

person.greet(); // 안녕하세요, 저는 Alice입니다.

• 인스턴스(Instance): 인스턴스는 특정 클래스에서 생성된 객체를 의미합니다. 클래스는 객체를 생성하기 위한 틀(설계도)이고, 그 클래스로 만들어진 각각의 객체가 인스턴스라고 부릅니다. 예를 들어 위의 코드 예시 중에서, person1과 person2는 Person 클래스의 인스턴스입니다.

정리하면, 객체는 프로그램에서 사용되는 데이터와 기능을 담고 있는 자료 구조이고, 인스턴스는 클래스에서 만들어진 객체입니다. 객체라는 더 넓은 개념 속에 인스턴스가 포함되어 있다고 보면 됩니다.

 

3. 확장하기

클래스를 더 확장하고 싶다면 상속을 사용할 수 있습니다. 다른 클래스의 기능을 재사용하거나 확장할 때 유용합니다.

// Person 클래스를 상속받아 새로운 Student 클래스를 정의합니다.
class Student extends Person {
  constructor(name, age, grade) {
    super(name, age);  // 부모 클래스(Person)의 생성자를 호출합니다.
    this.grade = grade;
  }

  study() {
    console.log(`${this.name}은/는 ${this.grade}학년이며 열심히 공부하고 있습니다.`);
  }
}

const student1 = new Student('Charlie', 20, 3);
student1.greet();  // 안녕하세요, 저는 Charlie이고 나이는 20입니다.
student1.study();  // Charlie은/는 3학년이며 열심히 공부하고 있습니다.

• extends 키워드: 다른 클래스를 상속받을 때 사용합니다.
• super(): 부모 클래스의 생성자를 호출할 때 사용됩니다. 부모 클래스에서 정의된 속성과 메서드를 사용할 수 있습니다.

 

4. 왜 사용할까?

 

클래스를 사용하는 이유는 코드를 더 효율적이고, 유지보수하기 쉽게 만들기 위해서입니다.

 

재사용성

 

클래스를 사용하면 반복적인 코드를 줄일 수 있습니다. 예를 들어, 같은 속성과 메서드를 가진 객체를 여러 개 만들어야 할 때, 클래스 없이 각각의 객체를 모두 수동으로 정의하면 코드가 중복됩니다. 하지만 클래스를 사용하면, 하나의 클래스로 여러 객체를 만들 수 있어 코드가 더 짧고 효율적입니다.

class Dog {
  constructor(name, breed) {
    this.name = name;
    this.breed = breed;
  }

  bark() {
    console.log(`${this.name}가 짖습니다!`);
  }
}

const dog1 = new Dog('Max', 'Bulldog');
const dog2 = new Dog('Bella', 'Poodle');
dog1.bark(); // Max가 짖습니다!
dog2.bark(); // Bella가 짖습니다!

 

클래스를 사용하지 않고 객체를 수동으로 정의하려면, name, breed를 중복으로 정의해줘야 합니다.

 

유지보수 용이성

 

클래스를 사용하면 코드 관리가 더 쉬워집니다. 클래스에 정의된 속성이나 메서드를 한 곳에서 수정하면, 그 클래스를 사용하는 모든 객체에 자동으로 적용됩니다. 예를 들어, 어떤 동작(메서드)을 바꾸고 싶을 때, 각 객체를 수정할 필요 없이 클래스를 수정하기만 하면 됩니다.

 

상속을 통한 확장성

 

클래스를 사용하면 상속을 통해 기존 클래스를 확장할 수 있습니다. 기본적인 기능을 하는 클래스에 추가적인 기능을 더한 클래스를 만들 수 있기 때문에, 코드를 중복해서 작성할 필요가 없습니다.

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

  eat() {
    console.log(`${this.name}가 먹습니다.`);
  }
}

class Cat extends Animal {
  meow() {
    console.log(`${this.name}가 야옹합니다.`);
  }
}

const myCat = new Cat('Kitty');
myCat.eat(); // Kitty가 먹습니다.
myCat.meow(); // Kitty가 야옹합니다.

 

 

참고 아티클

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes