[ JavaScript 총정리 5 ] Class vs Object , Class

yricog·2022년 3월 16일

JavaScript_Basic

목록 보기

21/28

Class와 Object의 차이

class 안에는 연관된 field(속성)과 method(행동)이 들어있다. 간혹 fields(data)만 들어있는 경우도 있는데, 이런 아이들을 data class 라고 부른다. 또한 class안에서 내부적으로 보여지는 변수와 밖에서 보일 수 있는 변수들을 나누는데, 이런 것들을 encapsulation(캡슐화) 라고 한다. 그리고 class를 이용해서 상속과 다형성이 일어날 수 있는데, 이런 모든 것들이 가능한 곳이 바로 객체지향언어이다.

객체(object)란?
객체(object)는 데이터의 분산을 막기 위해 데이터와 기능을 하나로 묶은 그룹이다. 컴퓨터를 예로 들면, 컴퓨터 = 데이터(본체, 모니터, 키보드, 마우스..) + 기능(화면, 소리, 입출력..) 으로 구분할 수 있다.

객체지향언어란?
컴퓨터를 작동시킨다고 할 때, 여러가지 부품들 하나하나가 조립이 되어야 하는데 이 때 역할에 따라 부품들의 그룹이 나뉘고 사용하고자 하는 그룹의 부품들이 작동하게 된다. 고장이 나도 해당 부품만 수리 및 교체를 하면 되기 때문에 유지보수가 쉽고 간편해진다.
참고

Class (=template)

template
declare once
no data in
예를들어, 클래스는 붕어빵을 만들 수 있는 틀이다! (청사진 또는 템플릿이라고 불린다.) 클래스 안에 데이터는 들어있지 않고, 틀만(템플릿만) 정의해 놓는다. "이 클래스에는 이런이런 데이터만 들어올 수 있어!" 라고 정의 해놓고 한번만 선언한다. 이 클래스를 이용해서 실제로 데이터를 넣어서 만드는 것이 바로 Object 이다.

Object (=data)

instance of a class
created many times
data in
클래스를 이용해서 새로운 instance(예,사례)를 생성하면 object가 된다. 클래스는 실제로 메모리에 올라가지 않지만, 오브젝트는 실제로 메모리에 올라가게 된다. 팥을 넣으면 팥붕어빵, 크림을 넣으면 크림붕어빵이 되는 것과 같은 이치. 이렇게 만들어진 붕어빵 자체는 오브젝트이고, 붕어빵을 만들기 위해 정의한 틀은 클래스인 것이다.

Class declarations

클래스 선언하기

<script>
	// class 생성하기
	class Person {
        constructor(name, age){
            //fields(속성)
            this.name = name;
            this.age = age;
        }

        //methods(행동)
        speak(){
            console.log(`${this.name}: hello!`); 
        }
    }
    
    // object 생성하기 
    const yura1 = new Person('yura','20');  
    console.log(yura1.name); //yura
    console.log(yura1.age);  //20
    yura1.speak();           //yura: hello! 
</script>

Getter and setters

<script>
    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 < 0 ? 0 : value;
        }
     }

     const user1 = new User('steve','Job',-1);
     console.log(user1.age);
</script>

Inheritance

하나의 class 안에 다른 기능을 추가하기 위해 자식 class를 만들고, 부모 class를 상속시켜 기능을 추가한다.
클래스 확장 : extends

<script>
    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;
        }
    }

	// Rectanle class를 Shape class로 확장
    class Rectangle extends Shape{}
    class Triangle extends Shape{
        draw(){
            super.draw();
            console.log('🔺');
        }
        
        getArea(){
            return (this.width * this.height) / 2; //삼각형 면적 구하는 식
        }
    }

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

Class checking : instanceOf

왼쪽에 있는 오브젝트가 오른쪽에 있는 클래스를 이용해서 만들어졌는지 아닌지 확인한다.

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