[자바스크립트] class vs object, 객체지향 언어 클래스 정리

드림코딩 엘리 - 자바스크립트 강의 #6

 

 

• class (붕어빵틀)
  • template, 청사진
  • declare once
  • no date in
• object (팥붕어빵, 슈크림붕어빵, etc.)
  • instance of a class
  • created many times
  • date in

Object-oriented programming

class: template

object: instance of a class

JavaScript classes

• introduce in ES6
• syntactical sugar over prototype-base inheritance

1. Class declarations

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

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

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

2. Getter and setter

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

   get age() {
      return this.age;
   } // constructor의 this.age가 getter 호출

   set age(value) {
      this.age = value;
   } // constructor의 age가 setter 호출 => maximum call stack size exceeded

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

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

3. Fields (public, private)

• 아주 최근에 추가됨

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

4. Static properties and methods

• 아주 최근에 추가됨
• static : 클래스 전체에 공통적인 것

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

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

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

5. Inheritance

• a way for one class to extend another class.

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

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

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

class Rectangle extends Shape {}
class Triangle extends Shape {
   draw() {
      super.draw(); // 부모 메소드 호출
      console.log('🔺');
   }
   getArea() {
      return (this.width * this.height) / 2;
   }
}

const rectangle = new Rectangle(20, 20, 'blue');
rectangle.draw(); // drawing blue color!
console.log(rectangle.getArea()); // 400

const triangle = new Trinangle(20, 20, 'red');
triangle.draw(); // drawing red color! 🔺
console.log(triangle.getArea()); // 200

6. Class Checking: instanceOf

• instanceof : 왼쪽의 object가 오른쪽 class의 instance인지 아닌지 확인 → true/false return

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 (모든 object는 Object를 상속)