자바스크립트 객체의 getter와 setter

이명진·2023년 3월 28일

getter setter

기초 중의 기초! JS - 이론

목록 보기

14/14

객체의 프로퍼티

객체의 프로퍼티는 2가지로 나뉘어 진다.

데이터 프로퍼티   객체 키와 값 들이 데이터 프로퍼티이다.
접근자 프로퍼티  get으로 함수 값을 획득하고 set으로 설정하는 역할을 담당한다. 외부 코드에서는 함수가 아닌 일반적인 프로퍼티처럼 보인다.

모양

let obj = {
  get propName() {
    // getter, obj.propName을 실행할 때 실행되는 코드
  },

  set propName(value) {
    // setter, obj.propName = value를 실행할 때 실행되는 코드
  }
};

getter

일반적으로 객체 내부의 함수를 호출 할 경우

obj.functionname // 함수의 정보에 대해서 알려준다.

하지만 getter로 설정 해두면

obj.functionname // getter로 설정된 함수의 리턴값이 도출된다.

getter 만 있고 setter가 없을 경우 obj.functionname = 값 으로 설정할때 에러가 발생한다.

setter

값을 받아서 기존 값들을 갱신해줄때 사용하거나 객체의 속성 값을 설정하기 전에 그 값을 검증하거나, 객체의 상태를 체크하는 등의 로직을 수행할 수 있다.

예시 코드

let person = {
  name: "John",
  age: 30,
  get fullName() {
    return this.name + " " + this.age;
  },
  set fullName(value) {
    let parts = value.split(" ");
    this.name = parts[0];
    this.age = parts[1];
  }
};

console.log(person.fullName); // "John 30"
person.fullName = "Jane 25";
console.log(person.fullName); // "Jane 25"

위 코드에서 fullName은 객체 person의 속성이고, 이 속성에 getter와 setter를 정의했습니다.
getter에서는 name과 age 속성 값을 조합해서 fullName을 반환하고, setter에서는 fullName을 name과 age로 나누어 person 객체의 name과 age 속성 값을 변경한다.

함수대체?

공부하면서 한가지 의문점이 생겼다. 그냥 getter, setter 를 몰랐을때 함수로 구현해서 조건문을 두어서 관리하면 되지 않을까?
굳이 getter와 setter를 사용할 필요가 있을까?

getter setter 사용 코드

let person = {
  name: "John",
  age: 30,
  get fullName() {
    return this.name + " " + this.age;
  },
  set fullName(value) {
    let parts = value.split(" ");
    this.name = parts[0];
    this.age = parts[1];
  }
};

console.log(person.fullName); // "John 30"
person.fullName = "Jane 25";
console.log(person.fullName); // "Jane 25"

함수 사용 코드

let person = {
  name: "John",
  age: 30,
  getFullName: function() {
    return this.name + " " + this.age;
  },
  setFullName: function(value) {
    let parts = value.split(" ");
    this.name = parts[0];
    this.age = parts[1];
  }
};


console.log(person.getFullName()); // "John 30"
person.setFullName("Jane 25");
console.log(person.getFullName()); // "Jane 25"

둘을 비교해보니 코드를 읽기에는 별로 불편함을 느끼지 못하였다. 구분하기에도 그닥.. 차이점을 느낄수 없었다.

하지만 getter와 setter의 차이점은 아래와 같다고 한다.

getter 와setter 사용 과 함수 사용의 차이점

문법적인 차이점: getter와 setter는 객체의 속성에 대한 문법적인 지원을 받습니다. 따라서 getter와 setter를 사용하면, 함수를 사용했을 때보다 객체의 속성을 더 직관적으로 다룰 수 있습니다.
가독성: getter와 setter는 객체의 속성 값을 손쉽게 읽고 수정할 수 있도록 해줍니다. 이를 함수와 조건문으로 구현할 경우 코드가 복잡해지고 가독성이 떨어질 수 있습니다. 반면에 getter와 setter를 사용하면 코드가 간결해지고, 객체의 속성 값을 읽고 수정하는 코드를 이해하기 쉬워집니다.
제어: getter와 setter를 사용하면, 객체의 속성 값을 외부에서 직접 수정할 수 없도록 제어할 수 있습니다. 이를 통해 객체의 불변성을 유지하거나, 속성 값에 대한 유효성 검사를 수행할 수 있습니다.
객체 지향 프로그래밍: getter와 setter는 객체 지향 프로그래밍에서 중요한 개념 중 하나입니다. 객체 지향 프로그래밍에서는 객체의 속성 값을 직접 수정하는 것이 아니라, 객체의 메서드를 통해 속성 값을 변경하도록 권장합니다. 이를 통해 코드의 재사용성과 유지보수성을 높일 수 있습니다.
따라서, getter와 setter를 사용하면 함수를 사용했을 때보다 객체의 속성을 더 직관적으로 다룰 수 있으며, 코드가 간결하고 가독성이 높아집니다. 또한, 객체의 불변성을 유지하거나, 객체 지향 프로그래밍의 개념을 적용할 수 있습니다.

결론

이번에 들어서 getter와 setter에 대해 다시 공부할수 있었고 차이점에 대해서 궁금증을 가지고 있었는데 알수 있었다.
일단 getter 와 setter는 객체 속성에 대한 문법적인 지원을 받는다고 한다. 또한 외부에서 수정이 불가능하다고 하니 확실히 더 중요한 내용인것 같다 .