[JavaScript] Get, Set

돌고 돌아 이번 발표 주제는 자바스크립트의 획득자 (get), 설정자 (set) 의 주제를 맡게 되었다.

 

먼저 자바스크립트에서의 property는 data property, accessor property 이렇게 두 종류로 나뉜다.

 

data property (데이터 프로퍼티)

data property는 값을 저장하기 위한 프로퍼티 이며, 일반적으로 자바스크립트에서 사용하는 프로퍼티의 경우 data property에 속한다.

 

accessor property  (접근자 프로퍼티)

data property와 다르게 accessor property는 값이 존재하지 않는다.

 

가상의 property로 읽고 쓸 수는 있지만 실제로 존재하지 않는 property 이다. (획득자 getter. 설정자 setter 메서드로 표현)

 

객체 리터럴 안에서의 getter와 setter는 get과 set으로 표현할 수 있다.

 

굳이굳이굳이 이렇게 사용해야 하는

이유는 객체 사용의 안정성을 위해서 (객체의 무결성을 보장)

 

 

💡 여기서 무결성이란?

데이터의 정확성과 일관성을 유지하고 보증 하는 것

 

 

 

객체 리터럴에 직접 값에 접근해도 되지만 get과 set를 사용하면 속성 값의 접근을 우회하여 접근하는 것이기 때문에 제한 사항이 걸려있다면 값을 안전하게 지킬 수 있다.

 

또한 객체 내부에서만 사용하기 때문에 임의의 속성 값 적용으로 인한 에러를 최대한 막을 수 있다.

 

const obj = {
	_name: 'default',
	get propName() { return this._name },
	set propName(name: string) { this._name = name; },
}

 

obj.propName을 사용하여 property를 읽어올 수 있다. (getter property를 읽을 때 동작)

obj.propName = name; 으로 새로운 name 을 전달하여 property에 값을 할당할 수 있다. (setter property에 값을 쓸 때 호출)

 

 

getter

---

accessor property 를 사용하면 함수처럼 호출하지 않고, 일반 프로퍼티에서 값에 접근하는 것처럼 접근하여 값을 얻어낼 수 있다.

 

const user = {
	_name: '전다훈',
	get propName() { return this._name },
	propName2() { return this._name },
}

user.propName    // return "전다훈"
user.propName2() // return "전다훈"

 

setter

---

setter를 사용하지 않고 직접 접근하여 값을 변경하게 되면 의도치 않은 값으로 변경될 가능이 존재하게 된다.

이를 set 으로 통제하여 좀 더 정확한 값으로의 설정이 가능하게 된다.

 

const user = {
  get name() {return this.name},
  set name(value: string) {
    if (value.length < 3) {
      console.log("이름은 세 글자 이상으로 입력해주세요.");
      return;
    }
    this.name = value;
  }
}

 

data property name과 age를 사용해서 사용자를 나타내는 객체를 구현한다고 가정하여 아래와 같은 User Class가 있다고 가정

 

class User {
    _name: string;
    _age: number;

    constructor(name: string, age: number) {
        this._name = name;
        this._age = age;
    }
}

const user = new User("DaHoon", 30);

console.log(user._age); // 30

 

age 대신에 birthday를 사용하여 age를 계산해야한다고 변경된다면..

 

class User {
  _name: string;
  _brithDay: Date;

  constructor(name: string, _brithDay: Date) {
    this._name = name;
    this._brithDay = _brithDay;
  }
}

const user = new User("DaHoon", new Date(1994, 06, 17));

 

생성자 함수를 직접 수정해줘야한다.

그렇게 되면 기존에 age 를 사용하고 있는 곳도 수정을 해줘야한다.

 

따라서 age를 직접 수정하기 보다는 getter를 이용하여 이 문제를 해결할 수 있다.

 

class User {
  _name: string;
  _brithDay: Date;

  constructor(name: string, _brithDay: Date) {
    this._name = name;
    this._brithDay = _brithDay;
  }

  get age() {
    const currenrYear = new Date().getFullYear();
    return currenrYear - this._brithDay.getFullYear();
  }
}

const user = new User("DaHoon", new Date(1994, 06, 17));

 

 

 

 

 

 

---