Skip to content

Commit d0b5433

Browse files
[나머지 매개변수와 전개 문법] 보완
1 parent 7b5dfc5 commit d0b5433

File tree

1 file changed

+28
-28
lines changed
  • 1-js/06-advanced-functions/02-rest-parameters-spread

1 file changed

+28
-28
lines changed

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

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# 나머지 매개변수와 전개 문법
22

3-
상당수의 자바스크립트 내장 함수는 임의의 수의 인수를 허용합니다.
3+
상당수의 자바스크립트 내장 함수는 인수의 갯수에 제약을 두지 않습니다.
44

55
예시:
66

@@ -25,7 +25,7 @@ alert( sum(1, 2, 3, 4, 5) );
2525

2626
함수를 정의할 땐 인수를 두 개만 받을 수 있다고 정의했고, 실제 함수를 호출할 땐 이보다 더 많은 인수를 전달하였는데 에러가 발생하지 않습니다. 하지만 반환 값은 당연히 처음 두 개의 인수만을 이용해 계산되죠.
2727

28-
마침표 세 개 `...` 뒤에 배열 이름을 적어준 후 함수 선언부의 매개변수 자리에 넣어주면 나머지 매개변수를 배열에 넣어줄 수 있습니다. 마침표 세 개 `...`가 의미하는 바는 "나머지 매개변수들을 한데 모아 배열에 집어넣어라"라는 의미를 갖죠.
28+
마침표 세 개 `...` 뒤에 배열 이름을 적어준 후 함수 선언부의 매개변수 자리에 넣어주면 나머지 매개변수(rest parameter)를 배열에 넣어줄 수 있습니다. 마침표 세 개 `...`가 의미하는 바는 "나머지 매개변수들을 한데 모아 배열에 집어넣어라."라는 의미를 갖습니다.
2929

3030
아래 예시에선 모든 인수가 배열 `args`에 모입니다.
3131

@@ -45,7 +45,7 @@ alert( sumAll(1, 2, 3) ); // 6
4545

4646
앞부분의 매개변수는 변수로, 남아있는 매개변수들은 배열로 모을 수도 있습니다.
4747

48-
아래 예시에선 처음 두 인수는 변수에, 나머지 인수는 `titles`이라는 배열에 할당됩니다.
48+
아래 예시에선 처음 두 인수는 변수에, 나머지 인수는 `titles`이라는 배열에 할당합니다.
4949

5050
```js run
5151
function showName(firstName, lastName, ...titles) {
@@ -62,7 +62,7 @@ showName("Julius", "Caesar", "Consul", "Imperator");
6262
```
6363

6464
````warn header="나머지 매개변수는 항상 마지막에 있어야 합니다."
65-
나머지 매개변수는 "남아있는" 인수 모두를 모으는 역할을 하므로 아래 예시에선 에러가 발생합니다.
65+
나머지 매개변수는 '남아있는' 인수를 모으는 역할을 하므로 아래 예시에선 에러가 발생합니다.
6666
6767
```js
6868
function f(arg1, ...rest, arg2) { // ...rest 후에 arg2가 있으면 안 됩니다.
@@ -73,9 +73,9 @@ function f(arg1, ...rest, arg2) { // ...rest 후에 arg2가 있으면 안 됩니
7373
`...rest`는 항상 마지막에 있어야 합니다.
7474
````
7575

76-
## "arguments" 변수
76+
## 'arguments' 변수
7777

78-
`arguemnts`라는 특별한 유사 배열 객체(array-like object)를 이용하면 인덱스로 모든 인수에 접근할 수 있습니다.
78+
`arguemnts`라는 특별한 유사 배열 객체(array-like object)를 이용하면 인덱스를 사용해 모든 인수에 접근할 수 있습니다.
7979

8080
예시:
8181

@@ -96,16 +96,16 @@ showName("Julius", "Caesar");
9696
showName("Ilya");
9797
```
9898

99-
나머지 매개변수는 지원된 지 얼마 안 된 비교적 최신의 문법입니다. 과거엔 인수를 모두 얻어낼 방법이 `arguments`를 사용하는 것밖에 없었습니다. 물론 지금도 여전히 `arguments`를 사용하는 게 가능하죠. 오래된 코드를 보다 보면 `arguments`만나실 수 있을 겁니다.
99+
나머지 매개변수는 비교적 최신의 문법입니다. 과거엔 인수 전체를 얻어낼 수 있는 방법이 `arguments`를 사용하는 것밖에 없었습니다. 물론 지금도 여전히 `arguments`를 사용하는 게 가능합니다. 오래된 코드를 보다 보면 `arguments`만날 때가 있습니다.
100100

101-
`arguments`는 유사 배열 객체이면서 반복 가능한 객체입니다. 어쨌든 배열은 아니죠. 따라서 배열 메서드를 사용할 수 없다는 것이 단점입니다. `arguments.map (...)` 같은 유용한 메서드를 사용할 수 없죠.
101+
`arguments`는 유사 배열 객체이면서 이터러블(반복 가능한) 객체입니다. 어쨌든 배열은 아니죠. 따라서 배열 메서드를 사용할 수 없다는 것이 단점입니다. `arguments.map (...)` 같은 유용한 메서드를 사용할 수 없죠.
102102

103103
`arguments`는 모든 인수를 담기 때문에 나머지 매개변수처럼 인수의 일부만 사용할 수 없다는 단점도 있습니다.
104104

105-
따라서 배열 메서드를 사용하고 싶거나 인수 일부만 사용하고자 할 때는 나머지 매개변수가 적합합니다.
105+
따라서 배열 메서드를 사용하고 싶거나 인수 일부만 사용하고자 할 때는 나머지 매개변수를 사용하는 것이 좋습니다.
106106

107-
````smart header="화살표 함수에는 `\"arguments\"`가 없습니다."
108-
화살표 함수에서 `arguments` 객체에 접근하면, 외부에 있는 "일반" 함수의 arguments 객체를 가져옵니다.
107+
````smart header="화살표 함수에는 `\'arguments\'`가 없습니다."
108+
화살표 함수에서 `arguments` 객체에 접근하면, 외부에 있는 '일반' 함수의 arguments 객체를 가져옵니다.
109109

110110
예시:
111111

@@ -122,7 +122,7 @@ f(1); // 1
122122
````
123123
124124
125-
## Spread 문법 [#spread-syntax]
125+
## spread 문법 [#spread-syntax]
126126
127127
지금까지 매개변수 리스트를 배열로 가져오는 방법에 대해 살펴보았습니다.
128128
@@ -134,9 +134,9 @@ f(1); // 1
134134
alert( Math.max(3, 5, 1) ); // 5
135135
```
136136
137-
배열 `[3, 5, 1]`이 있는데, 이 배열에 `Math.max`를 호출할 수 있을까요?
137+
그런데 배열 `[3, 5, 1]``Math.max`를 호출하고 싶은 경우가 생깁니다.
138138
139-
아무런 조작 없이 배열을 "있는 그대로" `Math.max`에 넘기면 원하는 대로 동작하지 않습니다. `Math.max`는 배열이 아닌 숫자형 인수를 받기 때문입니다.
139+
아무런 조작 없이 배열을 '있는 그대로' `Math.max`에 넘기면 원하는 대로 동작하지 않습니다. `Math.max`는 배열이 아닌 숫자형 인수를 받기 때문입니다.
140140
141141
```js run
142142
let arr = [3, 5, 1];
@@ -146,21 +146,21 @@ alert( Math.max(arr) ); // NaN
146146
*/!*
147147
```
148148
149-
`Math.max (arr [0], arr [1], arr [2])` 처럼 숫자를 수동으로 나열할 수도 있는데 배열 길이를 알 수 없기 때문에 이마저도 불가능합니다. 스크립트가 돌아갈 때 배열 내 요소가 아주 많을 수도, 아예 없을 수도 있죠. 수동으로 이걸 다 처리하다 보면 코드가 지저분해집니다.
149+
`Math.max (arr [0], arr [1], arr [2])` 처럼 숫자를 수동으로 나열하는 방법도 있긴 한데 배열 길이를 알 수 없을 때는 이마저도 불가능합니다. 스크립트가 돌아갈 때 배열 내 요소가 아주 많을 수도, 아예 없을 수도 있기 때문입니다. 수동으로 이걸 다 처리하다 보면 코드가 지저분해질겁니다.
150150
151-
*전개 문법(spread syntax)*이럴 때 사용하기 위해 만들어졌습니다. 전개 문법은 `...`를 사용하기 때문에 나머지 매개변수와 비슷해 보이지만, 나머지 매개변수와 반대의 역할을 해주죠.
151+
*전개 문법(spread syntax)*이럴 때 사용하기 위해 만들어졌습니다. 전개 문법은 `...`를 사용하기 때문에 나머지 매개변수와 비슷해 보이지만, 나머지 매개변수와 반대의 역할을 합니다.
152152
153-
함수를 호출할 때 `... arr`를 사용하면, 반복 가능한 객체 `arr`이 인수 리스트로 "확장"됩니다.
153+
함수를 호출할 때 `... arr`를 사용하면, 이터러블 객체 `arr`이 인수 리스트로 '확장'됩니다.
154154
155155
`Math.max`를 사용한 예시로 다시 돌아가 봅시다.
156156
157157
```js run
158158
let arr = [3, 5, 1];
159159
160-
alert( Math.max(...arr) ); // 5 (전개 문법이 배열을 인수 리스트 바꿔주었습니다.)
160+
alert( Math.max(...arr) ); // 5 (전개 문법이 배열을 인수 리스트로 바꿔주었습니다.)
161161
```
162162
163-
아래와 같이 이터러블 여러 개를 전달하는 것도 가능합니다.
163+
아래와 같이 이터러블 객체 여러 개를 전달하는 것도 가능합니다.
164164
165165
```js run
166166
let arr1 = [1, -2, 3, 4];
@@ -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
@@ -206,7 +206,7 @@ alert( [...str] ); // H,e,l,l,o
206206
207207
문자열에 `for..of`를 사용하면 문자열을 구성하는 문자를 반환하는 것 같이, `...str`도 `"H","e","l","l","o"`가 되고, 이 문자 리스트는 `[...str]`의 배열 초기자(array initializer)로 전달됩니다.
208208
209-
메서드 `Array.from`은 문자열 같은 이터러블을 배열로 바꿔주기 때문에 이를 사용해도 동일한 작업을 할 수 있습니다.
209+
메서드 `Array.from`은 문자열 같은 이터러블 객체를 배열로 바꿔주기 때문에 `Array.from`을 사용해도 동일한 작업을 할 수 있습니다.
210210
211211
```js run
212212
let str = "Hello";
@@ -219,10 +219,10 @@ alert( Array.from(str) ); // H,e,l,l,o
219219
220220
그런데 `Array.from (obj)`과 `[... obj]`에는 아래와 같은 미묘한 차이가 있습니다.
221221
222-
- `Array.from` 은 유사 배열 객체와 반복 가능한 객체 둘 다에 사용할 수 있습니다.
223-
- 전개 문법은 이터러블에만 사용할 수 있습니다.
222+
- `Array.from` 은 유사 배열 객체와 이터러블 객체 둘 다에 사용할 수 있습니다.
223+
- 전개 문법은 이터러블 객체에만 사용할 수 있습니다.
224224
225-
이런 이유때문에 무언가를 배열로 바꿀 때는 `Array.from`이 전개 문법보다 보편적으로 사용되는 편입니다.
225+
이런 이유때문에 무언가를 배열로 바꿀 때는 전개 문법보다 `Array.from`이 보편적으로 사용됩니다.
226226
227227
228228
## 요약
@@ -231,13 +231,13 @@ alert( Array.from(str) ); // H,e,l,l,o
231231
232232
나머지 매개변수와 전개 문법은 아래의 방법으로 구분할 수 있습니다.
233233
234-
- `...`이 함수 매개변수의 끝에 있으면 인수 목록의 나머지를 배열로 모아주는 "나머지 매개변수"입니다.
235-
- `...`이 함수 호출 시 사용되면 배열을 목록으로 확장해주는 "전개 문법"입니다.
234+
- `...`이 함수 매개변수의 끝에 있으면 인수 목록의 나머지를 배열로 모아주는 '나머지 매개변수'입니다.
235+
- `...`이 함수 호출 시 사용되면 배열을 목록으로 확장해주는 '전개 문법'입니다.
236236
237237
사용 패턴:
238238
239239
- 인수 개수에 제한이 없는 함수를 만들 때 나머지 매개변수를 사용합니다.
240-
- 많은 수의 인수를 받는 함수에 배열을 전달할 때 전개 문법을 사용합니다.
240+
- 다수의 인수를 받는 함수에 배열을 전달할 때 전개 문법을 사용합니다.
241241
242242
둘을 함께 사용하면 매개변수 목록과 배열 간 전환을 쉽게 할 수 있습니다.
243243

0 commit comments

Comments
 (0)