[JS-엘리] JS 6강 - 클래스・오브젝트 차이점(class vs object), 객체지향 언어 클래스 정리 | (JavaScript ES6)

동영상 수강 전 본문 내용 스캔.

동영상 수강 후 본문 내용 스캔.

목차

 

00:39 class 개념

02:55 class vs. object 차이점

04:20 class 등장

06:38 class 선언 + 07:23 object 생성

08:17 getter・setter

14:00 Public・Private

15:00 Static

16:54 extends (= 상속・다양성)

21:19 instanceOf

23:14 mdn javascript reference

24:20 지난 시간 퀴즈 정답 (4칙 연산 + 나머지)

 

00:39 

class 개념

[일반 class] = (field + method)로 구성. 

 

class person {

    name; // 속성 (field)

    age;

    speak(); // 행동 (method)

}

 

---

[데이터 class] - (fileld)만으로 구성. 

 

class Person {

    name; // 속성 (field)

    age;

}

PS. 객체 지향 언어는 캡슐화(encapsulation)・상속・다양성 등이 가능.

02:55 

class vs. object

[class] (예) 붕어빵 굽는 틀. / 메모리 차지 X

 

- template

- declare once

- no data in

 

---

[object] (예) 팥붕어빵, 크림붕어빵, 피자붕어빵.  / 메모리 차지 O

 

- instance of a class

- created many times

- data in

 

06:38 

1. Class 선언 + Object 생성

class Person {

    // constructor

    constructor(name,age) {

        // fiels

        this.name = name;

        this.age = age;

    }

    // method

    speak() {

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

    }

}

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

console.log(ellie.name);

console.log(ellie.age);

ellie.speak();

 

결과보기

08:17 

2. getter・setter

[잘못된 코드]

 

// 2. Gutter & Setter

class User {

    constructor(firstName, lastName, age) {

        this.firstName = firstName;

        this.lastName = lastName;

        this.age = age;

    }

    get age() {

        return this.age;

    }

    

    set age(value) {

        // 예1 - 값을 그대로 출력

        // this.age = value;

        // 예2 - 경고 메세지 띄우기

        // if (value < 0) {

        //     throw Error('age can not be negative');

        // }

        // 예3 - 값을 새로 설정

        this.age = value < 0 ? 0 : value;

    }

}

const user1 = new User('Steve', 'Job', -1);

console.log(user1.age);

 

결과보기

---

[올바른 코드]

 

// 2. Gutter & Setter

class User {

    constructor(firstName, lastName, age) {

        this.firstName = firstName;

        this.lastName = lastName;

        this.age = age;

    }

    get age() {

        return this._age;

    }

    

    set age(value) {

        // 예1 - 값을 그대로 출력

        // this._age = value;

        // 예2 - 경고 메세지 띄우기

        // if (value < 0) {

        //     throw Error('age can not be negative');

        // }

        // 예3 - 값을 새로 설정

        this._age = value < 0 ? 0 : value;

    }

}

const user1 = new User('Steve', 'Job', -1);

console.log(user1.age);

 

결과보기 

14:00

3. Fields (public, private)

 

// 3. Fields (public, private)

// Too soon !

// https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes/Class_fields

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

class Experiment {

    publicField = 2;

    #privateField = 0;

}

const experiment = new Experiment();

console.log(experiment.publicField);

console.log(experiment.privateField);

 

결과보기

PS. IE 및 Safari는 지원 X. (Babel 이용해서 변환 필요.)

15:00

4. Static properties and methods

각 객체에 공통으로 사용되는 속성을 class에서 constuctor 없이 바로 정의할 때 사용.

 

// 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

console.log(Article.publisher);

Article.printPublisher();

 

결과보기

16:54

5. 상속・다양성

각 객체에 공통되는 속성과 메서드 유형을 정의 후, 상속하고 별도로 추가 정의해 사용.

 

// 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!`); // of를 !로 변경

    }

    getArea() {

        return this.width * this.height;

    }

}

class Rectangle extends Shape {}

class Triangle extends Shape {

    //super.draw();

    draw() {

        console.log('삼각형');

    }

    getArea() {

        return (this.width * this.height) / 2;

    }

    toString() { // 아래 6. instanceof 강의 중에 나옴.

        return `Triangle: color: ${this.color}`;

 

    }

}

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());

결과보기

21:19

6. instanceof 연산자

 

// 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()); // 5. 상속・다양성 예에서 재정의 없을 시, [{object Object] 찍힘.

 

결과보기

PS.

 

23:14 

mdn javascript reference

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

 

Value properties

Error objects

Indexed Collections

Keyed collections

Control abstraction (Promise)

Structured data (JSON)

 

PS. (this, binding, closure)는 다음 편에..

24:20

PS. 지난 시간 퀴즈 정답

 

// Fun quiz time

// function calculate(command, a, b)

// command: add, substract, divide, multiply, remainder

function calculate(command, a, b) {

    switch(command) {

        case 'add':

            return a + b;

        case 'substract':

            return a - b;

        case 'divide':

            return a / b;

        case 'multiply':

            return a * b;

        case 'remainder':

            return a % b;

        default:

            throw Error('unknown command');

    }

}

console.log(calculate('add', 3, 4));

console.log(calculate('substract', 3, 4));

console.log(calculate('divide', 3, 4));

console.log(calculate('multiply', 3, 4));

console.log(calculate('remainder', 3, 4));

 

결과보기

※ 정해진 데이터 처리할 땐, if문보다는 switch문 이용 권장.