Skip to content

Commit c1dcfe9

Browse files
Merge pull request #1716 from Violet-Bora-Lee/spread-syatax
[용어 통일] spread syntax --> 전개 구문
2 parents ddf708a + 60c68d9 commit c1dcfe9

File tree

6 files changed

+19
-19
lines changed

6 files changed

+19
-19
lines changed

1-js/06-advanced-functions/02-rest-parameters-spread/article.md

+10-10
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# 나머지 매개변수와 스프레드 문법
1+
# 나머지 매개변수와 전개 구문
22

33
상당수의 자바스크립트 내장 함수는 인수의 개수에 제약을 두지 않습니다.
44

@@ -148,7 +148,7 @@ alert( Math.max(arr) ); // NaN
148148
149149
`Math.max (arr[0], arr[1], arr[2])` 처럼 배열 요소를 수동으로 나열하는 방법도 있긴 한데, 배열 길이를 알 수 없을 때는 이마저도 불가능합니다. 스크립트가 돌아갈 때 실제 넘어오는 배열의 길이는 아주 길 수도 있고, 아예 빈 배열일 수도 있기 때문입니다. 수동으로 이걸 다 처리하다 보면 코드가 지저분해지겠죠.
150150
151-
*스프레드 문법(spread syntax, 전개 문법)* 은 이럴 때 사용하기 위해 만들어졌습니다. `...`를 사용하기 때문에 나머지 매개변수와 비슷해 보이지만, 스프레드 문법은 나머지 매개변수와 반대되는 역할을 합니다.
151+
*전개 구문(spread syntax, 스프레드 구문)* 은 이럴 때 사용하기 위해 만들어졌습니다. `...`를 사용하기 때문에 나머지 매개변수와 비슷해 보이지만, 전개 구문은 나머지 매개변수와 반대 역할을 합니다.
152152
153153
함수를 호출할 때 `...arr`를 사용하면, 이터러블 객체 `arr`이 인수 목록으로 '확장'됩니다.
154154
@@ -157,7 +157,7 @@ alert( Math.max(arr) ); // NaN
157157
```js run
158158
let arr = [3, 5, 1];
159159
160-
alert( Math.max(...arr) ); // 5 (스프레드 문법이 배열을 인수 목록으로 바꿔주었습니다.)
160+
alert( Math.max(...arr) ); // 5 (전개 구문이 배열을 인수 목록으로 바꿔주었습니다.)
161161
```
162162
163163
아래와 같이 이터러블 객체 여러 개를 전달하는 것도 가능합니다.
@@ -179,7 +179,7 @@ let arr2 = [8, 3, -8, 1];
179179
alert( Math.max(1, ...arr1, 2, ...arr2, 25) ); // 25
180180
```
181181
182-
스프레드 문법은 배열을 합칠 때도 활용할 수 있습니다.
182+
전개 구문은 배열을 합칠 때도 활용할 수 있습니다.
183183
184184
```js run
185185
let arr = [3, 5, 1];
@@ -192,7 +192,7 @@ let merged = [0, ...arr, 2, ...arr2];
192192
alert(merged); // 0,3,5,1,2,8,9,15 (0, arr, 2, arr2 순서로 합쳐집니다.)
193193
```
194194
195-
앞선 예시들에선 '배열'을 대상으로 스프레드 문법이 어떻게 동작하는지 살펴보았습니다. 그런데 배열이 아니더라도 이터러블 객체이면 스프레드 문법을 사용할 수 있습니다.
195+
앞선 예시들에선 '배열'을 대상으로 전개 구문이 어떻게 동작하는지 살펴보았습니다. 그런데 배열이 아니더라도 이터러블 객체이면 전개 구문을 사용할 수 있습니다.
196196
197197
스프레드 문법을 사용해 문자열을 문자 배열로 변환 시켜 보겠습니다.
198198
@@ -202,7 +202,7 @@ let str = "Hello";
202202
alert( [...str] ); // H,e,l,l,o
203203
```
204204
205-
스프레드 문법은 `for..of`와 같은 방식으로 내부에서 이터레이터(iterator, 반복자)를 사용해 요소를 수집합니다.
205+
전개 구문은 `for..of`와 같은 방식으로 내부에서 이터레이터(iterator, 반복자)를 사용해 요소를 수집합니다.
206206
207207
문자열에 `for..of`를 사용하면 문자열을 구성하는 문자가 반환됩니다. `...str`도 `H,e,l,l,o`가 되는데, 이 문자 목록은 배열 초기자(array initializer) `[...str]`로 전달됩니다.
208208
@@ -222,7 +222,7 @@ alert( Array.from(str) ); // H,e,l,l,o
222222
- `Array.from`은 유사 배열 객체와 이터러블 객체 둘 다에 사용할 수 있습니다.
223223
- 스프레드 문법은 이터러블 객체에만 사용할 수 있습니다.
224224
225-
이런 이유때문에 무언가를 배열로 바꿀 때는 스프레드 문법보다 `Array.from`이 보편적으로 사용됩니다.
225+
이런 이유때문에 무언가를 배열로 바꿀 때는 전개 구문보다 `Array.from`이 보편적으로 사용됩니다.
226226
227227
228228
## 배열과 객체의 복사본 만들기
@@ -267,22 +267,22 @@ alert(JSON.stringify(obj)); // {"a":1,"b":2,"c":3,"d":4}
267267
alert(JSON.stringify(objCopy)); // {"a":1,"b":2,"c":3}
268268
```
269269
270-
이렇게 스프레드 문법을 사용하면 `let objCopy = Object.assign({}, obj);`, `let arrCopy = Object.assign([], arr);`보다 더 짧은 코드로 배열이나 객체를 복사할 수 있어서 사람들은 이 방법을 선호하는 편입니다.
270+
이렇게 전개 구문을 사용하면 `let objCopy = Object.assign({}, obj);`, `let arrCopy = Object.assign([], arr);`보다 더 짧은 코드로 배열이나 객체를 복사할 수 있어서 사람들은 이 방법을 선호합니다.
271271
272272
273273
## 요약
274274
275275
`"..."`은 나머지 매개변수나 스프레드 문법으로 사용할 수 있습니다.
276276
277-
나머지 매개변수와 스프레드 문법은 아래의 방법으로 구분할 수 있습니다.
277+
나머지 매개변수와 전개 구문은 아래의 방법으로 구분할 수 있습니다.
278278
279279
- `...`이 함수 매개변수의 끝에 있으면 인수 목록의 나머지를 배열로 모아주는 '나머지 매개변수'입니다.
280280
- `...`이 함수 호출 시 사용되거나 기타 경우엔 배열을 목록으로 확장해주는 '스프레드 문법'입니다.
281281
282282
사용 패턴:
283283
284284
- 인수 개수에 제한이 없는 함수를 만들 때 나머지 매개변수를 사용합니다.
285-
- 다수의 인수를 받는 함수에 배열을 전달할 때 스프레드 문법을 사용합니다.
285+
- 다수의 인수를 받는 함수에 배열을 전달할 때 전개 구문을 사용합니다.
286286
287287
둘을 함께 사용하면 매개변수 목록과 배열 간 전환을 쉽게 할 수 있습니다.
288288

1-js/06-advanced-functions/09-call-apply-decorators/article.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -301,13 +301,13 @@ func.apply(context, args)
301301
따라서 아래 코드 두 줄은 거의 같은 역할을 합니다.
302302

303303
```js
304-
func.call(context, ...args); // 전개 문법을 사용해 인수가 담긴 배열을 전달하는 것과
304+
func.call(context, ...args); // 전개 구문을 사용해 인수가 담긴 배열을 전달하는 것과
305305
func.apply(context, args); // call을 사용하는 것은 동일합니다.
306306
```
307307

308308
그런데 약간의 차이가 있긴 합니다.
309309

310-
- 전개 문법 `...`*이터러블* `args`을 분해 해 `call`에 전달할 수 있도록 해줍니다.
310+
- 전개 구문 `...`*이터러블* `args`을 분해 해 `call`에 전달할 수 있도록 해줍니다.
311311
- `apply`는 오직 *유사 배열* 형태의 `args`만 받습니다.
312312

313313
이 차이만 빼면 두 메서드는 완전히 동일하게 동작합니다. 인수가 이터러블 형태라면 `call`을, 유사 배열 형태라면 `apply`를 사용하면 됩니다.

1-js/06-advanced-functions/10-bind/article.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -311,7 +311,7 @@ user.sayNow("Hello");
311311
- `partial`을 호출할 때 받은 인수(`"10:00"`)는 `...argsBound`에 전달됩니다.
312312
- 래퍼에 전달된 인수(`"Hello"`)는 `...args`가 됩니다.
313313
314-
전개 문법 덕분에 이 모든 과정이 쉬워졌습니다.
314+
전개 구문 덕분에 이 모든 과정이 쉬워졌습니다.
315315
316316
lodash 라이브러리의 [_.partial](https://lodash.com/docs#partial)을 사용하면 컨텍스트 없는 부분 적용을 직접 구현하지 않아도 됩니다.
317317

1-js/12-generators-iterators/1-generators/article.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@ for(let value of generator) {
140140
}
141141
```
142142

143-
제너레이터는 이터러블 객체이므로 제너레이터에도 전개 문법(`...`) 같은 관련 기능을 사용할 수 있습니다.
143+
제너레이터는 이터러블 객체이므로 제너레이터에도 전개 구문(`...`) 같은 관련 기능을 사용할 수 있습니다.
144144

145145
```js run
146146
function* generateSequence() {
@@ -154,7 +154,7 @@ let sequence = [0, ...generateSequence()];
154154
alert(sequence); // 0, 1, 2, 3
155155
```
156156

157-
위 예시에서 `...generateSequence()`는 반복 가능한 제너레이터 객체를 배열 요소로 바꿔줍니다. (전개 문법에 대한 자세한 설명은 [](info:rest-parameters-spread#spread-syntax)에서 볼 수 있습니다.)
157+
위 예시에서 `...generateSequence()`는 반복 가능한 제너레이터 객체를 배열 요소로 바꿔줍니다. (전개 구문에 대한 자세한 설명은 [](info:rest-parameters-spread#spread-syntax)에서 볼 수 있습니다.)
158158

159159
## 이터러블 대신 제너레이터 사용하기
160160

1-js/12-generators-iterators/2-async-iterators-generators/article.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -121,15 +121,15 @@ let range = {
121121
| 반복 작업을 위해 사용하는 반복문 | `for..of` | `for await..of` |
122122

123123

124-
````warn header="전개 문법 `...`은 비동기적으로 동작하지 않습니다."
124+
````warn header="전개 구문 `...`은 비동기적으로 동작하지 않습니다."
125125
일반적인 동기 이터레이터가 필요한 기능은 비동기 이터레이터와 함께 사용할 수 없습니다.
126126

127-
전개 문법은 일반 이터레이터가 필요로 하므로 아래와 같은 코드는 동작하지 않습니다.
127+
전개 구문은 일반 이터레이터가 필요로 하므로 아래와 같은 코드는 동작하지 않습니다.
128128
```js
129129
alert( [...range] ); // Symbol.iterator가 없기 때문에 에러 발생
130130
```
131131

132-
전개 문법은 `await`가 없는 `for..of`와 마찬가지로, `Symbol.asyncIterator`가 아닌 `Symbol.iterator`를 찾기 때문에 에러가 발생하는 것은 당연합니다.
132+
전개 구문은 `await`가 없는 `for..of`와 마찬가지로, `Symbol.asyncIterator`가 아닌 `Symbol.iterator`를 찾기 때문에 에러가 발생하는 것은 당연합니다.
133133
````
134134
135135
## async 제너레이터

2-ui/1-document/07-modifying-document/article.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -387,7 +387,7 @@ function getListContent() {
387387
}
388388
389389
*!*
390-
ul.append(...getListContent()); // append 메서드와 ...(전개 문법)은 궁합이 잘 맞습니다.
390+
ul.append(...getListContent()); // append 메서드와 ...(전개 구문)은 궁합이 잘 맞습니다.
391391
*/!*
392392
</script>
393393
```

0 commit comments

Comments
 (0)