[자바스크립트] 6. 클래스와 오브젝트의 차이점

자바스크립트 기초 강의(ES5+) - 드림 코딩 by 엘리 강의 정리 입니다. 

자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다.

 

클래스

클래스는 연관있는 데이터를 묶어놓는 컨테이너같은 역활을 합니다.

클래스에서도 안에서 볼 수 있는 변수와 밖에서만 볼 수 있는 변수를 나눠놓습니다.

이런것들을 캡슐화라고 합니다.

클래스를 이용해서 상속과 다형성이 일어날 수 있는데, 이 모든 것이 가능한 것은 객체지향이라고 합니다.

 

- template

- declare once

- no data in

- 붕어빵 만드는 기계

 

오브젝트

- 클래스로 실제 데이터를 넣어서 만드는 것

- instance of a class

- created many times

- data in

- 팥 붕어빵, 크림 붕어빵, 피자맛 붕어빵 등등....

 

1. 클래스의 선언

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);
console.log(ellie.age);
ellie.speak();

- 생성자 및 메서드가 생성이 되어 있는 것을 볼 수 있습니다.

 

- const ellie = new Person('ellie', 20); 는 Object를 만드는 소스입니다.

 

2. 게터, 세터

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

  get age() {
    return this._age;
  }

  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);

- 만약 게터와 세터가 없을 때, 나이를 -1을 넣으면 잘못 입력이 되지만, 그대로 출력이 됩니다.

 

- 이러한 실수를 방지하기 위해서 중간에 방어적인 느낌으로 만든게 게터와 세터입니다.

 

3. 필드 (public , private)

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

- public의 경우에는 접근이 가능하고, private의 경우에는 접근이 불가능 합니다.

- 이는 최근에 적용이 되서, 많은 개발자가 잘 이용하지 않는다고 합니다.

 

4. 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();

- article1.publisher로 출력을 하면 출력 되지 않는 이유는 클래스 자체에 붙어있기 때문입니다.

- 오브젝트에 상관없이 공통적으로 클래스에서 쓸수 있는 경우에 사용합니다.

 

5. 상속

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 {
  draw() {
    super.draw();
    console.log('삼각형');
  }
  getArea() {
    return (this.width * this.height) / 2;
  }

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

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());

- Shape라는 클래스를 정의를 했습니다. Shape에는 삼각형 사각형 등등이 있기 때문에, 상속을 이용해서 만들어 줄 수 있습니다.

 

- 필요에 따라서 오버라이딩을 통해서 메서드를 변경해서 사용할 수 있습니다.

 

6. instanceOf

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

- 왼쪽에 있는 오브젝트가 오른쪽에 있는 클래스의 인스턴스 인지를 판별해줍니다.

- 결과값으로는 참 또는 거짓으로 결과가 나옵니다.