클래스는 연관있는 정보들(필드, 메서드)은 한데 모아줄수있음

//이름과 나이라는 속성(필드), speak()라는 메서드가 들어있음
 class Person() {
   name;
   age;
   speak();
 }

클래스: 템플릿, 설계도, 틀, 메모리에 올라가지 않음, 데이터 들어있지 않음

오브젝트: 클래스(설계도)로 만든 인스턴스(실제 물건), 여러개 만들수 있음, 데이터 들어있음, 클래스를 기반으로 조금씩 바꿔서 다양하게 만들수 있음

클래스 선언

  class Person() {
    //필드
    name;
    age;
    
    constructor(name, age){//생성자
      this.name = name;
      this.age = age;
    }
   
    //메서드
   speak(){
     console.log(`${this.name}: hello!`);//this는 생성된 오브젝트
   }
 }


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

Getter and Setters

user는 회원을 뜻한다. 그런데 누군가 바보같이 user의 age를 -1이라는 말도안되는 숫자를 넣었다.
사람의 나이가 -1일수는 없으니까.
그래서 getter, setter를 사용하는것이다. 바보같이 잘못된 값을 넣어도 걸러줄수 있다.

 class User {
   constructor(firstName, lastName, age) {
     this.firstName = firstName;
     this.lastName = lastName;
     this.age = age;
   }
   
//   get age() { 잘못된 코드
//     return this.age;
//   }
   
//   set age(value) { 잘못된 코드, 무한호출된다.  
//     this.age = value;
//   }
   
   get age() { 
     return this._age;
   }
   
   set age(value) {  
     //방법1.
     if(value < 0) {//음수로 값 설정한 경우 걸러냄
       throw Error('나이는 음수가 될수없어');
     }
     this._age = value;
     
     //방법2.
     this._age = value<0 ? 0 : value; 
   }
   //필드 3개(firstName, lastName, _age) 
   //사용할때 user1.age 라고 쓸수있는 이유는 내부적으로 getter, setter를 이용하기 때문
 }

const user1 = new User('ariana', 'grande', -1);
console.log(user1.age);//0 , -1을 넣었음에도 setter에서 걸러주어서 0으로 나옴

getter를 정의하는 순간 this.age는 인스턴스를 읽어오는게 아닌, getter인 get age()를 호출한다.
setter를 정의하는 순간 =age는 값을 할당하는 코드가 아닌 set age()를 호츨하는 코드가 된다.

그래서 getter,setter 내부에서는 age대신 _age나 다른 이름을 사용한다.

Fields (public, private) : 너무 최신

아주 최근에 추가된것이라 널리 쓰이고 있지는 않음(아직 거의 안쓰인다고 보면 된다, 그냥 알아만 두자)
생성자 쓰지 않고 필드를 정의 가능한데, 그냥 정의하면 public이고, #기호 붙이면 private이다.
private필드는 클래스 내부에서만 보이고 접근하고 변경 가능, 클래스 외부에서는 읽고 변경하기 불가

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

Static 필드와 메소드 : 너무 최신

생략....

상속 & 다형성

상속: 하나의 클래스 정의해두고 계속 확장해서 사용할수 있는것

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.heigh;
  }
}

class Rectangle extends Shape {} //상속 받았으니까 내용물 안적어도 부모 클래스의 모든것 상속받은것임
class Triangle extends Shape {
	getArea() {//오버라이딩(달라지는 함수만 수정해서 적용할수있음)
      return (this.width * this.height)/2;
    }
  
    draw() {
      super.draw(); //오버라이딩 하면서 부모의 draw()함수도 사용하고 싶을때
      console.log('*^^*')
   }
   toString() { //Object의 메서드인 toString 오버라이딩
     return `Triangle, color : ${color}`;
   }
}

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

const triangle = new Triangle(30,30,'red');
triangle.draw();//drawing red color, *^^* 둘다 출력
console.log(triangle.getArea());//200

extends를 이용하면 뭔가 문제 있을때 부모클래스만 수정하면 된다.

Class checking : instanceOf

왼쪽의 오브젝트가 오른쪽의 클래스의 인스턴스(오른쪽 클래스로 만들어진건지)인지 아닌지 확인, true와 false 리턴

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 js의 모든 오브젝트 클래스들은 object를 상속한것이다. 그러므로 Object의 모든 메서드들을 사용가능하고, 오버라이딩 가능함

console.log(triangle.toString());//Triangle, color : red, Object의 메서드인 toString()도 오버라이딩하여 사용

MDN 웹사이트 참고하면 좋음
MDN