2026년 상식닷컴 선정 식당 & 카페 리스트
최근에 오픈한 호텔을 찾는다면 살펴보세요

자바스크립트에서 rest 파라미터(Rest Parameters)는 어떻게 사용하나요?

_____
Q1: 자바스크립트에서 rest 파라미터란 무엇인가요?
A1: rest 파라미터는 함수 매개변수 문법 중 하나로, 여러 개의 인자를 하나의 배열로 묶어 받을 수 있게 해줍니다. 함수에 전달된 인자 중 나머지를 배열 형태로 받아 처리하고 싶을 때 사용합니다.

---

Q2: rest 파라미터를 선언하는 문법은 어떻게 되나요?
A2: 함수 매개변수 앞에 `...`(점 세 개)를 붙여 선언합니다.
예시:
```javascript
function example(...args) {
console.log(args);
}
example(1, 2, 3); // [1, 2, 3]
```

---

Q3: rest 파라미터와 일반 매개변수의 조합은 어떻게 하나요?
A3: rest 파라미터는 반드시 함수 매개변수 중 마지막에 위치해야 합니다.
예시:
```javascript
function func(a, b, ...rest) {
console.log(a); // 첫 번째 인자
console.log(b); // 두 번째 인자
console.log(rest); // 나머지는 배열
}
func(1, 2, 3, 4, 5);
// 출력: 1, 2, [3, 4, 5]
```

---

Q4: rest 파라미터와 arguments 객체의 차이점은 무엇인가요?
A4:
- `arguments` 객체는 모든 함수의 지역 객체로, 함수에 전달된 인자들을 유사 배열 형태로 담고 있습니다. 그러나 배열 메서드를 직접 사용할 수 없습니다.
- rest 파라미터는 배열(Array) 형태로 인자를 받아, 배열 메서드를 바로 사용할 수 있습니다. 또한 rest파라미터는 명시적으로 선언한 인자만 배열로 취급 가능하며 ES6부터 사용 가능합니다.

---

Q5: rest 파라미터에서 인자가 전달되지 않으면 어떻게 되나요?
A5: 인자가 하나도 전달되지 않으면 rest 파라미터는 빈 배열(`[]`)이 됩니다.
예시:
```javascript
function foo(...args) {
console.log(args);
}
foo(); // []
```

---

Q6: rest 파라미터는 몇 개까지 받을 수 있나요?
A6: 이론적으로 제한이 없지만, 실제로 호출 스택과 메모리 한도에 의해 제한됩니다. 보통 함수 호출 시 전달하는 인자가 매우 많지 않은 이상 큰 문제가 되지 않습니다.

---

Q7: rest 파라미터로 받은 배열을 어떻게 처리할 수 있나요?
A7: 배열이므로 `map`, `filter`, `reduce`, `forEach` 등 모든 배열 메서드를 사용할 수 있습니다.
예시:
```javascript
function sum(...numbers) {
return numbers.reduce((acc, val) => acc + val, 0);
}
console.log(sum(1, 2, 3, 4)); // 10
```

---

Q8: rest 파라미터는 객체나 배열 같은 복합 데이터 타입에도 적용되나요?
A8: rest 파라미터는 함수 인자에만 적용되는 문법이며, 배열이나 객체 구조 분해에서 rest 문법과는 다르지만 비슷한 `...` 문법이 있습니다. 함수 인자의 경우는 인자들을 배열로 묶는 용도이고, 구조분해 할당에서 `...`는 나머지 속성이나 요소를 모으는 용도입니다.

---

Q9: rest 파라미터는 어떤 JavaScript 버전부터 지원되나요?
A9: ES6(ES2015)부터 지원됩니다. 대부분 최신 브라우저와 Node.js에서 기본 지원합니다.

---

요약
- `...`를 매개변수 앞에 붙이면 나머지 인자를 배열로 받을 수 있다.
- 반드시 마지막 매개변수여야 한다.
- 배열이므로 배열 관련 메서드를 바로 사용할 수 있다.
- ES6 이상 환경에서 사용 가능하다.
JavaScript에서 Rest Parameters(레스트 파라미터)는 함수의 매개변수 목록에서 사용되며, 함수에 전달된 인자의 수가 정해져 있지 않을 때 유용하게 사용됩니다.

Rest Parameters는 여러 개의 인자를 배열 형태로 받아올 수 있게 해줍니다.

이를 통해 함수의 유연성을 높이고, 다양한 수의 인자를 처리할 수 있습니다.

Rest Parameters의 문법 Rest Parameters는 함수의 매개변수 목록에서 마지막 매개변수 앞에 `...` (세 개의 점)을 붙여서 정의합니다.

예를 들어, 다음과 같이 사용할 수 있습니다: ```javascript function myFunction(...args) { console.log(args); } ``` 위의 예제에서 `myFunction`은 어떤 수의 인자를 받을 수 있으며, 이 인자들은 `args`라는 배열로 전달됩니다.

사용 예시 1. 기본적인 사용 예시 ```javascript function sum(...numbers) { return numbers.reduce((acc, curr) => acc + curr, 0); } console.log(sum(1, 2, 3,

4)); // 10 console.log(sum(5, 10, 1

5)); // 30 ``` 위의 `sum` 함수는 여러 개의 숫자를 받아서 그 합을 계산합니다.

`numbers`는 배열로서 모든 전달된 인자를 포함합니다.



2. 다른 매개변수와 함께 사용하기 Rest Parameters는 다른 매개변수와 함께 사용할 수 있습니다.

이 경우 Rest Parameters는 항상 마지막에 위치해야 합니다.

```javascript function multiply(factor, ...numbers) { return numbers.map(num => num * factor); } console.log(multiply(2, 1, 2,

3)); // [2, 4, 6] console.log(multiply(3, 4,

5)); // [12, 15] ``` 위의 예제에서 `factor`는 첫 번째 매개변수로, 나머지 인자들은 `numbers` 배열로 받아들여집니다.



3. Rest Parameters와 배열 메서드 Rest Parameters는 배열 메서드와 함께 사용할 때도 유용합니다.

예를 들어, 여러 개의 배열을 결합하는 함수를 만들 수 있습니다.

```javascript function combineArrays(...arrays) { return [].concat(...arrays); } const array1 = [1, 2]; const array2 = [3, 4]; const array3 = [5, 6]; console.log(combineArrays(array1, array2, array

3)); // [1, 2, 3, 4, 5, 6] ``` Rest Parameters와 Arguments 객체의 차이 전통적으로 JavaScript에서는 함수 내에서 `arguments` 객체를 사용하여 전달된 인자에 접근할 수 있었습니다.

그러나 `arguments` 객체는 배열이 아니며, 배열 메서드를 사용할 수 없다는 단점이 있습니다.

반면, Rest Parameters는 실제 배열로 전달되므로 배열 메서드를 사용할 수 있습니다.

```javascript function example() { console.log(arguments); // 유사 배열 객체 console.log([...arguments]); // 배열로 변환 } function exampleWithRest(...args) { console.log(args); // 실제 배열 } example(1, 2,

3); // [1, 2, 3] exampleWithRest(1, 2,

3); // [1, 2, 3] ``` 결론 Rest Parameters는 JavaScript에서 함수의 인자를 유연하게 처리할 수 있는 강력한 기능입니다.

이를 통해 다양한 수의 인자를 배열로 받아 처리할 수 있으며, 코드의 가독성과 유지보수성을 높이는 데 기여합니다.

Rest Parameters를 적절히 활용하면 함수의 재사용성과 유연성을 극대화할 수 있습니다.

작성자: 김예지 [비회원] | 작성일자: 1년 전 2024-09-10 08:36:55
조회수: 162 | 댓글: 0 | 좋아요: 0 | 싫어요: 0
내용이 부정확하다면 싫어요를 클릭해주세요.