[JavaScript] 자바스크립트의 클래스(Class)

클래스란?

클래스(Class)란 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메서드를 정의하는 일종의 틀로, 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성된다. ES6에 도입되었으며, JavaScript 객체용 템플릿이라고 볼 수 있다.

 

 

 

 

클래스 생성

class ClassName {
  constructor() { ... }
}

• class 키워드를 사용한다.
• 생성자 메서드 constructor()를 사용한다.

 

name과 year 속성을 가진 'Car'라는 클래스를 만들어보자.

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}

// 객체 생성
let myCar1 = new Car("Ford", 2014);
let myCar2 = new Car("Audi", 2019);

• Car 클래스를 이용하여 2개의 Car 객체를 만들었다.
• 넘겨받은 인수와 함께 constructor가 자동으로 실행된다.

 

 

 

 

클래스 메서드

class ClassName {
  constructor() { ... }
  method_1() { ... }
  method_2() { ... }
  method_3() { ... }
}

• 여러 메서드를 정의할 수 있다.
• 클래스를 만들고, new ClassName()을 호출하면 내부에서 정의한 메서드가 들어 있는 객체가 생성된다.

 

'Car' 클래스에 age라는 메서드를 추가해보자.

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() { // method
    let date = new Date();
    return date.getFullYear() - this.year;
  }
}

let myCar = new Car("Ford", 2014);
console.log(myCar.age()); // 8

• "Ford"는 this.name에 할당되고, 2014는 this.year에 할당된다.
• myCar.age()와 같은 방식으로 객체 메서드를 호출할 수 있다.

 

 

 

 

클래스 상속

클래스 상속을 사용하면 클래스를 다른 클래스로 확장할 수 있다. 클래스 상속으로 생성된 클래스는 다른 클래스의 모든 메서드를 상속한다. 따라서 코드 재사용에 아주 유용하다.

 

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  present() {
    return 'I have a ' + this.carname;
  }
}

class Model extends Car {
  constructor(brand, mod) {
    super(brand);
    this.model = mod;
  }
  show() {
    return this.present() + ', it is a ' + this.model;
  }
}

let myCar = new Model("Ford", "Mustang");
console.log(myCar.show()); // I have a Ford, it is a Mustang

• Car 클래스에서 메서드를 상속할 Model이라는 클래스를 만들기 위해 extends 키워드를 사용한다.
• Model 클래스로 만든 myCar객체는 Car클래스에 정의된 메서드에도 접근할 수 있다.
• super() 메서드는 부모 메서드를 토대로 일부 기능만 변경하는 메서드 오버라이딩에 사용된다.
• 상속 클래스의 생성자에서는 this를 사용하기 전에 반드시 super()를 호출해야 한다. (생성자 오버라이딩)

 

 

 

 

게터와 세터

리터럴을 사용해 만든 객체처럼 클래스도 getter나 setter를 사용할 수 있다. 주로 변수에 직접적인 접근을 제한하기 위해 사용한다.

 

class Car {
  constructor(brand) {
    this._carname = brand;
  }
  get carname() {
    return this._carname; // 속성과 구분하기 위해 언더바(_) 사용
  }
  set carname(x) {
    this._carname = x;
  }
}

let myCar = new Car("Ford");
myCar.carname = "Volvo"; // 괄호 사용X
console.log(myCar.carname); // "Volvo"

• get/ set 키워드를 사용한다.
• getter/setter의 이름과 속성명이 같을 수 없으므로 속성 이름 앞에 언더바(_)를 사용한다.
• getter로 속성 값을 가져올 때나 setter로 속성 값을 설정할 때 모두 괄호를 사용하지 않는다.

 

 

 

 

static 메서드

static 메서드는 클래스 자체에 정의되며, 특정 클래스 인스턴스가 아닌 클래스 '전체'에 필요한 기능을 만들 때 사용할 수 있다. 객체에서 메서드로 호출할 수 없고, 클래스명으로만 호출할 수 있다.

 

class Car {
  constructor(name) {
    this.name = name;
  }
  static hello() { // static method
    return "Hello!!";
  }
}

let myCar = new Car("Ford");

// static 메서드는 클래스명으로만 호출할 수 있음
console.log(Car.hello()); // "Hello!!"

// myCar.hello() 불가능

메서드 내에서 myCar 객체를 사용하려면 파라미터로 전달하면 된다.

class Car {
  constructor(name) {
    this.name = name;
  }
  static hello(x) {
    return "Hello " + x.name;
  }
}
let myCar = new Car("Ford");
console.log(Car.hello(myCar)); // "Hello Ford"

 

 

---

 

 

클래스의 기본적인 개념 위주로 다뤄 보았다😇

더 자세한 내용은 아래를 참고하면 좋을 듯하다!

 

 

 

 

※ 참고 자료

https://www.w3schools.com/js/js_class_intro.asp

https://ko.javascript.info/class

https://velog.io/@younoah/JS-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%81%B4%EB%9E%98%EC%8A%A4%EC%99%80-%EA%B0%9D%EC%B2%B4-%EC%B4%9D%EC%A0%95%EB%A6%AC