JS중급_getter, setter

Adrian·2022년 3월 15일
0
post-thumbnail

▶️ 함수로 object 꺼내기

getter, setter 문법은 오브젝트 내의 함수들을 괄호없이 쓸 수 있게 만들어주는 키워드인데, 깊숙히 들어가면 데이터의 무결성을 보존하기 위해 쓰는 키워드라고 보면 된다. (원본 데이터는 불변(immutable)해야한다.)

  var people = {
      name : 'kim';
      age : 30;
  }

예시로 위의 오브젝트에서 age + 1을 반환하는 함수를 만든다고 해보자.

  var people = {
      name : 'kim';
      age : 30;
  }
      nextAge(){
          return this.age + 1 
      }
  • people.age + 1 라고 프로퍼티를 직접 이용하면 될 것을 굳이 귀찮게 function을 따로 만들 필요가 있는것일까?
  • 답은 그렇다. 오브젝트 내의 데이터가 복잡할수록 human.age + 1 처럼 property를 직접 이용하기 보다는 function을 이용하는 것이 data를 꺼내기 더 쉽다.
  • 특히 매우 긴 object 안에서 원하는 자료 몇개만 뽑고 싶을 떄 미리 function을 만들어놓으면 쉽게 data를 꺼낼 수 있다.

▶️ 함수로 object 수정하기

  var people = {
      name : 'kim';
      age : 30;
  }
setAge(age){
	this.age = parseInt(age);//parseInt는 문자열을 숫자로 바꿔주는 자바스크립트의 내장함수
}

people.setAge('40');
  • 꺼내는 것과 비슷하게 수정할때도 함수를 이용한다.
  • setAge라는 함수를 오브젝트 내에 추가했는데, 이 함수는 파라미터를 한개 입력할 수 있는데 그 파라미터를 그대로 this.age에 집어넣는 역할을 한다.
  • 이렇게하면 내부에 있는 변수를 직접 건드리지 않아서 실수를 방지할 수 있다. 한 겹의 안정장치를 만든다고 보면 된다.

▶️ get/set 키워드를 써보자.

  var people = {
      name : 'kim';
      age : 30;
  }
  setAge(age){
      this.age = parseInt(age);//parseInt는 문자열을 숫자로 바꿔주는 자바스크립트의 내장함수
  }

위에서 setAge(40)이렇게 사용하는 것은 데이터를 집어넣기 조금 복잡한 면이 있다. 이를 좀 더 간단히 사용하기 위해 get/set 키워드를 사용해보자.

  var people = {
      name : 'kim';
      age : 30;
  }
  set setAge(age){
      this.age = parseInt(age);
  }

	people.setAge = 40;

이렇게 set 키워드를 함수 옆에 추가해주면 등호로 데이터를 입력할 수 있다. 이렇게 set이 붙은 함수들은 setter라고 한다.

  var people = {
      name : 'kim';
      age : 30;
  }
  get nextAge(){
      return this.age + 1;
  }

  console.log( people.nextAge );

함수를 꺼낼때는 이렇게 get 키워드를 출력하면 소괄호 없이 직관적으로 데이터를 꺼낼 수 있다. 이렇게 get이 붙은 함수들은 getter라고 한다.

class person{
    constructor() {
        this.name = 'Park';
        this.age = 20;
    }
    get getAge() {
        return this.age + 1;
    }
    set setAge(age) {
        this.age = age;
    }
};

var person1 = new person();
console.log(person1.getAge);

person1.setAge = 50;
console.log(person1);

클래스에서는 이렇게 인스턴스 앞에 써주면 동일하게 사용 가능하다.


profile
관조, 사유, 끈기

0개의 댓글