[TIL] 드림코딩 javascript (6)

class: 붕어빵을 만들 수 있는 틀

• template
• declare once
• no data in

object: 팥붕어빵, 크림붕어빵, 피자붕어빵

• instance of a class
• created many tines
• data in

JavaScript classes

• introduced in ES6
• syntactical sugar over prototype-based inheritance(기존에 존재하던프로토타입을 기반으로 문법만 추가됨)

1. Class declarations

class Person {
    // 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);
console.log(ellie.age);
ellie.speak();

2. Getter and setters

• 커피자판기 예시
• get이라는 함수로 값을 리턴하고, set이라는 키워드로 값 설정

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

    get age() {
        return this._age;
    }

    set age(value) {
        // if (value < 0) {
        //    throw Error(`age can nat be negative`);
        // }
        this._age = value < 0 ? 0 : value;
    }
}

const user1 = new User('Steve', 'Job', '-1');
console.log(user1.age);

1. 내부적으로 this.age는 get age() 를 호출하고
2. 내부적으로 this.age = age는 set age(value)를 호출한다.
3. 내부적으로 this.age = value는 set age(value)를 호출하기 때문에 set age()내부에선 age를 _age || pre_age등으로 바꿔 줄 필요가 있다.
4. 그리고 이런 변경을 set과 get에서 동일해야 작동한다.

4. Static properties an methods

• To Soon!

class Article {
    static publisher = 'Dream Coding';
    constructor(articleNumber) {
        this.articleNumber = articleNumber;
    }

    static printPublisher() {
        console.log(Article.publisher);
    }
}

const article1 = new Article(1);
const article2 = new Article(2);
console.log(Article.publisher);
Article.printPublisher();

💗 오브젝트에 상관없이 공통적으로 클래스에서 쓸 수 있는 거라면 static과 static method를 사용하는 것이 메모리 절약에 효율

5. Inheritance(상속)

• a way for one class to extend another class.

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


// 클래스를 추가할때 extends라는 키워드를 이용하면 자동으로 Shape에 추가됨
class Rectangle extends Shape {}
class Triangle extends Shape {
    draw() {
        super.draw(); //공통적으로 정의한 것뿐만 아니라 색다른 것도 추가하고 싶다하면 부모의 메소드를 추가해준다
        console.log('a');
    }

    getArea() {
        return (this.width * this.height) / 2;
    }
}
const rectangle = new Rectangle(20, 20, 'blue');
rectangle.draw();
const triangle = new Triangle(20, 20, 'red');
triangle.draw();

🔄 상속을 이용하게 되면 공통되는 애들을 일일히 작성하지 않아도 extends를 이용해서 재사용할 수 있다.

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(triangle instanceof Object); //true

• 오브젝트 instanceOf 클래스: 이 오브젝트가 이 클래스를 이용해서 만들어진 아인지 확인하는 것
• 우리가 자바스크립트에서 만든 모든 오브젝트 클래스들은 javascript의 Object를 상속받음

자바스크립트 mdn 레퍼런스

퀴즈 타임

퀴즈가 있었는지 몰랐는데 있었다네..?
여유 있을 때 확인해봐야지!!

// Fun quiz time
// function calculate(commad, a, b)
// command: add, substract, devide, multiply, remainder

function calculate(command, a, b) {
    switch (command) {
        case 'add':
            return a + b;
        case 'substract':
            return a - b;
        case 'devide':
            return a / b;
        case 'multiply':
            return a * b;
        case 'reminder':
            return a % b;
        default:
            throw Error('unknown command');
    }
}
console.log(calculate('add', 2, 3));