먼저 자바스크립트에서의 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으로 표현할 수 있습니다.
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 {
public _name: string;
public _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 {
public _name: string;
public _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));
console.log(user.age)