[JS] class / constructor / get / set

오늘은 class / constructor / get / set 에 대해 공부했다.

처음에 class라는 단어를 보았을땐 css?😆 라고 생각했는데 그 css의 class가 아니고
한마디로 OO을 만들기 위한 틀이라고 보면 좀 더 이해하기 쉬울 것 같다.

예를 든다면 자동차를 만든다고 했을때 class car라고 정의한 뒤,
만들기 위한 필요 요소들(ex: 모델명, 년도, 타입, 색상 등등...)을 셋팅해준다.

그럼 new car를 통해 알맞는 수량의 매개변수 값 자리에 넣어주면 끝!

백문이 불여일견! 코드를 통해 차례대로 알아보도록 하자.

💡 class 와 constructor 사용법

class car {
    constructor (modelName, modelYear, type, price) {
        this.modelName = modelName; // 모델명
        this.modelYear = modelYear; // 년도
        this.type = type; // 기름 타입
        this.price = price; // 가격
    }
}

우선 class car라고 먼저 class를 잡아준다.
그리고 그 안에 constructor와 필요 요소들만큼의 매개변수를 추가해 주는데,
이때 this를 이용하여 각 매개변수들을 지정해 준다.

💡 getter 와 setter를 만들어 주자!

class와 constrctor를 만들고 나면 get 과 set으로 값을 좀 더 안정적이고 올바르게 가져올 수 있다.

// modelName
    get modelName () {
        return this._modelName;
    }

    set modelName (value) {
        // 유효성 검사
        if(typeof value !== 'string') {
            console.log('입력된 값이 문자가 아닙니다.');
            return;
        } else if (value.length <= 0) {
            console.log('입력된 내용이 없습니다.');
            return;
        } 

        this._modelName = value;
    }

위와 같이 각 매개변수들에 대한 get과 set 을 만들어 주면 된다.

여기서 get은 단순히 값을 return 하는 용도인데 set은 좀 특별한 것을 알 수 있다.
바로 set에서 유효성 검사를 통해 올바른 값을 받을 수 있도록 한다는 것!!! 굉장하다.

위의 코드에서는 modelName(=모델명)에 대한 유효성 검사를 간단하게 해 보았는데,
1. 문자열 / 2. 빈칸 여부 확인 을 각각 체크해 보았다.

위 조건들을 모두 성립할때 비로서 modelName 에 값이 들어가게 된다.

그런데 코드 안에 조금 독특한 것을 발견할 수 있다...? 👀
그것은 바로 '_ (언더바)'이다.

언더바를 사용하는 이유는 this 때문인데,
_를 넣음으로써 여기서만 사용할거야~라고 지정해준다는 의미로 사용된다고 한다.

만약 언더바를 넣지 않으면 바로 에러가 난다ㅠㅠ... 그러니 꼭꼭 this. 다음에는 언더바를 넣어주자!

    // modelYear
    get modelYear () {
        return this._modelYear;
    }

    set modelYear (value) {
        // 유효성 검사
        if (value.length !== 4) {
            console.log('연도가 4자리가 아닙니다.');
            return
        } else if (typeof value !== 'string') {
            console.log('입력된 값이 문자가 아닙니다.');
            return;
        }
        this._modelYear = value;
    }


    // type
    get type () {
        return this._type;
    }

    set type (value) {
        // 유효성 검사
        if(value !== '디젤' && value !== '가솔린' && value !== '전기차') {
            console.log('올바르지 않은 타입 입니다.');
            return;
        } else if (value.length <= 0) {
            console.log('내용을 입력해 주세요.');
            return;
        }
        this._type = value;
    } 


    // price
    get price () {
        return this._price;
    }

    set price (value) {
        if (typeof value !== 'number') {
            console.log('숫자가 아닙니다. 숫자로만 입력해 주세요.');
            return;
        } else if (value < 1000000) {
            console.log('가격은 100만원보다 적으면 안됩니다.');
            return;
        }
        this._price = value;
    } 

이런식으로 나머지 매개변수에 대한 get과 set도 함께 만들어 주면 된다.

💡 car를 만들고 싶다면 ?

const car1 = new car ('아우디', '2023', '전기차', 90000000);
const car2 = new car ('기아', '2019', '디젤', 35000000);
const car3 = new car ('현대', '2015', '가솔린', 38000000);

new car () 를 사용하여 알맞는 갯수와 위치의 매개변수 자리에 값을 넣어 주면 끝!

더 많은 양의 car를 만들고 싶다면 역시 forEach문을 사용해서 여러가지도 추가할 수도 있다.