객체의 프로퍼티 종류
- 데이터 프로퍼티 : 키, 값 등의 데이터를 담은 프로퍼티
- 접근자 프로퍼티 : 함수이며 값을 획득(get)하고 설정(set)하는 역할이지만 외부 코드에서는 일반 프로퍼티처럼 보임.
접근자 프로퍼티의 설명자는 데이터 프로퍼티가 갖고 있는 설명자 중
value(값)와 writable(수정여부)가 없는 대신 get과 set 메서드를 갖고 있으며 서로의 기능을 대체한다.
데이터 프로퍼티의 설명자를 설정할 때와 같이 Object.defineProperty로 get과 set 메서드를 전달할 수 있으며
value 설명자는 존재하지 않기 때문에 한 프로퍼티 내에서 value와 value의 역할을 하는 get을 동시에 설정할 수는 없다.
getter / setter
접근자 프로퍼티는 getter와 setter 메서드로 표현되며 객체 리터럴 내에서 get과 set으로 나타낼 수 있음
<script>
let cookie = {
get name(),
//getter로 cookie.name을 실행하는 함수
set name(value),
//setter로 cookie.name = value를 실행하는 함수
};
</script>get 프로퍼티() : 인수가 없으며 값을 불러올 때 실행됨.
cookie 객체 내에 있는 getter info는 함수지만 외부 코드에서는
cookie.info처럼 점 표기법으로 일반 프로퍼티를 불러오 듯 사용할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>프로퍼티 getter setter</title>
</head>
<body>
<script>
let cookie = {
name: "choco",
price: "4000원",
get info() {
return `${this.name}쿠키는 ${this.price}입니다.`;
},
};
console.log(cookie.info); // 'choco쿠키는 4000원입니다.'
</script>
</body>
</html>
단, getter 메서드만 있기 때문에 점 표기법으로는 값을 변경할 수 없다.
<script>
console.log(cookie.info); // 'choco쿠키는 4000원입니다.'
cookie.info = 'getter메서드만 있기 때문에 값을 변경할 수 없음';
console.log(cookie.info) // 'choco쿠키는 4000원입니다.'
</script>
setter 메서드를 작성해줘야 값의 변경이 가능하게 된다.
<script>
let cookie = {
name: "choco",
price: "4000원",
get info() {
return `${this.name}쿠키는 ${this.price}`;
},
set info(value) {
[this.name, this.price] = value.split(" ");
},
};
console.log(cookie.info); // 'choco쿠키는 4000원입니다.'
cookie.info = "바닐라 5000원";
console.log(cookie.info); // '바닐라쿠키는 5000원입니다.'
</script>
set 메서드는 하나의 인수를 전달 받는데, cookie.info = "값"으로 작성한 부분이 인수로 전달된다.
set 함수를 살펴보면 전달 받은 "바닐라 5000원"을 값으로 입력하는데 String.split 메서드를 사용해 띄어쓰기로 값을 나눔.
앞의 텍스트는 this.name, 뒤의 텍스트는 this.price의 값을 재대입한다.
이렇게 접근자 프로퍼티를 사용해서 info라는 프로퍼티를 실제로 사용할 수 있게 됐지만 사실 '가상 프로퍼티'로
읽고 쓸 수 있지만 실제로 존재하지 않음.
getter / setter 활용하기
객체에 프로퍼티를 제어할 때 점(.)표기법을 사용하는 게 값을 추가하고 수정하는데에 더 간편할 수 있다.
접근자 프로퍼티는 get, set 메서드를 작성해야줘야 하는 번거로움이 있지만.
이를 활용하면 '읽기 전용'프로퍼티 / '쓰기 전용'프로퍼티를 만들 수 있으며
함수를 통해 값을 동적으로 받아오기 때문에 객체 내 프로퍼티를 통제할 때 유용하게 사용할 수 있을 것 같다.
get, set 메서드로 글자 수 통제하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>프로퍼티 getter setter</title>
</head>
<body>
<script>
const nick = {
get name() {
return this.name;
},
set name(value) {
if (value.length > 4) {
return alert("4글자 이하로 작성해주세요");
}
this.name = value;
},
};
nick.name = "바다토끼"; // '바다토끼'
console.log(nick.name);
nick.name = "산으로 간 토끼"; // "4글자 이하로 작성해주세요" alert창 출력
</script>
</body>
</html>
nick.name = ''으로 입력된 값은 _name 프로퍼티에 저장되고 get 메서드를 통해 name으로 출력된다.
마찬가지로 set 메서드를 통해 name의 값을 받아와 _name에 저장하고 다시 get 메서드로 가져와 name에 출력한다.
console.log(nick._name === nick.name) // true실제 외부에서 nick._name을 쓸 순 있지만, 언더바(_)를 쓰는 것은 접근자 프로퍼티 내에서만 활용하는 것이 일종의 관습
'JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트 내장 객체의 prototype (0) | 2022.12.16 |
|---|---|
| [JavaScript] 함수 프로퍼티 prototype과 객체 [[Prototype]] (0) | 2022.12.15 |
| [JavaScript] DOM객체 속성 제어 (0) | 2022.12.14 |
| [JavaScript] DOM의 구조(DOM 트리) (0) | 2022.12.14 |
| [JavaScript] 브라우저와 호스트 환경 (0) | 2022.12.14 |