[JS] 자바스크립트의 Class 문법

같은 부모 유전자를 가진 여러 객체를 만들어내기 위해 변수와 메소드가 정의되어 있는 Class라는 틀을 사용한다.
이전에는 Constructor를 사용해서 위 기능을 구현했고, ES6에서 Class 문법이 추가되었다.
Class를 사용하면 Constructor보다 더 명확하고 깔끔한 코드를 만들 수 있다.

constructor로 생성자를 만든 경우

function Person(name, age) {
  this.name = name;
  this.age = age;
} // 상속할 속성을 constructor에 정의

Person.prototype.sayHello = function () {
  console.log("Hello, I am " + this.name);
}; // 메서드를 prototype에 추가

const user = new Person("Jessie", 20);
console.log(user); // Person {name: 'Jessie', age: 20}

위 코드를 class 문법으로 바꿔주면 이렇게 된다.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  sayHello() {
    console.log("Hello, I am " + this.name);
  }
}

const user = new Person("Jessie", 20);

class 내부에 constuctor를 만들어주고, 필요한 속성을 정의한다.
constructor 외부에 선언된 메소드는 Person.prototype에 상속 정보를 저장한 것 과 같다.

getter 와 setter로 데이터 꺼내고 수정하기

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  sayHello() {
    console.log("Hello, I am " + this.name);
  }
  get nextYear() {
    return this.age + 1;
  }
  set newAge(age) {
    this.age = age;
  }
}

const user = new Person("Jessie", 20);

console.log(user.nextYear); // output : 21

user.newAge = 50;
console.log(user.age); // output : 50

class에 선언하는 메소드가 내부 데이터를 꺼내 활용하거나, 데이터를 수정하는 용도라면
get set 키워드를 통해 정리해 줄 수 있다.

일반 함수의 형태로 선언해도 기능하는데는 문제가 없지만,
함수의 용도를 명확히하고, () 가 필요없어지기 때문에 직관적인 코드를 만들 수 있다.

getter로 쓰이는 get 은 데이터를 꺼내서 어떻게 출력할건지 정의하는 것이므로 return이 꼭 포함되어야 한다.
setter로 쓰이는 set 은 수정 등을 위해 데이터를 넣어주는 것이므로 파라미터(한개) 설정이 꼭 필요하다.

class를 상속한 class 만들기

클래스의 상속을 통해 기존에 존재하던 기능을 토대로 새로운 기능을 만들 수 있어 기능 확장이 용이해진다.
class Child extends Parent { }를 사용하면 된다.

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

class Student extends Person {
  introduce() {
    console.log("Hello, I am " + this.name);
  }
}

const girl = new Student("Jessie", 20);
console.log(girl.introduce()); // Hello teacher, I am Jessie

Student는 Person을 상속받아 만들어졌기 때문에 Person의 속성인 name을 그대로 물려받아 사용할 수 있다.

여기서 만약 Student에서 사용할 또 다른 속성을 추가하고 싶다면,
부모 클래스가 가지고있는 속성을 그대로 가져올 수 있는 super를 사용해야 한다.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  sayHello() {
    console.log("Hello, I am " + this.name);
  }
}

class Student extends Person {
  constructor(name, age, subject) {
    super(name, age);
    this.subject = subject;
  }
  introduce() {
    super.sayHello();
    console.log("and I want to study " + this.subject);
  }
}

const girl = new Student("Jessie", 20, "English");

console.log(girl.introduce());
// Hello, I am Jessie
// and I want to study English

super()는 부모 클래스의 constructor 에 있는 속성을 그대로 가져온다.
괄호 안에는 부모가 가지고있던 파라미터를 꼭 그대로 입력해주어야 한다.
그리고 자식 클래스의 constructor() 괄호 안에 부모 파라미터 + 자식 파라미터를 입력해준다.

부모 클래스의 매서드가 필요할때는 super.메서드이름() 으로 가져올 수 있다.

---

참고-Javascript에서 Class 사용하기
참고-Javascript Class
참고-클래스 상속