Getter & Setter

beenvyn·2024년 7월 13일
0

Javascript 심화

목록 보기
10/18
post-thumbnail

🤔 Getter & Setter를 사용하는 이유

  • 오브젝트 내의 함수들을 괄호없이 사용하기 위해서
  • object 안의 데이터가 복잡할 수록 함수를 만들어놓는게 데이터를 꺼내기 쉬워서
  • 내부에 있는 변수를 건드릴 때 실수를 방지하기 위해서
  • 데이터의 무결성을 보존하기 위해서

요즘엔 직접 원본 데이터를 만지는게 아니라 함수로 데이터를 간접적으로 다루는게 대세임..

🫳🏻 Getter

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

내년 나이를 출력해주는 함수를 만들어서 사용한다고 할 때 위와 같이 함수를 사용해 데이터를 끄집어내서 사용하는 방법이 요즘 많이 사용된다.

get 키워드

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

사람.nextAge();// before
사람.nextAge;// after

get 키워드를 사용하면 이렇게 소괄호 없이 함수를 호출할 수 있다.

getter는 데이터를 꺼내 쓰는 함수를 만들고 싶을 때 사용
getter는 파라미터가 있으면 안되고 함수 내에 return을 가져야 한다.

🫸🏻 Setter

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

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

set 키워드

var 사람 = { 
  name : 'Kim',
  age : 30,
  set setAge(나이) { // setter
    this.age = parseInt(나이);
  },
}
사람.setAge(20);// before
사람.setAge = 20;// after

set 키워드를 사용하면 이렇게 소괄호 없이 함수에 데이터를 넘겨주고 호출할 수 있다.

setter는 데이터 변경(입력, 수정)하는 함수를 만들고 싶을 때 사용
setter는 파라미터가 꼭 1개 있어야 한다. 두개 이상 안됨.

💟 Class에서 사용하는 get/set

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

var 사람1 = new 사람();

사람1.nextAge;
사람1.setAge = 50;

class에서도 위와 같은 용도로 getter/setter를 사용할 수 있다.

profile
୧ʕ•̀ᴥ•́ʔ୨

0개의 댓글