Chapter 12: Classes

💡 도서 모던 자바스크립트 핵심 가이드를 읽고 정리합니다.

12.0 클래스

---

MDN에서는 클래스를 다음과 같이 설명

클래스는 일차적으로 자바스크립트의 기존 프로토타입 기반 상속에 대한 문법적 설탕이다. 클래스 문법이 자바스크립트에 새로운 객체 지향 상속 모델을 도입하는 것은 아니다.

클래스는 이미 구축되어 있던 프로토타입을 기반으로 추가된 문법상으로 달달한, 즉 편리함을 제공하는 문법

클래스와 오브젝트 (Class vs. object)

class

class란 조금 더 연관있는 것들을 묶어 놓은 fields와 methods의 집합

• template
• declare once
• no data in (data가 들어갈 fields만 들어있음)

object

object는 class에 직접 data를 넣어 만든 instance

• instance of a class
• created many times
• data in

12.1 클래스 생성

---

생성 방법

// 클래스 선언
class Person {
}

// 클래스 표현식
const person = class Person {
}

클래스 선언 및 표현식은 호이스팅이 불가능함

클래스 선언하기

class Person {
    //constructor
    constructor(name, age) {
        // fields
        this.name = name;
        this.age = age;
    } // 객체와 달리 메서드 사이에 쉼표 없음

    // methods
    speak() {
        console.log(`${this.name}: hello! I'm ${this.name} and ${this.age} years old.`)
    }
}

const newstar = new Person('newstar', 20);

console.log(newstar.age);
newstar.speak();

• 생성자 메서드(constructor)는 단 하나만 추가 가능

12.2 정적 메서드

---

아래와 같이 클래스의 인스턴스가 아닌 클래스 자체에서 접근할 수 잇는 정적 메서드 정의 가능

class Person {
  constructor(name,age){
    this.name = name;
    this.age = age;
  }
  static info(){
    console.log("I am a Person class, nice to meet you");
  }
}
const alberto = new Person("Alberto",26);

alberto.info();
// TypeError: alberto.info is not a function

Person.info();
// I am a Person class, nice to meet you

12.3 set와 get

---

Setter and getters

사용자가 잘못된 입력 값을 넣을 경우를 대비하여 방어적인 자세로 코드를 짜는 방법

get이라는 키워드로 값을 return하고 set이라는 키워드로 값을 설정

커피 자판기 예시

• 커피 자판기 - class
• 커피의 종류 - integer (int a cup of coffee)
• 동전 넣기, 커피 만들기 - methods (put coin, make coffee)

→ 위 같은 상황에서 커피의 종류 값에 -1이 들어갈 수 있는가? 그럴 수 없다. 그렇기 때문에 getter와 setter를 사용하는 것!

class Person {
  constructor(name,surname) {
    this.name = name;
    this.surname = surname;
    this.nickname = "";
  }
  set nicknames(value){
    this.nickname = value;
    console.log(this.nickname);
  }
  get nicknames(){
     console.log(`Your nickname is ${this.nickname}`);
  }
}

const alberto = new Person("Alberto","Montalesi");

// first we call the setter
alberto.nicknames = "Albi";
// "Albi"

// then we call the getter
alberto.nicknames;
// "Your nickname is Albi"

• 또 다른 예시위 코드 get과 set 구문 안에서 this.age를 그대로 사용하면 안 되는 이유
• 
• class User { constructor(firstName, lastName, age) { this.firstName = firstName; this.lastName = lastName; this.age = age; } get age() { return this._age; // this.age를 그대로 사용하면 call stack 초과 오류가 뜸. 관용적으로 _(언더바) 사용. } set age(value) { //if (value < 0) { // throw Error('age can not be negative.'); //} this._age = value < 0 ? 0 : value; } } const user1 = new User('Steve', 'Job', -1); console.log(user1.age); // 0

12.4 클래스 상속하기

---

extends 키워드를 사용하여 상속

class Shape {
    constructor(width, height, color) {
        this.width = width;
        this.height = height;
        this.color = color;
    }

    draw() {
        console.log(`drawing ${this.color} color!`);
    }
    getArea() {
        return this.width * this.height;
    }
}

class Rectangle extends Shape {}

class Triangle extends Shape {
    constructor(width, height, color, position) {
        super(width, height, color)
        this.position = position;
    }
  draw() { // 부모 class의 메서드를 Overwriting하여 재정의할 수 있음
        super.draw(); // 상속받은 부모 class의 draw 메서드를 호출
    console.log('Ta-da! triangle :)');
  }
    getArea() {
        return (this.width * this.height) / 2;
    }
}

const rectangle = new Rectangle(20, 20, 'blue');
rectangle.draw();
console.log(rectangle.getArea());

const triangle = new Triangle(20, 20, 'red', 'inside');
triangle.draw();
console.log(triangle.getArea());

12.5 배열 확장하기

---

배열(Array)을 상속받아 클래스를 생성할 수 있음

class Classroom extends Array {
  // rest를 이용해 가변 인수로 입력받은 학생들의 정보를 배열 형태로 students에 할당
  constructor(name, ...students){
    // spread를 이용해 배열을 다시 풀어 생성자를 호출 (spread 사용 안 하면 배열이 생성됨)
    super(...students);
    this.name = name;
  }
    // 학생 추가를 위한 메서드
  add(student){
    this.push(student);
  }
}
const myClass = new Classroom('1A',
  {name: "Tim", mark: 6},
  {name: "Tom", mark: 3},
  {name: "Jim", mark: 8},
  {name: "Jon", mark: 10},
);

// 새로운 학생 추가
myClass.add({name: "Timmy", mark:7});
myClass[4];
// Object { name: "Timmy", mark: 7 }

// for of 사용하여 반복 가능
for(const student of myClass) {
  console.log(student);
  }
// Object { name: "Tim", grade: 6 }
// Object { name: "Tom", grade: 3 }
// Object { name: "Jim", grade: 8 }
// Object { name: "Jon", grade: 10 }
// Object { name: "Timmy", grade: 7 }

📎 참고

---

• MDN Javascrip Reference
• Youtube - Dream Coding