[JavaScript/ES6] getter, setter ( for 데이터 무결성)

📌 getter, setter

- 오브젝트 내의 함수들을 괄호 없이 쓸 수 있게 만들어주는 키워드

- 데이터의 무결성을 보존하기 위해 쓰는 키워드

 

원본 데이터는 immutable 해야 한다. (immutable  = 불변)

데이터를 수정하거나 출력할 때 직접 원본 데이터를 만지는 것이 아니라 함수로 간접적으로 다루는 게 대세이다.

 

📌 함수로 object 데이터 꺼내기

var 사람 = {
  name : 'Kim',
  age : 30,
  nextAge(){
    return this.age + 1
  }
}

 

nextAge 는 내년 나이를 출력해주는 함수이다.

원본 데이터가 그대로인 것을 확인 (사람 obj)

 

 

 

🔎 굳이 왜 nextAge 를 활용할까?

- object 안의 데이터가 복잡할 수록 함수를 이용하는 것이 데이터를 꺼내기가 쉽다.

- 내부에 있는 name, age 변수를 건드리지 않는다 => 실수 방지

 

📌 함수로 object 데이터 수정하기

사람.age 를 수정하고 싶다면,

var 사람 = {
  name : 'Kim',
  age : 30,
  setAge(나이){
    this.age = 나이
  }
}

 

사람.age = 10 으로 안하고

사람.setAge(10) 으로 하는 이유는 뭘까?

- 내부에 있는 name, age 를 직접 건드리지 않아서 실수를 방지할 수 있다.

 

사람.age 변경하기

 

var 사람 = {
  name : 'Kim',
  age : 30,
  setAge(나이){
    this.age = parseInt(나이)
  }
}

사람.setAge('100'); // 문자형이 들어와도 숫자로 셋팅

 

이런식으로 setAge 메소드 안에 문자형이 들어와도 방지할 수 있는 안전장치를 마련할 수 있다.

 

📌 간편하게 get/set 키워드 붙이기

var 사람 = {
  name : 'Kim',
  age : 30,
  set setAge(나이){
    this.age = parseInt(나이)
  }
}

사람.setAge = 40; // set 키워드 사용 시

 

set 키워드를 활용하면

사람.setAge = 40;

이런식으로 쓴다. 좀 더 직관적이다.

 

set 붙은 함수 => setter 라고 부름

 

 

get 을 활용해보자.

var 사람 = {
  name : 'Kim',
  age : 30,
  // return 필수, 파라미터 있으면 X
  get nextAge(){
    return  this.age + 1  
  }
}

console.log( 사람.nextAge ) // get 키워드 사용 시 소괄호 생략

 

 

get 붙은 함수 => getter 라고 부름

 

 

데이터를 가져오기만 하는건 get 을 쓰면되고,

데이터를 새로 수정하거나 셋팅해줄 땐 set 을 쓰면 된다.

 

⚡ 주의)

set : 파라미터 한 개가 꼭 존재해야 함

get : 파라미터 없어야 함, reuturn 필수

 

📌 class 에서 get/set 사용하기

class 사람 {
  constructor(){
    this.name = 'Park';
    this.age = 20;
  }
  get nextAge(){
    return this.age + 1
  }
  set setAge(나이){
    this.age = 나이;
  }
}

var 사람1 = new 사람();