클래스(Class)와 친해지자!

 이번 글은 'JavaScriptの理解を深めた人がさらにもう1歩先に進むための本(JavaScript를 깊게 이해한 사람이 한 걸음 더 나아가기 위한 책)의 Chapter 9. クラスに慣れておこう！(클래스와 친해지자!)'를 바탕으로 작성하였습니다.

---

클래스의 기본

 이번 글의 주제는 바로 ES6의 꽃이라 불리는 '클래스'이다. ES6에 이르러 새로 도입되어 앞으로 널리 쓰일 것이기에 숙달해둘 필요가 있다.

 예제 코드를 살펴보자.

 

例）９－１－①
 
class Human { 
    constructor(name) { 
        this.name = name; 
    } 
    getName() { 
        console.log(`이름은 ${this.name}입니다`); 
    } 
} 
 
let igarashi = new Human('igarashi'); 
igarashi.getName();  // 이름은 igarashi입니다

 

 위 예제코드를 보면 알 수 있듯 우선 class 키워드로 클래스를 정의하고 new 연산자로 인스턴스화하여 인스턴스에서 메소드를 호출한다. 작동 원리를 보면 일반적인 객체와 전혀 다를 바가 없다.

 그럼 계속해서 차례대로 클래스의 기능에 대해 알아보자.

---

생성자(Constructor)

 클래스의 특징 중 하나로 '생성자의 정의방법'을 들 수 있다. 거창하게 말했지만 앞선 예제에서 보듯 constructor 함수만 쓰면 된다. Javascript에서는 class 블록 안에 작성된 constructor 함수가 이름 그대로 생성자의 기능을 한다. 이게 끝이다. 아무런 주의점도, 특이사항도 없다.

 

例）９－２－①
 
class Human { 
    constructor(name, age, sex) { 
        this.name = name; 
        this.age = age; 
        this.sex = sex == 'M' ? '남성' : '여성'; 
    } 
    showInfo() { 
        console.log(`저는 ${this.name}、${this.age}살인 ${this.sex}입니다.`); 
    } 
} 
 
let igarashi = new Human('igarashi', 35, 'M'); 
igarashi.showInfo();  // 저는 igarashi、35살인 남성입니다。

 

---

멤버(Member) 변수

 클래스에서는 this에 추가된 프로퍼티가 멤버 변수가 되어 이에 대한 참조도 this를 활용하여 수행한다.

 참고로 Java 등과 달리 this를 생략할 수 없다는 점을 주의하자.

 

例）９－３－①
 
class Human { 
    constructor(name, age, sex) { 
        this.name = name; 
        age = age; 
        this.sex = sex == 'M' ? '남성' : '여성'; 
    } 
    showInfo() { 
        // 저는 igarashi、undefined살인 남성입니다. 
        console.log(`저는 ${this.name}、${this.age}살인 ${this.sex}입니다.`); 
 
        // 에러
        console.log(`저는 ${this.name}、${age}살인 ${this.sex}입니다.`); 
    } 
} 
 
let igarashi = new Human('igarashi', 35, 'M'); 
igarashi.showInfo();

---

메소드(Method) 정의

 클래스 블록에 생성자 이외의 함수를 정의하면 메소드가 된다. 메소드 안에서 다른 메소드를 호출할 때는 멤버 변수와 마찬가지로 this를 써야 하며 생략 불가능하다.

 

例）９－４－①
 
class Human { 
    constructor(fName, lName, age, sex) { 
        this.fName = fName; 
        this.lName = lName; 
        this.age = age; 
        this.sex = sex == 'M' ? '남성' : '여성'; 
    } 
    getName() { 
        return this.lName + this.fName; 
    } 
    showInfo() { 
        console.log(`저는 ${getName()}、${this.age}살인 ${this.sex}입니다.`); 
    } 
 
} 
 
let igarashi = new Human('hajime', 'igarashi', 35, 'M'); 
igarashi.showInfo();  // 에러

 

 참고로 메소드를 선언할 때 static 키워드를 덧붙이면 '정적 메소드'가 된다. (정적 메소드에 대해서는 아래 함께 보기의 링크를 참고)

 

例）９－４－②
 
let count = 0; 
class Human { 
    constructor(name) { 
        this.name = name; 
        count += 1; 
    } 
    getName() { 
        console.log(`이름은 ${this.name}입니다.`); 
    } 
    static getCount() { 
        return count; 
    } 
} 
 
let igarashi = new Human('igarashi'); 
let tarama = new Human('tarama'); 
console.log(Human.getCount());  // 2

---

상속

 클래스의 상속은 extends 키워드로 구현한다. 또한 super 키워드를 사용하여 '부모 클래스의 생성자 혹은 메소드'에 액세스 가능하다.

 

例）９－５－①
 
class Phone { 
    constructor(name) { 
        this.name = name; 
    } 
    call() { 
        console.log('발신합니다.'); 
    } 
} 
 
// Phone 클래스를 상속 받은 클래스의 정의
class SmartPhone extends Phone { 
    constructor(name, type) {  
        // 부모 클래스의 생성자를 호출
        super(name); 
        this.type = type; 
        this.callCount = 0; 
    } 
    showInfo() { 
        console.log(`Name:${this.name} type:${this.type}`); 
    } 
 
    // 메소드 오버라이드
    call() {  
        // 부모 클래스의 메소드 호출
        super.call(); 
        this.callCount += 1; 
    } 
} 
 
let myPhone = new SmartPhone('XXXX', 'YYYY'); 
myPhone.showInfo();  // Name:XXXX type:YYYY 
myPhone.call();  // 발신합니다. 
console.log(myPhone.callCount);  // 1

 

 이때까지 클래스의 기본적인 사항에 대해 살펴보았다. 종전의 프로토타입과 비교해서 간단하고 알기 쉽게 코드를 작성할 수 있다는 점을 알 수 있을 것이다. 

---

함께 보기

• 정적 메소드(static method)

https://developer.mozilla.org/en-US/docs/Glossary/Static_method

Static method - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

https://javascript.info/static-properties-methods

Static properties and methods