[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.메서드이름() 으로 가져올 수 있다.

 

 

 

 

 

---

💡 참고

https://ordinary-code.tistory.com/22

[Javascript] 자바스크립트에서 Class 사용하기-constructor, extends, super 사용법

https://helloworldjavascript.net/pages/270-class.html

클래스 | JavaScript로 만나는 세상

https://ko.javascript.info/class-inheritance

클래스 상속