[JavaScript] 클래스와 오브젝트의 차이점, 객체지향 언어 클래스 정리 (6)

class

붕어빵을 만들 수 있는 틀,

class로 찍어낸 것이 object입니다.

 

es6 이전에는 class가 없었기 때문에 바로 object를 생성했습니다.

 

1. Class declaration

클래스를 다음과 같이 선언할 수 있습니다.

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

  // methods
  speak() {
    console.log(`${this.name}: hello!`);
  }
}

Person이라는 클래스를 만들고 construtor 생성자를 이용해서 오브젝트를 만들 때 필요한 데이터를 전달합니다.

전달받은 데이터를 이 클래스에 존재하는 두가지 fields에 할당해줍니다.

 

 

 - 오브젝트 생성 하기

다음과 같이 생성해서 데이터를 전달할 수 있습니다.

const ellie = new Person('ellie', 20);
console.log(ellie.name);
console.log(ellie.age);
ellie.speak();

 

3. Getter and setter

class User {
  constructor(firstName, lastName, age) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
  }

  get age() {
    return this._age;
  }

  set age(value) {
    this._age = value < 0 ? 0 : value;
  }
}

const user1 = new User('Steve', 'Job', -1);
console.log(user1.age);

get으로 값을 읽어오고 set으로 값을 설정할 수 있습니다.

 

age라는 getter를 정의하는 순간 this.age는 바로 getter를 호출하게 되고 

setter를 정의하는 순간 값을 할당할 때 setter를 호출하게 됩니다.

setter는 계속 자기 자신을 호출하여 call stack이 다 차게됩니다. 따라서 getter와 setter안에 쓰이는 변수들에 '언더바'를 붙입니다.

 

field는 기호가 들어간 age가 있지만 .age라고 호출할 수있거나 할당할 수 있는 것은 내부적으로 getter와 setter가 있기 때문입니다.

 

 

3. Fields (public, private)

최근에 추가되었습니다.

class Experiment {
  publicField = 2;
  #privateField = 0;
}
const experiment = new Experiment();
console.log(experiment.publicField);
console.log(experiment.privateField);

생성자를 쓰지않고 field를 정의할 수 있습니다. 그냥 정의하게 되면 public이고 '#'을 붙이게 되면 private field로 class 내부에서만 보여지고 값을 변경할 수 있습니다. class외부에서는 값을 읽을 수도, 변경할 수도 없습니다.

 

 

4. Static properties ans methods

클래스안에 있는 field와 메소드들은 새로운 오브젝트들을 만들 때에만 우리가 지정한 값들로 변경되어 만들어집니다.

이런 값과 상관없이 동일하게 반복되는 메소드가 있을 수 있는데 오브젝트와 상관없이 클래스 자체에 연결되어 있는데 

 

class Article {
  static publisher = 'Dream Coding';
  constructor(articleNumber) {
    this.articleNumber = articleNumber;
  }

  static printPublisher() {
    console.log(Article.publisher);
  }
}

const article1 = new Article(1);
const article2 = new Article(2);
console.log(article1.publisher);  // undefined
console.log(Article.publisher);   // Dream Coding
Article.printPublisher();

static은 오브젝트에 존재하는 것이 아니고 클래스에 존재합니다! 

static 함수를 호출할 때도 클래스 이름을 이용하여 호출해야 합니다.

static과 static method사용이 메모리 사용을 줄여줄 수 있습니다.

 

 

5. Inheritance

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

  draw() {
    console.log(`drawing ${this.color} color of`);
  }

  getArea() {
    return width * this.height;
  }
}

// Rectangle이라는 클래스에 Shape 속성이 상속된다.
class Rectangle extends Shape {}
class Triangle extends Shape {
  draw() {
    super.draw(); // 부모의 메소드도 이렇게 호출할 수 있다.
    console.log('🔺');
  }
  getArea() {
    return (this.width * this.height) / 2;
  } // 이렇게 overriding해서 작성할 수 있습니다.

  toString() {
    return `Triangle: color: ${this.color}`
  }
} 
const rectangle = new Rectangle(20, 20, 'blue');
rectangle.draw();
const triangle = new Triangle(20, 20, 'red');
triangle.draw();

동일한 것을 재사용할 수 있습니다.(다형성)

 

6. Class checking: instanceOf

왼쪽에 있는 오브젝트가 오른쪽의 클래스로 만들어진 인스턴스인지 아닌지를 판별하면 됩니다.

console.log(rectangle instanceof Rectangle);  // true
console.log(triangle instanceof Rectangle);   // false
console.log(triangle instanceof Triangle);    // true
console.log(triangle instanceof Shape);       // true
console.log(triangle instanceof Object);      // true
console.log(triangle.toString());

자바스크립트에서 만든 모든 오브젝트, 클래스들은 Object들을 상속한 것입니다.

 

toString이라는 메소드를 Triangle 클래스에서 오버라이드 했습니다.