[코딩애플] js part 2-7. getter, setter 대체 왜 쓰는지 알아보기

getter, setter 대체 왜 쓰는지 알아보기

object를 생성해보자.

var 사람 = {
	name: 'Park',
    age: 30
}

object에서 age 자료를 꺼내고 싶으면?

사람.age;

근데 요새는 자료를 바로 꺼내지 않고, **자료를 꺼내는 법을 함수로 만들어서 꺼낸다**(유행하는 잡기술임).

내년 age를 알고 싶은 함수를 추가해보자.

var 사람 = {
    name: 'Park',
    age: 30,
    nextAge(){ // 지금 age에서 1을 더해서 출력하는 함수
        return this.age + 1; // this == 사람 object
    }
}
사람.age + 1; // 31
사람.nextAge(); // 31

age + 1하면 더 쉬운데 왜 nextAge를 만들까?

함수를 만들어 object 데이터를 다루는 이유

1. object 자료가 복잡할 때 이득

age가 엄청 긴 array라거나, 큰 object가 들어가 있을 수도 있다. 그렇다면 사람.age[1].age2.age3[4] ... 등 깊게 들어가야 한다. 내가 원하는 데이터를 꺼내쓰는 법을 미리 정의를 해두면 굳이 코드가 복잡해지지 않을 거다.

2. object 자료 수정시, 안전장치 기능개발 가능

나이를 바꾸고 싶다면

사람.age = 1; // 초보가 object 데이터를 수정하는 법

근데 숫자를 넣어야하는데 실수로 문자 데이터를 넣었다 하자.

사람.age = '20';

이렇게 데이터를 수정하면 실수 유발할 수 있다. 그래서 나이를 변경하는 함수를 만들어보자.

var 사람 = {
    name: 'Park',
    age: 30,
    nextAge(){
        return this.age + 1;
    },
    setAge(나이){ // 데이터 수정해주는 함수를 제작
        this.age = 나이;
    }
}
사람.setAge(20);

근데 age = 20하면 쉬운데 왜 굳이 setAge()를 만들었을까?

데이터 수정시 미리 검사 가능

사람.setAge('20');

실수로 문자를 쳤다고 하자. 그러면 데이터를 수정하기 전에 미리 검사할 수 있다.

var 사람 = {
    name: 'Park',
    age: 30,
    nextAge(){ 
        return this.age + 1; 
    },
    setAge(나이){
        this.age = parseInt(나이); // ⬅️
    }
}

사람.setAge(20);

즉, 데이터를 꺼내거나/수정하거나 그럴 때 편리하고 실수를 방지할 수 있다. 그래서 데이터 관리하기 편하다.

ES5: 만약 복잡한 소괄호 꼴보기 싫다면 => set/get 키워드

getter, setter

문법을 더 직관성 가지고 쓸 수 있도록 도와주는 키워드다. 소괄호를 떼준다고 생각하면 됨.

• **get** : 데이터를 꺼내쓰는 함수에 ➡️ setter
• **set** : 데이터 변경하는 함수에 ➡️ setter

var 사람 = {
    name: 'Park',
    age: 30,
    get nextAge(){ // ⬅️ getter
        return this.age + 1; 
    },
    set setAge(나이){ // ⬅️ setter
        this.age = parseInt(나이);
    }
}
사람.setAge = '20'; // ⬅️
사람.nextAge; // ⬅️ 소괄호 안써도 나이 출력됨

특징

**get 함수들(getter)**

• return이 꼭 있어야한다.
• 파라미터가 없어야 한다.

**set 함수들(setter) **

• 파라미터가 1개 있어야한다.

class에서 사용하는 get/set

• prototype 함수들에도 get/set 가능

class 사람{
	constructor(){
        this.name = 'Park';
        this.age = 20;
    }
    get nextAge(){
        return this.age + 1;
    }
    set setAge(나이){
        this.age = 나이;
    }
}
var 사람1 = new 사람();
사람1.nextAge; // 21
사람1.setAge = 23; // 사람1 = {name: 'Park', age: 23}

데이터 출력/수정 함수를 만들어 쓰는 이유?

데이터 무결성. 데이터를 수정하기 전에 검사하고 싶을 때 사용하는 문법들이다.

get를 사용해서 미리 정의해놓으면 관리를 편하게 데이터를 다룰 수 있다.

나중에 리액트, 뷰, 앵귤러도 이런식으로 모든 데이터를 다룬다.