[JavaScript] Class

Baoro·2022년 2월 3일
0

JavaScript 기본개념

목록 보기
5/9

데이터가 늘어나면 늘어날수록 코드도 길어지고 관리가 힘들어지기 때문에 "객체"라는 것을 이용하여 표현했다.
그런데 이런 객체를 많이 생성해야한다면 어떻게 해야할까? 1000개의 객체를 생성한다고 가정하면, 하나하나씩 객체를 만들어야할까?
이러한 불편함을 없애기위해 Class라는 것이 도입되었다. 이 Class를 이용하면 원하는 객체의 틀을 짜놓고, 비슷한 모양의 객체를 손쉽게 대량으로 마구마구 찍어낼 수 있다.
자동차 객체를 예시를 들어보자.

let ray = {
    name: 'Ray',
    price: 2000000,
    getName: function(){
        return this.name;
    },
    getPrice: function(){
        return this.price;
    },
    applyDiscount: function(discount){
        return this.price * discount;
    }
}

여기서 다른 자동차를 추가한다고 하면 name이나 price같은 프로퍼티는 다시 작성한다고 해도 그 뒤에 메소드들은 중복으로 작성을 해야한다.
Class를 이용해보자.

class Car {
    constructor(name,price){
        this.name = name;
        this.price = price;
    }

    applyDiscount(discount){
        return this.price * discount;
    }
}

const ray = new Car('ray', 2000000);
console.log(ray);
console.log(ray.applyDiscount(0.8));
const morning = new Car('morning', 1000000);

객체와 비교해보면 크게 3가지가 다르다는 것을 볼 수 있다.
1. constructor(생성자)의 유/무
2. 클래스의 경우 프로퍼티마다 콤마(,)로 구분하지 않는다.
3. 객체를 굉장히 쉽게 추가할 수 있다.


우선 생성자가 무엇인지부터 살펴보자.

생성자란?
객체를 만드는 역할을 하는 함수.

코드로 예를 들어보겠다.

function Car(){}	//Car이라는 함수를 정의하고
var p0 = Car();		//p0에다가 Car함수의 리턴값을 넣는다.
console.log(p0);	//p0를 출력한다.

결과는 undefined 이다. 맨첫번째줄에서 Car()이라는 함수는 어떠한 값도 리턴하지 않기때문이다.
그러면 이 코드를 살펴보자.

function Car(){}
var p1 = new Car();
console.log(p1);

결과는 Car{} 이다. 여기서 '{}'의 의미는 비어있는 객체라는 뜻이다. 두번째줄을 보자.
new라는 것을 쓰면 그 뒤에 Car()는 그냥 함수라고 하지않고 생성자라고 한다. 무엇을 생성하냐? 객체를 생성한다. 즉 Car()라는 생성자는 new로 인해서 비어있는 객체를 만들고 그 객체를 반환하기 때문에 p1에는 비어있는 객체가 들어간 것이다.

this란?
클래스 객체를 의미한다. 즉 Car라는 클래스를 의미한다.

class Car {
    constructor(name,price){
        this.name = name;
        this.price = price;
    }

    applyDiscount(discount){
        return this.price * discount;
    }
}

이 코드에서 applyDiscount(discount) 메소드를 살펴보자.
discount라는 인자를 받아서 Class 내부의 price의 값과 곱해서 리턴하는 것을 볼 수 있다.
즉 this를 이용하면 클래스 내부 프로퍼티에 접근 할 수 있다는 것을 알 수 있다.

profile
꾸준히.... 깔끔하게.... 끝까지....

0개의 댓글