[JS] 클래스(Class)

객체지향프로그래밍(Object-oriented programming)에서

class는 template이고,  object는 instance of a class입니다.

 

그렇다면 Javascript에서  class는?

-introduced in ES6

-자바스크립트에서는 기존에 클래스가 존재하지 않다가 'ES6'에서 추가됨

  (클래스가 도입되기 전에는 클래스를 만들지 않고 바로 Object를 만들 수 있었고, 이 Object를 만들 때 Function을 이용해서 템플릿을 만드는 방법이 있었음)

-syntactical sugar prototype-based inheritance

-클랫는 완벽하게 짠하고 추가된 것이 아니라 기존에 있던 자바스크립트에 추가된 것이기 때문에 기존에 존재하던 prototype을 베이스로 한 것 외에 우리가 간편하게 사용할 수 있도록 '클래스'라는 문법만 추가됨

 

 

1. Class declaration

 

//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

 

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

  // 'age'라는 getter를 정의하는 순간 'this.age'가 바로 메모리에 올라가 있는 데이터를 읽어오는 게 아니라 getter를 호출
  get age() {
    //return this.age; // Maximum call stack size exceeded 발생
    return this._age;
  }
  // setter를 정의하는 순간 '=(ex: this.age = age)'을 호출할 떄, 즉 값을 할당할 때 메모리에 값을 할당하는 것이 아니라 setter를 호출
  set age(value) {
    //this.age = value; // Maximum call stack size exceeded 발생
    this._age = value < 0 ? 0 : value;
  }
}
const user1 = new User("Steve", "Job", -1);
console.log(user1.age);

 

 

3. Fields (public, private)

정말 최근에 추가됨(왠만한 브라우저에서 아직 지원안됨, 지금 쓰려면 'babal'이용해야함)

 

class Experiment {
  // 외부에서 접근이 가능
  publicField = 2;
  // '#'사용하여 변수 선언시 'privatField'가 됨. 클래스 내부에서만 값이 보여지고 접근이 가능하고 외부에서 값을 바꾸고 읽는 것이 불가능
  #privateField = 0;
}
const experiment = new Experiment();
console.log(experiment.publicField); // 2
console.log(experiment.privateField); // undefined

 

 

4. Static properties and methods

-클래스 안에 있는 필드들과 메서드들은 새로운 Object들을 만들 때마다 그대로 복재되어서 값만 지정되는데,

새로운 Object를 만드는 것과는 상관없이(데이터에 상관없이) 클래스가 가지고 있는 고유한 값과 데이터에 상관없이 동일하게 반복적으로 사용되어지는 메서드가 있을 수 있는데, 그런 것들을 'static'이라는 키워드를 이용해서 붙이면, Object에 상관없이 클래스 자체에 연결되어 있음

- Object에 상관없이, 들어오는 데이터에 상관없이 공통적으로 클래스에 사용할 수 있는 거라면, 'static'키워드를 이용해서 코드를 작성하는 것이 메모리 사용에 더 효율적임

 

class Article {
  static publisher = "Dream Coding";
  constructor(articleNumber) {
    this.articleNumber = articleNumber;
  }
  static printPublisher() {
    console.log(Article.publisher);
  }
}

const article1 = new Article();
const article2 = new Article();
//'undefined'로 찍히는 이유는 'static'키워드를 사용했을 때
// 값이 Object마다 할당되는 것이 아니라 클래스마다 할당되기 때문
//console.log(article1.printPublisher); //undefined(객체로호출)
console.log(Article.publisher); //Dream Coding(클래스로호출)
Article.printPublisher();

 

 

5. Inheritance(상속)

 

class Shape {
  constructor(width, height, color) {
    this.width = width;
    this.height = height;
    this.color = color;
  }
  draw() {
    console.log(`drawing ${this.color} of`);
  }

  getArea() {
    return this.width * this.height;
  }
}
class Rectangle extends Shape {}
class Triangle extends Shape {
  draw() {
    super.draw(); //이렇게 'super'로 Shape(부모)클래스에 정의된 'draw()'메서드내용까지 호출가능
    console.log("삼각형");
  }
  getArea() {
    return (this.width * this.height) / 2; //Overriding(Shqpe클래스에 정의된 'getArea()'메서드를 재정의)
  }
  toString() {
    return `삼각형의 color는 '${this.color}'입니다.`;
  }
}
const rectangle = new Rectangle(100, 50, "blue");
rectangle.draw();
console.log(`사각형의 넓이는 '${rectangle.getArea()}'입니다.`);
const triangle = new Triangle(100, 50, "red");
triangle.draw();
console.log(`삼각형의 넓이는 '${triangle.getArea()}'입니다.`);

 

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(rectangle instanceof Shape); //true
console.log(triangle instanceof Object); //ture
console.log(Shape instanceof Object); //true
console.log(rectangle.toString()); //[object Object]
console.log(triangle.toString()); // 삼각형의 color는 'red'입니다.(toString()메서드 재정의)

 

 

참고 : 드림코딩 by 엘리