클래스(Class)

G_NooN·2024년 1월 28일
0

JavaScript

목록 보기
6/7

클래스(Class) & 인스턴스(Instance)

  • 클래스(Class) : 객체를 생성하는 설계도(틀)
  • 인스턴스(Instance) : 클래스의 틀에 따라 생성한 객체

생성 방법

  • constructor() 메서드를 사용하여 클래스의 틀을 정의하고 초기화
  • new 키워드와 함께 class를 생성하여 인스턴스 생성
class Person {
  // constructor() 메서드를 사용하여 클래스의 틀을 정의하고 초기화
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  sayHello() {
    console.log(`Name : ${this.name}, Age: ${this.age}`);
  }
}

// new 키워드와 함께 class를 생성하여 인스턴스 생성
const newPerson = new Person("John", 20);
newPerson.sayHello();	// Name: John, Age: 20

getter() / setter() 메서드

class의 속성에 접근하는 메서드

  • getter() : 속성 값을 반환하는 메서드
  • setter(value) : 속성 값을 설정하는 메서드

private 속성

객체 지향 프로그래밍에서는 내부 데이터(속성)을 외부에서 직접적으로 접근하지 못하게 하기 위해, 내부 데이터를 private하게 캡슐화(Encapsulate)한다.

  • 효과
    • 데이터의 무결성을 유지할 수 있음
    • 내부 데이터를 외부에서 직접 건드리지 않아 오류의 발생 가능성을 낮출 수 있음
    • 복잡한 작업은 내부에서 처리하고 외부에는 간단한 인터페이스만 제공할 수 있음(높은 수준의 추상화)

Private 속성 적용 방법 - 코드 컨벤션(Code Convention)

데이터의 이름 앞에 _를 입력하여 관례적으로 해당 데이터가 private함을 알림

class Person {
  constructor(name, age) {
    this._name = name;
    this._age = age;
  }
  
  // getter
  get getName() {
    return this._name;
  }
  get getAge() {
    return this._age;
  }

  // setter
  set setName(nameValue) {
    this._name = nameValue;
  }
  set setAge(ageValue) {
    this._age = ageValue;
  }
  
  // chagne name/age to _name/_age
  sayHello() {
    console.log(`Name : ${this._name}, Age: ${this._age}`);
  }
}

// new 키워드와 함께 class를 생성하여 인스턴스 생성
const newPerson = new Person("John", 20);
newPerson.sayHello();	// Name: John, Age: 20

ES2020(ES11)부터 Private Field를 선언하는 문법이 도입되어, _ 대신 #을 사용할 수 있다.

constructor(name) {
  this.#name = name;
}

클래스의 상속(Inheritance)

다른 클래스의 속성을 물려 받아 새로운 속성을 추가하거나 재정의(Override)할 수 있다.

상속 방법

클래스명 뒤에 extends 상속하는 클래스를 입력함

class Person {
  constructor(name, age) {
    this.#name = name;
    this.#age = age;
  }
  
  // getter
  get getName() {
    return this.#name;
  }
  get getAge() {
    return this.#age;
  }

  // setter
  set setName(nameValue) {
    this.#name = nameValue;
  }
  set setAge(ageValue) {
    this.#age = ageValue;
  }
  
  sayHello() {
    console.log(`Name : ${this.#name}, Age: ${this.#age}`);
  }
}

// Person 클래스를 상속하는 클래스 생성
class Me extends Person {
  // 새로운 속성 추가
  constructor(name, age, city) {
    // 기존의 속성은 super()를 사용하여 가져올 수 있음
    super(name, age)
    this.#city = city;
  }
  
  // 새로운 속성 getter
  get getCity() {
    return this.#city;
  }
  //새로운 속성 setter
  set setCity(value) {
    this.#city = value;
  }
  
  // 기존 속성 재정의(Override)
  sayHello() {
    console.log(`Name : ${this.#name}, Age: ${this.#age}, City: ${this.#city}`);
  }
}

// new 키워드와 함께 class를 생성하여 인스턴스 생성
const me = new Me("MyName", 20, "CA");
me.sayHello();	// Name: MyName, Age: 20, City: CA

Static Method

인스턴스를 생성하지 않고 클래스에서 바로 호출할 수 있는 메서드

메서드의 앞에 static 키워드를 입력하여 사용

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

console.log(Calculator.add(1, 2));	// 3
profile
쥐눈(Jin Hoon)

0개의 댓글