5. classes 클래스

Classes

• 출처 https://www.youtube.com/watch?v=_DLhUBWsRtw&t=59s [드림코딩 by 엘리]

클래스란?

• 클래스는 서로 연관이 있는 속성 과 메서드가 묶여있는것
• 간혹 method 가 없는 class 가 있을수 있는데 이런 클래스를 data class라고 함
• javascript 는 ES6 부터 지원

 class Person {
     name; //속성(field)
     age;  //속성(field)
     speak(); //행동(method)
 }

• class 는 붕어빵을 만드는 틀 다른 말로 하면
• 다른말로는 아이언 맨을 만드는 설계도라고 이해하면 쉬움

object 와 class의 구별

1. class 선언

   class Person {
     name; //속성(field)
     age;  //속성(field)
     speak(); //행동(method)
   }

• 여기까지가 class를 선언한 상태임
• 해당 클래스는 메모리에 올라가 있지 않은 상태

2. object: instance of a class 클래스의 객체화

const ellie = new Person();

• new 연산자를 통해 person 이라는 class를 객채로 만듬
• 이 상태가 되어야 클래스가 메모리에 올라

1. 클래스 선언

 class Person {
     //생성자
     constructor(name, age) {
         //속성
         this.name = name;
         this.age = age;
     }

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

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

console.log(ellie.name);
console.log(ellie.age);

// 결과값
// ellie
// 20

ellie.speak(); //결과값 ellie: hello!

2. Getter and Setter

• 사용자로부터의 입력된 데이터의 유효성을 확보하기 위해 만들어진것

예제

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

const user1 = new User('Steve', 'job', -1);
console.log(user1.age); //결과값 -1

//실제로는 나이가 -1 이 나올수 없음

최적화 1단계

class User {
    constructor(firstName, lastName, age) {
        //속성
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age; // setter 흐름 1 :age는 메모리에서 값을 가져오는것 이닌 아래의 set age(value)의 값을 호출
    }

    //age라는 getter를 정의한 순간 메모리에 있는 age를 가져오는것이 아닌
    // 상단 this.age = age; 의 this.age를 가져옴
    get age() {
        return this.age;
    }

    // setter 흐름 2 : set age(value)의 값을 호출
    set age(value) {
        this.age = value; // setter 흐름 3 :  setter 흐름 1 처럼 set age(value)의 값을 호출이 됨
        //결국 무한 반복이 일어남
    }
}

const user1 = new User('Steve', 'job', -1);
console.log(user1.age);
//결과값 RangeError: Maximum call stack size exceeded
//그래서 getter와 setter의 변수명을 변경시켜줘야함

최적화 2단계

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 not be negative');
        // }
        this. _age = value < 0 ? 0 : value;
    }
}

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

// 결과값 0

3. public, private

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes/Class_fields
• 아직 많은 브라우저에서 지원하지 않음

class Experiment {
    publicField = 2; //외부에서 접근이 가능
    #privateField = 0; //외부에서 접근이 불가능, class 내부에서만 접근 가능
}

const experiment = new Experiment();
console.log(experiment.publicField); //결과값 2
console.log(experiment.privateField); //결과값 undefined

4. 상속

• a way for one class to extend another class. 한 클래스가 다른 클래스를 확장하는 방법.
• extends를 이용

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

class Rectangle extends Shape {}

class Triangle extends Shape {
    draw(){
        super.draw(); // 상속하는 shape.draw() 가 실행
        console.log('**');
    }

    // 상속받은 Shape.getArea()메소드를 완전히 바꿈 overriding
    getArea(){
        return (this.width * this.height)/2;
    }
}

const rectangle = new Rectangle(20, 20, 'blue');
rectangle.draw(); // 결과값 drawing blue color of

const triangle = new Triangle(20, 20, 'red');
triangle.draw();
// 결과값
//drawing red color of
//**