프로퍼티의 게터와 세터

자바스크립트에서 객체는 프로퍼티(Property, 속성)를 가지고 있습니다.

각 프로퍼티는 이름과 값이 있습니다. 이름은 문자열이고, 값은 어떤 타입이든 가리지 않습니다.

const obj = {
 name: "객체"
}

프로퍼티는 추가, 삭제가 가능합니다. 그러므로 객체는 프로퍼티의 집합이기도 합니다.

프로퍼티는 데이터, 접근자 프로퍼티로 나뉩니다.

 

데이터 프로퍼티(Data Property)

const person = {
 age: 15, // 데이터 프로퍼티
 name: "김개굴" // 데이터 프로퍼티
}

객체의 프로퍼티 대부분은 이름과 값이 있는 데이터 프로퍼티입니다.

이 객체는 두 개의 데이터 프로퍼티가 있습니다.

 

접근자 프로퍼티(Accessor Property)

위의 데이터 프로퍼티와는 좀 다른 모양새입니다.

함수의 형태로 정의되지만 호출은 데이터 프로퍼티에 접근하는 것처럼 합니다.

 

이 프로퍼티는 접근자 메서드 게터(Getter)와 세터(Setter)를 지원합니다.

 

말 그대로 게터와 세터는 객체 프로퍼티 값에 접근하거나 수정할 수 있는 함수입니다.

 

접근하고 수정하는데 왜 게터와 세터가 필요할까요?

obj 객체의 name 값을 읽거나 수정하고 싶다면 이렇게 하면 되지 않나요?

const objName = obj.name;
obj.name = "김야옹"

 

게터와 세터를 사용하는 이유

프로퍼티에 대한 추상화와 제어를 제공하기 위해서입니다.

접근자 메서드를 사용하면 객체 프로퍼티에 접근하고 수정하는 방법을 정의할 수 있습니다.

 

데이터 프로퍼티는 바로 접근이 가능하지만,

세터 메서드에 조건문을 작성한다면 바로 접근할 수 없을 것입니다.

 

그래서 의도하지 않았던 변경을 막을 수 있고, 조건을 추가하여 수정이 가능하도록 할 수 있습니다.

let person = {
 age: 15, 
 name: "김개굴".

 get accessorName() {
  return this.name
 }

 set accessorName(newName) {
  if(newName.length > 4) {
   console.log('4글자가 넘는 이름은 변경할 수 없습니다.')
  } else {
    this.name = newName
  }
 }
}

person.accessorName = "김야옹" // person = { _name: "김야옹" }
person.accessorName = "개굴개굴개굴" // console.log('4글자가 넘는 이름은 변경할 수 없습니다.')

게터 메서드는 인자없이 호출됩니다.

name 게터 메서드는 단순히 값을 반환합니다.

 

값을 설정할 때는 세터 메서드를 호출하고, 할당 표현식의 오른쪽 값을 인자로 전달합니다.

person.name = "김야옹" 의 경우 "김야옹"이 전달됩니다.

 

이 코드에서 작성된 name 세터 메서드는 유효성 검사가 통과할 때만 값이 업데이트 됩니다.

 

게터와 세터는 하나만 있을 수도 있습니다.

name 프로퍼티의 경우는 게터와 세터가 모두 있습니다. 읽기와 쓰기가 모두 가능한 프로퍼티라는 의미입니다.

 

게터 메서드 하나만 있다면 읽기 전용이고,

세터 메서드 하나만 있다면 쓰기 전용 프로퍼티입니다.

 

만약 이름을 반환할 때, 나이도 같이 반환하고 싶을 때에도 키워드 this를 활용할 수 있습니다.

let person = {
 age: 15, 
 name: "김개굴".

 get accessorName() {
  return `${this.name} (${this.age})`
 }

  ...
 }

return person.accessorName // 김개굴 (15)

자바스크립트에서 게터와 세터는 객체의 메서드로 호출되므로 this는 객체 person을 가리킵니다.

 

또한 접근자 프로퍼티도 데이터 프로퍼티와 마찬가지로 상속됩니다.

 

요약

• 객체는 자바스크립트의 데이터 구조이며 프로퍼티의 집합이기도 하다.
• 프로퍼티는 이름과 값이 있다.
• 객체의 접근자 프로퍼티에 Getter와 Setter가 있다.
• 함수처럼 호출되며 데이터 프로퍼티처럼 접근한다.
• 접근자 프로퍼티는 접근자 메서드 Getter와 Setter를 갖는다.
• 이 메서드들은 원치 않는 변경을 방지하여 코드의 안전성과 유지보수성을 위해 사용된다.