클래스

2ㅣ2ㅣ·2024년 4월 2일

JavaScript

목록 보기

11/14

지난 포스팅에서 new 바인딩을 통해 프로토타입의 상속이 어떻게 이루어지는지 살펴봤다. 이번에는 그 내용을 바탕으로, 클래스를 통해 해당 개념들을 어떻게 더 효율적으로, 그리고 체계적으로 활용할 수 있는지 탐구해보려 한다. 클래스는 코드의 재사용성을 높이고 확장 가능한 아키텍처를 구성하는 데 있어 필수적인 요소이며, 이를 통해 더욱 견고하고 유지보수가 용이한 소프트웨어를 만들 수 있다.

객체 ❓

자바스크립트에서 객체는 원시 타입을 제외한 모든 것을 포함한다. 즉, 클래스도 객체 타입에 해당한다. 객체는 데이터와 함수를 한데 묶은 컨테이너다. 이러한 컨테이너는 키와 값을 가진 프로퍼티의 집합으로 구성되며, 각 키는 객체 내에서 유일해야 한다.

메서드 ❓

객체 내부에서 정의된 함수를 메서드라고 부른다. 이 메서드는 객체의 동작을 설명하고, 객체가 수행할 수 있는 작업을 정의한다.

자바스크립트에서 객체를 만드는 방법 ❗️

자바스크립트에서는 크게 세 가지 방법으로 객체를 만들 수 있다. 객체 리터럴, 생성자 함수, 그리고 클래스 이다.

객체 리터럴

가장 간단한 방법으로, {}를 사용해 객체를 만들고 그 안에 프로퍼티와 메서드를 직접 넣는다. 이 방법은 간단한 객체를 만들 때 편리하지만, 동일 구조의 객체를 여러 개 만들려면 번거롭다.

생성자 함수

new 키워드를 사용해 객체를 만드는 방법으로, 같은 구조의 객체를 여러 개 만들 때 유용하다. 공통적인 속성은 생성자 함수에 넣고, 각 객체마다 다른 값을 가질 수 있다. 이는 앞선 This(2) 포스팅에서 살펴 본 바가 있다.

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.greet = function() {
    console.log('Hello, my name is ' + this.name + '!');
  };
}

const person1 = new Person('John', 30);
person1.greet(); // "Hello, my name is John!"

클래스

최신 자바스크립트에서는 class 키워드를 사용해 클래스를 정의한다. 클래스는 객체의 청사진을 제공하며, new 키워드를 사용해 이 청사진을 바탕으로 객체 인스턴스를 생성한다. 클래스는 코드의 재사용성과 확장성을 높여 주며, 객체 지향 프로그래밍의 이점을 제공한다.

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

  greet() {
    console.log('Hello, my name is ' + this.name + '!');
  }
}

const person1 = new Person('John', 30);
person1.greet(); // "Hello, my name is John!"

💡 생성자 함수와 클래스의 가장 큰 차이

생성자 함수와 클래스 모두 자바스크립트에서 객체를 생성하는 방법이지만, 클래스는 상속, 캡슐화, 다형성 등 객체 지향 프로그래밍의 중요 개념을 더 효율적이고 직관적으로 다룰 수 있게 해준다.

상속과 확장성: 클래스는 extends와 super 키워드를 사용하여 상속을 간단하게 구현할 수 있다. 이를 통해 코드 재사용성을 높이고, 확장성을 개선할 수 있다.

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name); // 상위 클래스의 constructor 호출
  }
  speak() {
    super.speak(); // 상위 클래스의 메서드 호출
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog('Rex');
dog.speak(); // "Rex makes a sound." followed by "Rex barks."

💅🏻 클래스의 유지보수를 높이는 방법들

캡슐화와 private 변수: 클래스는 #을 사용하여 프라이빗 변수를 선언할 수 있어, 객체의 내부 상태를 외부에서 직접 접근하여 수정하는 것을 막을 수 있다.

class Person {
  #name; // 프라이빗 변수 선언
  constructor(name) {
    this.#name = name;
  }
  getName() {
    return this.#name; // 프라이빗 변수에 대한 접근자 메서드
  }
}

const person = new Person('John');
console.log(person.getName()); // John

try {
  person.#name = 'Jane'; // 외부에서 프라이빗 변수를 직접 수정하려고 하면 오류 발생
} catch (error) {
  console.error("프라이빗 변수에 직접 접근할 수 없음"); 
}

getter/setter: 클래스 내부에서 get과 set을 사용하여, 객체의 속성에 접근 및 수정 시 추가적인 로직을 구현할 수 있다. 이를 통해 데이터의 유효성 검사 등을 할 수 있어, 객체의 안정성과 정합성을 유지할 수 있다.

class Person {
  #age;
  constructor(age) {
    this.#age = age;
  }
  get age() {
    return this.#age;
  }
  set age(newAge) {
    if(newAge < 0) {
      throw new Error('나이는 음수일 수 없습니다.');
    }
    this.#age = newAge;
  }
}

const person = new Person(30);
console.log(person.age); // 30
person.age = -1; // throws Error: 나이는 음수일 수 없습니다.