<JavaScript> 클래스와 객체지향 프로그래밍

자바스크립트 클래스는 객체지향 프로그래밍을 구현하기 위한 요소 중 하나로, 사실 자바스크립트는 프로토타입 기반의 언어지만, 클래스를 사용함으로써 객체지향 프로그래밍 구조를 더 쉽게 구현할 수 있습니다.

클래스는 객체를 만들어내는 '템플릿'으로 이해하면 좋을 것 같아요. 클래스를 생성하려면 class 키워드를 사용해야 합니다.

예를 들어, '사람'이라는 클래스를 생성해보겠습니다.

 

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

  sayHello() {
    console.log(`안녕하세요, 제 이름은 ${this.name}이고 나이는 ${this.age}입니다.`);
  }
}

 

클래스 인스턴스 생성하기

 

위에서 작성한 클래스를 이용해 객체(인스턴스)를 생성해보겠습니다.

여기서 객체란 클래스의 실체(인스턴스)를 말하며, new 키워드를 사용해서 생성합니다.

const person1 = new Person('철수', 25);
person1.sayHello(); // 출력: 안녕하세요, 제 이름은 철수이고 나이는 25입니다.

이렇게 생성된 인스턴스를 사용하여 클래스가 가진 속성과 메서드에 접근할 수 있습니다.

 

클래스를 활용한 상속 구현하기

 

자바스크립트에서 클래스는 상속을 통해 다른 클래스의 속성과 메서드를 재사용할 수 있습니다.

그러기 위해서는 기본 클래스를 extends 키워드로 확장해야 해요.

 

class Employee extends Person {
  constructor(name, age, position) {
    super(name, age);
    this.position = position;
  }

  introduce() {
    console.log(`제 이름은 ${this.name}이고, 제 직급은 ${this.position}입니다.`);
  }
}

 

여기서 super를 통해 부모 클래스인 Person의 생성자를 호출하여야 합니다.

이제 새로운 클래스 Employee에서 상속받은 속성과 메서드를 사용할 수 있습니다.

 

const employee1 = new Employee('영희', 28, '프론트엔드 개발자');
employee1.sayHello(); // 출력: 안녕하세요, 제 이름은 영희이고 나이는 28입니다.
employee1.introduce(); // 출력: 제 이름은 영희이고, 제 직급은 프론트엔드 개발자입니다.

 

정적 메소드와 정적 속성 알아보기

 

정적 메소드와 정적 속성은 클래스에 종속되어 있는데, 인스턴스가 아닌 클래스 자체에 바로 접근할 수 있는 메소드와 속성입니다. static 키워드를 사용해서 선언합니다.

class Calculator {
  static PI = 3.141592;

  static add(a, b) {
    return a + b;
  }

  static subtract(a, b) {
    return a - b;
  }
}

정적 메소드나 정적 속성은 인스턴스화하지 않고 바로 클래스를 통해 접근할 수 있습니다.

console.log(Calculator.PI); // 출력: 3.141592
console.log(Calculator.add(3, 5)); // 출력: 8
console.log(Calculator.subtract(10, 4)); // 출력: 6

 

자바스크립트에서의 접근 제어

 

자바스크립트는 접근 제어자가 없지만, 사용자 정의 접근 제어를 구현할 수 있습니다.

일반적으로 _(밑줄)을 변수 앞에 붙여서 비공개 속성임을 암시합니다.

속성 앞에 # 기호를 사용해 비공개 속성을 지정할 수도 있으나, 현재 적용되는 언어 구현에 따라 다릅니다.

class BankAccount {
  #balance;

  constructor(initialBalance) {
    this.#balance = initialBalance;
  }

  deposit(amount) {
    this.#balance += amount;
  }

  withdraw(amount) {
    this.#balance -= amount;
  }

  checkBalance() {
    console.log(`현재 잔액은 ${this.#balance}원 입니다.`);
  }
}

이렇게 작성한 클래스를 사용하면, balance 속성은 클래스 외부에서 직접 접근할 수 없게 됩니다.

 

감사합니다.