JS-5일차(class)

김혜성·2021년 7월 11일

JavaScript 프론트엔드

프론트엔드

목록 보기

8/17

Class

Class에는 data가 들어가지 않고 data가 들어갈 수 있는 틀만 들어있다(정의만 함)
-> 여기에 인스턴스 변수를 넣고 선언한게 Object!

Object-oriented programming
class: template
object: instanceof a class

Javascript classes

introduced in ES6 - 이전에는 다른 방식으로 했다네요
syntactical sugar over prototype-based inheritance - 이건 나중에...

Class declarations

class 선언은 크게 constructor와 methods로 나눌 수 있는데, constructor는 파이썬의 __init__과 비슷하게 사용될 인수들 선언하는 부분이다
method는 메소드 정의한다

class Person {
    //constructor
    constructor(name, age) {
        //fields
        this.name = name;
        this.age = age;
    }

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

const comet = new Person('comet', 20);

console.log(comet.name);
console.log(comet.age);
comet.speak;

Getter and setters

여기서 getter와 setter에서 기존의 변수명을 그대로 안쓰고 this._변수명을 사용한 이유가 너무 이해가 안됐다...
유튜브 댓글을 보니 나처럼 어려워한 분들도 많았네?
답글로 잘 설명해주신 분들 덕분에 잘 이해할 수 있었다!

게터와 세터의 필요성? 에 관한 예:

커피 자판기에서 커피의 수를 -1로 해버리면 안되니까 setter로 이를 막아준다!
커피 자판기의 커피의 수를 아무개 사용자가 바꾸면 안되니까 private로 설정해준다!
라는 엘리님의 밥선배 설명썰이 너무 쉽고 이해가 잘 됐네용

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) {
        if (value < 0) {
            throw Error('age cannot be negative!');
        }
        this._age = value < 0 ? 0 : value; //삼항연산자로 표현 
    }
}

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

결국 set age(value) 내부의 this.age = age;에서 this.age가 다시 set age(value)를 부르고 그게 반복되면서 에러가 나는 것이라는 내용이다 - 그래서 this._age로 써준다

Fields (public, private)

Too Soon! (최근에 추가됨)
Java에서 밥먹듯이 나오는 표현들이라 뭐 낯설지는 않다
Private로 인캡슐레이션? 같은 느낌, 자구에서의 adt 같은 느낌도 있네

class Experiment {
    publicField = 2;
    privateField = 0;
}

const experiment = new Experiment();
console.log(experiment.publicField);
console.log(experiment.privateField); // 내부에서만 보이기에 안뜬다(undefined)

Static properties and methods

Too Soon! (최근에 추가됨)
object에 상관없이 그 클래스 공통인 경우를 구현할 때 좋음
클래스에서 여러 인스턴스를 생성하는데 모두가 가지는 공통된 값이나 메서드
이럴 땐 공통으로 클래스에서만 호출이 된다면 메모리 절약이 된다
그걸 가능하게 하는게 static!

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

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

const article1 = new Article();
const article2 = new Article();
console.log(article1.publiser);
//static은 class 자체에 선언되어 있기에 각각의 obj에서는 undefined됨(값이 지정되지않음)
console.log(Article.publiser);
// 그래서 이렇게 class.으로 직접 해주어야 함

Article.printPublisher(); //요것도 static이기에 Article.으로 해줌

Inheritance

a way for one class to extend another class
높이, 밑변, 색깔 obj가 있는 클래스를 확장시켜서 삼각형, 사각형 등의 클래스 만들기 가능
extend, super.obj()

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 { }
class Triangle extends Shape {
    // 기존 클래스의 메소드를 재정의할 수 있어요!
    draw() {
        super.draw(); //super를 통해 부모의 draw도 불러올 수 이따!
        console.log('🔻');
    }
    // 오버라이딩 - 삼각형은 넓이 구할 때 /2를 해야하니 그부분만 수정 가능
    getArea() {
        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());

저 삼각형 어디서 찾았는지 궁금한 분들은
윈도우키 + .(온점) 단축키 누르면 됩니닷!

Class checking: instanceof

JS의 모든 obj는 Object를 상속함
every_object instanceof Object;

퀴즈타임!!

console.log(rectangle instanceof Rectangle);
console.log(triangle instanceof Rectangle);
console.log(triangle instanceof Triangle);
console.log(triangle instanceof Shape);
console.log(t instanceof Object);