1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
|
---
title: setter
slug: Web/JavaScript/Reference/Functions/set
tags:
- ECMAScript 5
- Functions
- JavaScript
- Language feature
- Reference
browser-compat: javascript.functions.set
translation_of: Web/JavaScript/Reference/Functions/set
---
{{jsSidebar("Functions")}}
**`set`** 구문은 객체의 속성에 할당을 시도할 때 호출할 함수를 바인딩합니다.
{{EmbedInteractiveExample("pages/js/functions-setter.html")}}
## 구문
```js
{set prop(val) { . . . }}
{set [expression](val) { . . . }}
```
### 매개변수
- `prop`
- : 주어진 함수를 바인딩할 속성 이름.
- `val`
- : `prop`에 할당을 시도한 값.
- `expression`
- : ECMAScript 2015 이후, 주어진 함수를 바인딩할 속성 이름을 구하는 표현식을 사용할 수도 있습니다.
## 설명
JavaScript의 설정자(_setter_)를 사용하면 지정한 속성 값의 변경을 시도할 때마다 함수를 호출할 수 있습니다. 설정자는 보통 접근자(_getter_)와 함께 '유사 속성'을 정의할 때 사용합니다. 어떤 속성에 설정자를 바인딩하는 동시에, 해당 속성이 값도 가지도록 할 수는 없습니다.
`set` 구문을 이용할 때는 다음 사항을 주의하세요.
- 설정자의 식별자는 숫자나 문자열일 수 있습니다.
- 설정자 함수는 최대 한 개의 매개변수만 가질 수 있습니다.
- 객체 리터럴에서, 같은 속성 키에 다수의 설정자를 바인딩할 수 없습니다.
```js example-bad
{
set x() { }, set x() { }
}
```
- 객체 리터럴에서, 설정자는 데이터 속성과 같은 키를 사용할 수 없습니다.
```js example-bad
{
x: ..., set x() { }
}
```
## 예제
### 객체 초기자에서 새로운 객체의 설정자 정의하기
다음 예제는 객체 `language`에 유사 속성 `current`를 생성합니다. `current`에 값을 할당하면, 해당 값을 `log` 속성에 저장합니다.
```js
const language = {
set current(name) {
this.log.push(name);
},
log: []
}
language.current = 'EN';
console.log(language.log); // ['EN']
language.current = 'FA';
console.log(language.log); // ['EN', 'FA']
```
`current`의 값은 정의하지 않았으므로, 할당이 아니라 접근을 시도하면 `undefined`만 반환하는 것에 주의하세요.
### `delete` 연산자로 설정자 제거하기
접근자를 삭제하려면 간단히 {{jsxref("Operators/delete", "delete")}} 연산자를 사용하세요.
```js
delete language.current;
```
### `defineProperty`를 이용해 이미 존재하는 객체에 설정자 정의하기
이미 존재하는 객체에 설정자를 추가하려면 {{jsxref("Object.defineProperty()")}}를 사용하세요.
```js
const o = {a: 0};
Object.defineProperty(o, 'b', {
set: function(x) { this.a = x / 2; }
});
o.b = 10;
// 설정자 실행, a 속성에 10 / 2 = 5 할당
console.log(o.a)
// 5
```
### 계산된 속성 이름 사용하기
```js
const expr = 'foo';
const obj = {
baz: 'bar',
set [expr](v) { this.baz = v; }
};
console.log(obj.baz);
// "bar"
obj.foo = 'baz';
// run the setter
console.log(obj.baz);
// "baz"
```
## 명세
{{Specifications}}
## 브라우저 호환성
{{Compat}}
## See also
- [접근자](/ko/docs/Web/JavaScript/Reference/Functions/get)
- {{jsxref("Operators/delete", "delete")}}
- {{jsxref("Object.defineProperty()")}}
- {{jsxref("Object.defineGetter", "__defineGetter__")}}
- {{jsxref("Object.defineSetter", "__defineSetter__")}}
- JavaScript 안내서의 [접근자와 설정자 정의하기](/ko/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters)
|
