JavaScript

[JS] getter, setter

잼굴 2022. 5. 20. 16:31

 

 

      let 사람 = {
        name: "Park",
        age: 30,
        nextAge() {
          return this.age + 1;
        },
      };

      사람.nextAge;

 

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

 

1. object 자료가 복잡할 때 굿

2. object 자료 수정해야 할 때 , 함수를 만들어두면 편함

 

      let 사람 = {
        name: "Park",
        age: 30,
        nextAge() {
          return this.age + 1;
        },
        setAge(나이) {
          this.age = 나이;
        },
      };

만든함수로 수정

사람.age = '20';  // 그냥 이렇게 만들면 쉬운데 왜 굳이 setAge() 만듬?

 

this.age = parseInt(나이);

==>  이렇게 데이터 수정시 미리 검사 가능해서 , 안전장치 (숫자 넣어야하는데 문자넣을까봐)

 

 


 

ES5 부터 새로운게 생김  

바로 set / get 

 

set = 데이터 변경하는 함수에 사용

get = 데이터 꺼내쓰는 함수에 사용

      let 사람 = {
        name: "Park",
        age: 30,
        get nextAge() {
          return this.age + 1;
        },
        set setAge(나이) {  // << 이부분  set을 써준다
          this.age = parseInt(나이);
        },
      };

      사람.setAge = '20'
      // 사람.setAge('20');  set쓰면  소괄호 안써도 됨
      
      사람.nextAge;  
      // 사람.nextAge(); 쓰면 에러남

set을 쓰면 데이터 입력 하듯이 괄호 안쓰고 적용가능!

 

☠주의사항☠

 

get 함수는 가져오는 함수이기 때문에 무적권 return이 있어야 함 / 파라미터 입력 X

set 함수는 무적권 파라미터는 1개이어야 함

 

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

      let 사람1 = new 사람();

class도 똑같이 get, set 사용가능

 

 

'JavaScript' 카테고리의 다른 글

[JS] Vending Mahcine 우여곡절 제작기  (0) 2022.06.09
[JS] extends / super  (0) 2022.05.20
[JS] ES5 ES6 상속기능 사용하기 (create , class)  (0) 2022.05.20
[JS] prototype  (0) 2022.05.20
[JS] constructor 정리  (0) 2022.05.19