Class vs Object vs Instance 정리

Class vs Object vs Instance

 

---

GOAL

 - Class, Object, Instance의 개념을 설명할 수 있다.
 - Class, Object, Instance의 차이를 설명할 수 있다.

 

Class란?

• 개념: 객체를 만들기 위한 전체적인 틀이자 객체들을 정의해 놓은 것이다.
• 비유: 붕어빵 틀

Object란?

• 개념: 객체는 클래스 내부를 구성하는 요소다. 
• 비유: 붕어빵틀로 만들어진 붕어빵

Instance란?

• 개념: 객체를 실체화 한것.  
  
  실체화? 대체 무슨말이지? 
   
  우선 객체와 인스턴스를 다시 정석대로 정의해보면
  객체란 소프트웨어 세계에 구현할 대상
  인스터스란 소프트웨어 세계에 구현된 구체적인 실체
  
  두 정의를 쉽게 풀어보면, 
  Coffee라는 클래스 있다.
  커피의 종류에는 아메리카노, 카페라떼 , 카페모카 등이 있다.
  다양한 커피의 종류를 객체, 즉 소프트웨어 세계에 구현할 대상이된다.
  
  이러한 커피 객체들이 Coffee라는 클래스에 객체로 실제 할당이 되면 (메모리에 실제로 할당이 될때)
  할당이 된 객체들을 인스턴스라고 부른다. 이 때 우리는
  "아메리카노는 Coffee 클래스의 인스턴스다."
  "카페라떼는 Coffee클래스의 인스턴스다." 라고 부를 수 있다. 

Class 선언

// 1. Class declarations (클래스는 관련있는 변수나 함수를 모아둔다.)
class Person {
  // constructor
  constructor(name, age) {
    // fields (속성)
    this.name = name;
    this.age = age;
  }

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

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

 

// 2. Getter and setters
class User {
  constructor(firstName, lastName, age) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age; 
    // 메모리에 접근하기전에 this.age는 아래 get을 호출, age;는 set을 호출
  }
 
  // getter와 setter는 사용자로부터 입력받는 값을 원하는대로 통제할 수 있게 해준다.
  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); // 0

  // 3. Fields (public, private)

  class Experiment {
    publicField = 2;
    #privateField = 0; //private은 클래스 내부에서만 접근가능
  }
  const experiment = new Experiment();
  console.log(experiment.publicField);
  console.log(experiment.privateField); // undefined private변수는 접근 불가.

  // 4. Static properties and methods
  // static은 언제 쓰면 좋을까? -> object 상관없이 즉 들어오는 데이터 상관없이
  //  공통적으로 class에서 쓸 수 있을 때 static메소드를 사용하는 게 메모리의 효율을 높여줌
  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(Article.publisher);
  Article.printPublisher();

// 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 of`);
  }

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

  toString() {
    return `Triangle: color: $(this.color)`;
  }
}

class Rectangle extends Shape {}
class Triangle extends Shape {
  // 필요한 부분을 새로 정의해주는 것 -> overriding
  draw() {
    super.draw(); // Shape의 console부분 불러오기
    console.log('🔺');
  }
  getArea() {
    return width * this.height /2; // 삼각형은 /2를 해줘야 넓이가 나오니까 재정의
  }
}

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

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

// 6. Class checking: instanceOf 
console.log(rectangle instanceof Rectangle); // t rectangle은 Rectangle의 인스턴스인가?
console.log(triangle instanceof Rectangle); // f
console.log(triangle instanceof Triangle); // t
console.log(triangle instanceof Shape); // t
console.log(triangle instanceof Object); // t 자바스크립트의 모든 객체는 Object객체에 상속되어있다.