자바스크립트 (class vs object) 객체지향 언어

class

연관있는 데이터를 묶어 놓는 역활을 해준다.

class person{
name;
age;
speak();
}
// 속성 (field) 와 행동(method) 가 들어있음 

• template

• declare once

• no data in <- 정의만한것

object

class를 이용해서 새로운 instance 생성하면 object가 된다.

• instance of a class

• created many times

• data in

'use strict';
// Object-oriendted programming
// object: instance of a class
// JavaScript classes 
// introduced in ES6
// syntactial suger over prototype-based inheritance


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

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


//object 생성  
const ellie = new Person('ellie', 20); // 새로운 object 생성 
console.log(ellie.name); //ellie
console.log(ellie.age); // 20
ellie.speak(); // ellie: hello!

//2. Getter and stters 
class User {
    constructor(firstName, lastName, age) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    }

    //get이라는 키워드로 값을 리턴함 
    get age() {
        return this._age;
    }

    //set이라는 키워드로 값을 설정함 
    set age(value) {
        //if (value < 0) {
        //   throw Error('age can not be nagative')
        // }
        this._age = value < 0 ? 0 : value; 
    }
}
// 사람의 나이가 -1이될 수 없기때문에 이런것을 방지하기 위하여 getter와 stter을 사용하는것이다.
const user1 = new User('steve', 'Jap', -1);
console.log(user1.age);

Getter and setters

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

    //get이라는 키워드로 값을 리턴함 
    get age() {
        return this._age;
    }
      

    //set이라는 키워드로 값을 설정함 
    set age(value) {
        //if (value < 0) {
        //   throw Error('age can not be nagative')
        // }
        this._age = value < 0 ? 0 : value; // -1이여도 0으로 출력됨
    }
 // age 값을 할당하는것이 아니라 setter을 호출하게 되기때문에 속성이름을 바꿔줘야한다.
}
// 사람의 나이가 -1이될 수 없기때문에 이런것을 방지하기 위하여 getter와 stter을 사용하는것이다.
const user1 = new User('steve', 'Jap', -1);
console.log(user1.age);

Fields (public, private) / Static properties and methods

//Fields (public, private) 
// Too soon! (사파리에서는 지원이 안되서 바벨을 이용해야함)
class Experiment {
    publicField = 2;
    #privaterField = 0;
    // 클래스 내부에서만 접근 가능 외부에서는 읽을 수 도 변경할 수 도 없음 
}
const experiment = new Experiment();
console.log(experiment.publicField); //2
console.log(experiment.privaterField); //undefined

//Static properties and methods
// Too soon!
class Article {
    static publisher = 'Dream coding';
    constructor(articleNumber) {
        this.articleNumber = articleNumber;
    }

    static printPublisher() {
        console.log(Article.publisher); //undefined undefined
    }
}
const article1 = new Article(1);
const article2 = new Article(2);
console.log(Article.publisher);
Article.printPublisher();
// static은 Atticle 에 값이 지정되있기떄문에 호출할때 클래스명을 이용해서 출력해야한다.

들어오는 데이터(object)에 상관없이 공통적으로 class에서 쓸 수 있는것이라면 static과 static method를 이용하여 메모리의 사용을 줄일 수 있다.

상속 & 다양성

//상속, 다양성
// Inheritance
// a way for one class to extend another class.
class Shape {
    constructor(width, height, color) {
        this.width = width;
        this.heihgt = height;
        this.color = color;
    }
    // shape에는 width, height, color라는 flids가 있고 

    draw() {
        console.log(`drawing ${this.color} color!`);
    }
     // draw라는 메소드 
    getArea() {
        return this.width * this.heihgt;
    }
    // getArea 라는 메소드 
}

class Rectangle extends Shape { } 
//extends (연장한다) 을 이용하면 shape의 모든것들이 rectangle에 포함이됨 
class Triangle extends Shape {
    draw() {
        super.draw(); // 부모의 메소드도 포함이됨
        console.log('🔺');
    }
    // 오버라이딩 필요한 메소드를 재정비함 (필요한 함수만 오버라이딩해서 작성할 수 있다.)
    getArea() {
        return (this.width * this.heihgt) / 2;
    }

    toString() {
        return `Triangle: color: ${this.color}`;
    }
}

const rectangle = new Rectangle(20, 20, 'blue');
rectangle.draw(); // drawing blue color!
console.log(rectangle.getArea());//400
const triangle = new Triangle(20, 20, 'green');// drawing green color!
triangle.draw();// 🔺
console.log(triangle.getArea());//200

instanceOf

// 6. Class checking: instanceOf
console.log(rectangle instanceof Rectangle); //true
//rectangle(object)가 Rectangle(class)에서 만들어진것인지 확인하는 역활
console.log(triangle instanceof Rectangle); //false
console.log(triangle instanceof Triangle); //true
console.log(triangle instanceof Shape); //true
console.log(triangle instanceof Object); //true
console.log(triangle.toString()); // Triangle: color: red;

공부 참조사이트

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference