2021-12-07 TIL

🦁 Day28

💻 오늘 공부한 것

📢 이 글은 드림코딩 엘리님의 객체 지향 언어 클래스 정리 유튜브 강의 내용을 정리한 글입니다.

Class

클래스 자체에는 데이터가 들어있지 않고 큰 틀, template만 정해놓는다.
어떠어떠한 데이터가 들어올 수 있는지만 정의한 후 최초 한번만 선언한다.
클래스를 이용해 실제 데이터를 넣어서 만드는 것이 object 즉, 인스턴스이다.

붕어빵틀 비유
Class → 붕어빵틀
object → 붕어빵

클래스 개념은 ES6에 도입되었다. ES6 전에는 class가 아닌 function을 이용하여 object를 만들었다.

클래스 몸체에는 속성(fields)과 행동(method)이 정의된다. fields만 있는 클래스는 데이터 클래스라고 부른다.

1. 클래스 선언

class Person{
    //constructor
    constructor(name, age) { // 생성자. object를 만들때 필요한 데이터를 전달한다.
        //fields
        // 전달받은 데이터를 fields에 할당해준다.
        this.name = name; 
        this.age = age;
    }

    // methods
    speak() {
        console.log(`${this.name}: hello!`);
    }
}


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

2. Getters와 Setters

class User {
    constructor(firstName, lastName, age){
        // fields - firstName, lastName, _age
        this.firstname = firstName;
        this.lastName = lastName;
        this.age = age;  // 아래에 getter가 정의되어있으므로  this.age가 getter를 호출
        // 아래에 setter가 정의되어있으므로 age를 this.age에 할당할 때 setter를 호출한다
    }

    get age() {
        return this._age;
    }

    set age(value) { // 값을 설정하기 위해서 매개변수를 통해 데이터를 받아온다
        // value를 좌항 변수에 할당할때 setter인 자기자신을 또 호출하면서 call stack이 꽉 차게 된다.
        // 이를 방지하기 위해 변수 이름을 _age 로 바꿔준다.
        // value로 받은 데이터를 this._age에 할당
        this._age = value < 0 ? 0: value;
        // 음수 값을 넣으면 0 값을 넣어주고 양수 값을 넣었을때는 그 값 그대로 age에 할당한다.
    }

}

const user1 = new User('Richard', 'Madden', -1); // 사용자가 실수로 나이를 -1로 입력한 경우
console.log(user1.age); // 0

3. 상속(Inheritance)과 다형성(Polymorphism)

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 {} // Shape 클래스의 fields, method를 상속받는다. 즉, Shape 클래스가 부모 클래스가 된다.
class Triangle extends Shape { // Shape 클래스가 부모 클래스가 된다.
    draw() { // overriding
        super.draw(); // 부모 class인 Shape의 draw()함수 사용
        console.log('🔺');
    }
    getArea() { // overriding
        return (this.width * this.height) / 2;
    }
}

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

4. instanceOf

instanceof 연산자의 좌측에 적는 object가 우측에 적는 class의 instance인지 확인하여 boolean 값으로 리턴해준다.

// 위 예제코드에서 만든 클래스와 인스턴스를 예시로 들었을때
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
                                        // 자바스크립트에서 만든 모든 object들은 Object를 상속한 것이다

---

참고자료
드림코딩 by 엘리 | 자바스크립트 6. 클래스와 오브젝트의 차이점(class vs object), 객체지향 언어 클래스 정리 | 프론트엔드 개발자 입문편 (JavaScript ES6)
https://www.youtube.com/watch?v=_DLhUBWsRtw