[JavaScript] Get/Set and Inheritance

🥫 Getter and Setter

• getter: 개체 안의 property를 return하거나 호출할 때 사용하는 method이다. getter는 조건에 따른 값을 return 할 수 있고, this를 사용하여 호출 객체의 속성에 접근할 수 있다. 그리고 다른 개발자들이 코드를 쉽게 이해하도록 도와준다.

• setter: 객체 안의 property의 값을 재할당할 때 사용하는 method이다.

• getter/setter: 사용자 혹은 개발자의 잘못된 action을 막아주는 역할을 한다. 그리고 getter/setter를 사용할 때 변수명의 변경없이 get/set을 설정하면 설정 시점부터 동작하기 때문에 call stack 초과를 막기 위해서 변수명을 조금 바꿔줘야 한다. (ex: age → _age) 변수명을 변경하더라도 class 내에서 사용된 getter/setter이므로 _age를 age처럼 인식하여 사용할 수 있다.

class User {
  constructor(firstName, lastName, age) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
  }
   //getter
  get age() {
    returen this._age;
  }
  //setter
  set age(value) {
    // if (value <0) {
    //   throw Error('age can not be negative');
    // }
    this._age = value < 0 ? 0 : value;
    //value가 0보다 작으면 0으로 setting하고 아니면 value를 this.age에 저장하겠다.
    //나이는 0보다 작을 수 없음
  }
}

const user1 = new User('Steve', 'Job', -1);  // 나이는 -1로 지정될 수 없음
console.log(user1.age);

›0

🍫 Inheritance(상속)

.extends를 사용하면 Shape class의 fields와 method가 Rectangle에 상속된다.

 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 this.width * this.height;
  }
}

class Rectangle extends Shape {}
class Triangle extends Shape {
  draw() {
    super.draw(); 
    //super 부모의 함수를 지칭하는 것으로 triangle의 함수도 가지면서
      부모의 함수도 가질 수 있게 된다.
    console.log('🔺')
  }
  //getArea() 함수를 over writing 할 수 있다. 
  getArea() {
    return (this.width * this.height) / 2;
  }
}

const rectangle = new Rectangle(20, 20, 'blue');
const triangle = new Triangle(20, 20, 'red');

🥯 Class의 instance 확인

.instanceOf: class로 만들어진 instance에 instanceof를 class와 함께 사용하면 해당 instance의 부모 요소인지 아닌지 알 수 있다.(true/false)

console.log(triangle instanceof Object);

›true

[출처: Youtube - 드림코딩]