[2] Class와 Object

✅ 강의 시작부분에서 클래스와 오브젝트의 차이점을 붕어빵에 비유해서 설명하셨는데, 아주 쉽게 이해되었다..👍
클래스는 붕어빵을 만드는 틀이라고 생각하면, 오브젝트는 붕어빵이라고 생각하면 되는데, 클래스 자체에는 데이터가 들어있지 않고, 템플릿만 정의해 놓는다! 이런 클래스를 이용해서 새로운 인스턴스를 생성하면 오브젝트가 된다! (붕어빵 틀을 이용해서 재료에 따라 여러 종류의 붕어빵 탄생!)

✅ 클래스 기본 구조

class Person {
    constructor(name, age) { // 인스턴스 생성 및 초기화
        //fields
        this.name = name;
        this.age = age;
    }
    //methods
    speak() {
        console.log(`${this.name}: hello`)
    }
}

📍 constructor 은 인스턴스를 생성하고 초기화하기 위한 특수한 메서드이며, 클래스 내에 최대 한개만 존재할 수 있다. constructor 내부의 this는 클래스가 생성한 인스턴스를 가리킨다. constructor 은 생략 할 수 잇는데, constructor 을 생략하여도, 암묵적으로 클래스에 빈 constructor 가 정의된다. (즉 constructor을 생략한 클랙스는 빈 constructor 에 의해 빈 객체가 생성된다.) 또, constructor 안에는 return 문을 사용할 수 없는데, constructor 내부에서는 암묵적으로 this, 즉 인스턴스를 반환하기 때문이다.
(this 에 대해서는 추후에 자세히 공부할 예정이다.)

---

✅ 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 < 0? 0 : value; 
       // age에 사용자가 실수로  음수로 설정하면 0으로 다시 설정된다.
   }
}
const user1 = new User('Steve', 'Job', -1); 
// 사용자가 실수로 나이를 -1로 설정했다고 가정하자.
// 이러한 실수를 방지하기 위해 getter, setter 를 사용한다!

📍여기서 주의해야할 것이 있는데, getter 과 setter 안에 있는 변수들을 보면 필드와 다르게 정의되었다.
this.age 대신에 this._age로 되었는데, 만약 _age 가 아닌 필드와 똑같이 정의한다면, 무한루프에 빠지게 된다. 그 이유에 대해 잠시 살펴보자!

const user1 = new User('Steve', 'Job', -1);
// user1.firstName = 'Steve'
// user1.lastName = 'job'
// user1.age = -1

여기서 user.age 는 setter 함수가 자동적으로 실행되는데, 이때 만약 setter 함수의 변수가 this.age 라면, 결국 user1.age 가 되는 것이기 때문에, 이 user1.age 는 또 setter 함수를 자동적으로 실행시키게 되므로 무한루프에 빠지게 되는 것이다. 그렇기에 변수를 변경해야 한다!

---

✅ Object 생성

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

---

✅ 상속과 오버라이딩

👍 상속은 객체지향 프로그래밍의 핵심 개념이다!
간단히 정의하자면, 어떤 객체의 프로퍼티 혹은 메서드를 다른 객체가 상속받아 그대로 사용하는 것!
상속이라는 개념을 듣자 CSS에서도 사용한 기억이 떠올랐다.

position: relative; // 부모
position: absolute; // 자식

CSS 에서 요소의 위치를 지정할 때, 부모와 자식관계를 이용하여, 부모기준에서 자식의 위치를 설정할 수 있다. 이처럼 자바스크립트의 상속 개념에서도 부모 클래스와 자식 클래스로 구분되어진다.

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

class Rectangle extends Shape {} // 자식 클래스

Rectangle 클래스는 extends로 부모 클래스인 Shape를 상속 받습니다.
그런데 만약, 부모 클래스를 상속 받지만, 필요한 기능들로 다시 재정의를 하고 싶으면 어떻게 해야할까? 이것을 오버라이딩이라고 부르는데, 오버라이딩은 상위 클래스가 가지고 있는 메서드를 하위 클래스가 재정의 하여 사용하는 방식을 뜻한다.

class Triangle extends Shape { // 필요한 함수만 재정의 -> 오버라이딩
    draw() {
        console.log('🔺');
    } 
    getArea() {
        return (this.width * this.height) / 2;
    }
}

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

만약 부모클래스의 draw() 함수도 사용하고 싶다면 어떻게 해야할까?

draw() {
        super.draw(); // 부모클래스의 draw() 함수도 같이 호출된다.
        console.log('🔺');
    }
// 출력은  'drawing red color of 🔺' 이 될것이다.     
    

---

✅ Class checking: instanceOf

instanceOf는 A가 B의 instance인지 등에 대해 확인할 수 있는 연산자이다.

console.log(rectangle instanceof Rectangle); // true 와 false 를 호출. -> true
console.log(rectangle instanceof Shape); // true
console.log(rectangle instanceof Object); // true

---

드림코딩 강의를 듣고 작성하였습니다.👍