6. 클래스와 오브젝트의 차이

 

💡

클래스는 연관된 키워드(여기서는 속성(fields)과 행동(method))를 묶어놓은 일종의 컨테이너라고 할 수 있다!! 이것을 가능하게 하는 것이 객체지향 프로그래밍!! class (template, declare once, no data in) object ( instance of a class, created many times, data in)

'use strict'

/**
 * Object-oriented programming
 * class : template
 * object : instance of a class
 * JavaScript classes
 * - introduced in ES6
 * - syntactical sugar over prototype-based inheritance
 *  */ 

 //1.Class Declaration
 class Person { 
     //constructor
     constructor(name, age) {
         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
class User {
    constructor(firstName, lastName, age) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age; //this.age는 setter를 호출, age는 getter를 호출함!! 
    }
    get age() {
        return this._age;
    }
    set age(value){
        // if(value < 0){
        //     throw Error('age can not be negative!');
        // }
        this._age =value <0 ? 0 : value; //this._age -> 콜백 에러 막기 위해서 
    }
}

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

// 3. Fields (public, private )
// Too soon!

class Experiment {
    publicField = 2;
    #privateField = 0;
}
const experiment = new Experiment();
console.log(experiment.publicField); //2
console.log(experiment.privateField); //undefined -> 잘 안됨. -> 정 원하면 babel

//4. Static properties and methods
// Too 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(article1.publisher); //undefined -> static 변수 못 가져옴
console.log(Article.publisher); //Dream  Coding -> 가능
Article.printPublisher(); //함수도 동일

//5.Inheritance
// a wya 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 of`);
    }
    getArea() {
        return this.width * this.height;
    }

}

class Rectangle extends Shape {}
class Triangle extends Shape {
    draw(){
        super.draw();
        console.log('triangle!!!'); //overloading
    }
    getArea() {
        return this.width * this.height/2;
    }
    toString(){
        return `Triangle's color : ${this.color}`;
    }
}
const rectangle = new Rectangle(20,20,'blue');
rectangle.draw(); //drawing blue color of
console.log(rectangle.getArea()); //300

const triangle = new Triangle(20,20,'red');
triangle.draw(); //drawing red color of, overloading! 
console.log(triangle.getArea()); //200

//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
console.log(triangle.toString());

 

 

객체지향언어 컨셉에 대한 이해와 클래스와 오브젝트의 차이점에 대해서 알아보아요 ❤️ JavaScript Reference:

https://developer.mozilla.org/en-US/d...

📒 강의 노트 & 자주 나오는 질문:

https://github.com/dream-ellie/learn-...

📓 드림코딩 유튜브 채널 공부 순서 ⇢

https://academy.dream-coding.com/page...

🪁 AI기반 코드 자동 완성 툴 Kit ⇢ VS Code에서 빠르고 똑똑하게 코딩할 수 있게 도와주는 AI를 기반으로한 무료 코드 자동 완성툴 한번 사용해 보세요:

https://tinyurl.com/ycedv3sj

..................................................... 🔮 엘리와 더 체계적으로 배우고 싶다면 - 드림코딩 아카데미:

https://academy.dream-coding.com/

📒 자바스크립트 기초 강의 영상 목록:

https://www.youtube.com/playlist?list...

🌐 프론트엔드 개발자 되기 입문자편 영상 목록:

https://www.youtube.com/playlist?list...

💰개발자 경력 관리 영상 목록:

https://www.youtube.com/playlist?list...

📄 이력서 작성 방법

https://www.youtube.com/playlist?list...

📈 IT 트렌드

https://www.youtube.com/playlist?list...

📷 개발자 브이로그

https://www.youtube.com/playlist?list...

🤗 생산력 향상 팁

https://www.youtube.com/playlist?list...

 

#자바스크립트

 

#프론트엔드

 

#백엔드

 

Uploaded by Notion2Tistory v1.1.0 

Notion2Tistory

출처 : 드림코딩 엘리 
youtu.be/1Lbr29tzAA8