2023 - 05 - 31 클래스 Getters & Setters

 

오늘 할일.

1. 5주차 강의 듣기.

2. 알고리즘 복습

3.  프로그래머스 문제 풀기

 

오늘 배운 것.

 

class에서의 Getters와 Setters

객체지향 프로그래밍 언어에서는 Getters와 Setters 에 대한 기본 개념들이 있다. class를 통해 객쳬(인스턴스)를 만들고, 인스턴스 안에는 property(인자)가 있음.  예를 들면 new Class (a, b, c)

위와같이 만든 프로퍼티에 접근하고 세팅하기 위한 getters와 setters를 제공함.

 

기본 형태

 

class Rectangle {
    constructor (width, height) {
        this._width = width;
        this._height = height;
    }

    get width () { return this._width;}
    set width (value1) {this._width = value1;

        if(value1 <= 0){console.log('[오류] 가로 길이는 0보다 커야 합니다.')return;} 
        else if (typeof value1 !== 'number')
        {console.log('[오류] 가로 길이로 입력된 값이 숫자 타입이 아닙니다.') return;}
        
        this._width = value1;}
        
    get height () {
        return this._height;

    }

    set height (value2) {
        this._height = value2;

        if(value1 <= 0){console.log('[오류] 세로 길이는 0보다 커야 합니다.')return;} 
        else if (typeof value1 !== 'number')
        {console.log('[오류] 세로 길이로 입력된 값이 숫자 타입이 아닙니다.') return;}
        
        }
        this._height = value2;
    }
    
    getArea(){
    const size = this._width * this._height
    console.log(`넓이는 => ${size}입니다.`)
}
};

const rectangle1 = new Rectangle(10, 20);
rectangle1.getArea();

알아보기 편하게 일단 괄호 배열 안맞추고 씀.

value1과 value2는 임의지정값이다.

 

setter를 사용할 경우 외부로부터 값이 들어왔을 때 내부적으로 검증 후 셋팅할 수 있다.
getter와 setter를 사용할떄, this에 접근하는 프로퍼티의 이름은 항상 앞에 언더스코어 (언더바)를 붙인다.
this._  이렇게 쓰면 됨.

 

실행시 오류가 발생하는 경우 주로  :  Maximum call stack size exceeded
무한루프가 계속되어 call stack 입장에서는 실행 컨텍스트가 계속 발생.
call stack에 쌓이는 실행 컨텍스트의 사이즈가 너무 커졌다. 그것을 방지하기 위해 this._ 를 쓰는 것

 

class Rectangle {
    constructor (width, height) {
        this._width = width;
        this._height = height;
    }
    // width를 위한 getter
    get width () {
        return this._width;
    }
    // width를 위한 setter
    // 검증1. value1가 음수이면 오류가 발생한다.
    set width (value1) {
        this._width = value1;

        if(value1 <= 0){
            console.log('[오류] 가로 길이는 0보다 커야 합니다.')
            return; //조건문을 통과하지 못한경우 바깥으로 빠지도록 return문
            
        } else if (typeof value1 !== 'number'){
            console.log('[오류] 가로 길이로 입력된 값이 숫자 타입이 아닙니다.')
            return; //조건문을 통과하지 못한경우 바깥으로 빠지도록 return문
        }
        this._width = value1;

    }
    // height를 위한 getter
    get height () {
        return this._height;

    }
    // height를 위한 setter
    set height (value2) {
        this._height = value2;

        if(value2 <= 0){
            console.log('[오류] 세로 길이는 0보다 커야 합니다.')
            return; //조건문을 통과하지 못한경우 바깥으로 빠지도록 return문
            
        } else if (typeof value2 !== 'number'){
            console.log('[오류] 세로 길이로 입력된 값이 숫자 타입이 아닙니다.')
            return; //조건문을 통과하지 못한경우 바깥으로 빠지도록 return문
            
        }
        this._height = value2;
    }


// getArea 라는 메서드 추가해보기 = 가로*세로 = 넓이구하기

getArea(){
    const size = this._width * this._height
    console.log(`넓이는 => ${size}입니다.`)
}
};




// instance 생성
const rectangle1 = new Rectangle(10, 20);
rectangle1.getArea();

// 넓이는 => 200입니다.

 

그러면 어제 했던, car를 getters와 setters를 적용시켜 해보자.

1. Car라는 새로운 클래스를 만들되, 처음 객체를 만들 때는
다음 네 가지의 값을 필수로 입력해야 합니다.

(1) modelName
(2) modelYear
(3) type : 가솔린, 전기차, 디젤
(4) price

2. makeNoise() 매서드를 만들어 클락션을 출력해주세요.
3. 이후 자동차를 3개 정도 만들어주세요 (객체 생성)

[추가 요구사항]
modelName, modelYear, type, price를 각각 세팅하는 메서드 만들기
(1) set해서 get하는 로직까지 만든 인스턴스를 통해 만들어보기.

(2) if문을 사용해 검증까지 사용한 메서드 만들어보기.

 

(1) set해서 get하는 로직

get은 return을 하고, set은 value를 넣는다.

class Car {
    constructor(modelName, modelYear, type, price) {
        this._modelName = modelName;
        this._modelYear = modelYear;
        this._type = type;
        this._price = price;
    }
get modelName () {
    return this._modelName;
}
set modelName (val1) {
    this._modelName = val1;
}
get modelYear(){
    return this._modelYear;
}
set modelYear(val2){
    this._modelYear = val2;
}
get type(){
    return this._type;
}
set type(val3){
    this._type = val3;
}
get price(){
    return this._price;
}
set price(val4){
    this._price = val4;
}

    BestCar(){
        console.log ("모델명 :" + this._modelName)
        console.log (this.modelYear + "년도에 생산되었습니다.")
        console.log ("타입 :" + this._type)
        console.log ("가격 :" + this._price + "만원")
    };
};

const Car1 = new Car("Sorento", "2023", "Electronic", 5000);
const Car2 = new Car("Grandeur", "2020", "gasolin", 8000);
const Car3 = new Car("Benz", "2021", "diesel", 9000);

Car1.BestCar();
Car2.BestCar();
Car3.BestCar();


모델명 :Sorento  2023년도에 생산되었습니다.  타입 :Electronic  가격 :5000만원
모델명 :Grandeur  2020년도에 생산되었습니다.  타입 :gasolin  가격 :8000만원
모델명 :Benz  2021년도에 생산되었습니다.   타입 :diesel   가격 :9000만원

 

 

(2) if문을 사용해 검증까지 사용한 메서드 만들어보기.

get은 return을 하고, set은 value를 넣는다.

if조건문은 set에 넣는다. if문 뒤에는 if문을 통과하지 못한 경우 바깥으로 빠지도록 return; 문을 넣는다.

return문은 조건문의 중괄호에 같이 넣는다. if문을 통과해야 작동되도록, if문을 먼저 쓰고나서  this._ 문을 쓴다.

 

class Car {
    constructor(modelName, modelYear, type, price) {
        this._modelName = modelName;
        this._modelYear = modelYear;
        this._type = type;
        this._price = price;
    }
    get modelName() {
        return this._modelName;
    }
    set modelName(val1) {

        if (val1.length <= 0) {
            console.log("[오류] 모델명이 입력되지 않았습니다. 입력해주세요!")
            return;
        } else if (typeof val1 !== "string") {
            console.log("[오류] 입력하신 모델명이 문자형이 아닙니다! 확인해주세요")
            return;
        }

        this._modelName = val1;
    }
    get modelYear() {
        return this._modelYear;
    }
    set modelYear(val2) {

        if (val2.length !== 4) {
            console.log("[오류] 입력하신 생산년도가 4자리가 아닙니다. 확인해주세요")
            return;
        } else if (typeof val2 !== "number") {
            console.log("[오류] 입력하신 연도가 숫자형이 아닙니다! 확인해주세요")
            return;
        }

        this._modelYear = val2;
    }
    get type() {
        return this._type;
    }
    set type(val3) {

        if (val3.length <= 0) {
            console.log("[오류] 모델타입이 입력되지 않았습니다. 입력해주세요!")
            return;
        } else if (val3 !== "Electronic" || "Gasolin" || "Diesel") {
            console.log("[오류] 입력하신 타입이 잘못되었습니다. 확인해주세요")
            return;
        }

        this._type = val3;
    }
    get price() {
        return this._price;
    }
    set price(val4) {

        if (typeof val4 !== "number") {
            console.log("[오류] 입력하신 가격이 숫자형이 아닙니다! 확인해주세요")
            return;
        } else if (val4 <= 100) {
            console.log("[오류] 가격은 100만원보다 작을 수 없습니다. 확인해주세요")
            return;
        }

        this._price = val4;
    }

    BestCar() {
        console.log("모델명 :" + this._modelName)
        console.log(this.modelYear + "년도에 생산되었습니다.")
        console.log("타입 :" + this._type)
        console.log("가격 :" + this._price + "만원")
    };
};

const Car1 = new Car("Sorento", 2023, "Electronic", 5000);
const Car2 = new Car("Grandeur", 2020, "Gasolin", 8000);
const Car3 = new Car("Benz", 2021, "Diesel", 9000);

Car1.BestCar();
Car2.BestCar();
Car3.BestCar();



//car1 Getters 예시
console.log(Car1.modelName); // Sorento

//Car1 setters 예시
Car1.modelName = 1;
console.log(Car1.modelName);
// 이 경우 오류창 나옴. [오류] 입력하신 모델명이 문자형이 아닙니다! 확인해주세요