Class - getters & setters

최문길·2023년 11월 5일
1

JavascriptES6

목록 보기
16/23

요약

  1. Object의 함수 앞에서'만' 사용 가능

  2. Class의 Prototype의 함수 앞에서 '만' 사용 할 수 있다.


    3. constructor 내부에서는 사용 못 함.


    4. function constructor( ) { set/get ( x ) } <- set/get 못씀


    5. class 붕어빵틀{ constructor( ) { set/get ( x )} } <- set/get 못씀

Q. getters & setters를 왜 사용하는가?

A. 얕게 말하자면 오브젝트 내의 함수들을 괄호없이 쓸 수 있게 만들어주는 키워드인데...

깊숙히 들어가면 데이터의 무결성을 보존하기 위해 쓰는 키워드라고 한다.

왜 getters& setters 사용하는지


함수로 object 데이터 꺼내려면
var obj = {
  age : 20,
  nextAge(){
    return this.age + 1
  }
}
// 다음 나이를 알고 싶으면??
obj.nextAge()// 21

데이터를 끄집어내서 함수를 사용하는 방법이 요즘 유행이라고 한다.
지금도 유행하는거 맞나??

Q. 굳이 저렇게 하는 이유는

  • object안의 데이터가 복잡할 수록 함수 만들어 놓는게 데이터 꺼내기 쉽다.

A. 안전장치를 걸어놓고 Object안의 변수들 안 건드리고 원하는 것을 얻어내기 위해 함수로 만들어서 사용함


Q. 함수로 Object데이터를 수정하려면

var obj = {
  age : 20,
  setAge(number){
    this.age =  parseInt(number)
  }
}

// 나이를 수정하고 싶으면
obj.age = 50

// 또는 함수를 만들어서 
obj.setAge(50) // 50

위의 데이터 꺼내려고 함수를 사용 하는 이유와 같다.
A. obj.age = 20이 아니라 obj.age= '20'으로 string 값을 입력하면 값이 더러워진다. (숫자여야 하는데!!!)

따라서 function 안전장치(age){this.age = parseInt(age)}

이렇게 하면 문자를 넣건 해도 함수 칭구가 알아서 방지 시켜준다.

그런데 함수를 사용해서 데이터 값을 보호, 방지 하려면 소괄호를 쳐주고 해야 해서 너무 힘이든다... 😥

그래서 나온것이 get/set 'KeyWord'이다.


set

사용방법은 So Easy~~~

나이를 수정하고 싶을 때 함수 하나 만들어주고 그 함수 '앞'에 set key-word 써주자

const human = {
  name : 'Choi',
  age :30,
  // 수정하고 싶은 함수
  set setAge(number) { // 함수 앞에 set 쓰자
    this.age = parseInt(number)
  }
}

human.setAge = 31; //set 키워드를 추가하면 이렇게 함수를 사용가능

▲ setAge() 함수 만들 때 왼쪽에 set이라는 키워드를 추가하면

등호로 데이터를 입력하거나 할 수 있다.
보기도 편하고 먼가 객체지향의 완성형 같다..

set 붙은 함수들을 setter라고 부른다.
(데이터를 set 하는 (수정하는) 함수라는 뜻)

단! 주의 할 점은
parameter가 들어가야한다. 머 당연한건가...?!

<script>

get

const human = {
  name : 'Choi',
  age :30,
  // 얻고 싶은 값의 함수 
  get nextAge(){
    return  this.age + 1  
  }
}

console.log(human.nexAge) // get 키워드를 추가하면 이렇게 함수를 사용가능

▲ nextAge()라는 함수를 만들 때는 get 키워드를 사용가능하고

소괄호 없이 함수 호출을 바로바로 해서 데이터를 꺼낼 수 있다.

그래서 get을 사용합니다. 그리고 get 붙은 함수들은 getter라고 부릅니다. (데이터를 get하는 (가져오는) 함수라는 뜻)

단! 주의 할 점은
파라미터가 있으면 안되고 , return keyword가 들어가야한다. 머 당연한건가...?!

get/set 사용하는 기준은

데이터를 원하면 get 해주는 함수 만들어서 get 쓰고
데이터를 입력,수정,set 해주는 함수들은 set 쓰면 된다.

Class에서 사용하는 get/set

오브젝트에서 get/set과 엄청 유사함
단!!

prototype 함수 안에서 사용해야 한다.

class Human {
    constructor() {
      this.animalType = 'human'
      this.lifeCycle = '60years' 
		this. age = 40;
    }
    get nextAge(){
      return this.age + 1
    }
	 set setAge(number){
		this.age = number;
	}
}

const human1 = new Human()

// 다음 나이 알고 싶은가?
human.nexAge

// 나이를 설정해주고 싶은가?
human.setAge = 300;

결국 class에서의 getter/setter도 object와 똑같기에 편리하게 수정 얻을 때 사용해보자

0개의 댓글