티스토리 뷰
목차
1. Rest Parameter란?
2. Arguments란?
3. Rest Parameter와 Arguments 비교
1. Rest Parameter
Rest Parameter 구문을 사용하면 함수가 정해지지 않은 수의 매개변수를 배열로 받을 수 있다. 이름 그대로 먼저 선언된 매개변수에 할당된 전달인자를 제외한 나머지 전달인자들이 모두 배열에 담겨 할당된다.
따라서 Rest parameter는 반드시 마지막 매개변수여야 한다.
다음은 Rest Parameter를 사용해서 전달된 모든 숫자를 더하는 예제이다.
function sum(...numbers) {
let total = 0;
for (let number of numbers) {
total += number;
}
return total;
}
// 예제 호출
console.log(sum(1, 2, 3)); // 출력: 6
console.log(sum(1, 2, 3, 4, 5)); // 출력: 15
Spread Syntax와 Rest Parameter의 차이
Spread Syntax는 배열을 다른 요소로 확장하는 반면, Rest Parameter는 여러 요소를 수집하여 하나의 요소로 압축한다.
2. Arguments
Arguments는 함수의 인수를 참조하는 유사 배열 객체이다.
유사 배열 객체는 length속성과 인덱싱된 요소를 가진 객체를 의미한다.
함수 호출 시 전달된 모든 인수들을 배열 형태로 저장하기 때문에 함수 내에서 전달된 모든 인수들에 접근할 수 있다.
function func(a, b, c) {
/*
arguments는 다음과 같은 객체가 된다.
{
"0": 'hi',
"1": 'i am',
"2": 'nittre'
}
*/
console.log(arguments[0]); // 'hi'
console.log(arguments[1]); // 'i am'
console.log(arguments[2]); // 'nittre'
}
func('hi', 'i am', 'nittre');
앞서 말했듯, Arguments는 유사 배열 객체이기 때문에 Array와 비슷하지만 length 속성만을 쓸 수 있으며 push(), pop() 등의 배열 메서드는 사용할 수 없다.
arguments를 배열로 만들고 싶다면 다음과 같은 방법을 사용할 수 있다.
// 1. Array.from() 메서드 사용
let args = Array.from(arguments);
// 2. 스프레드 연산자 사용
let args = [...arguments];
/* 배열 안에서 객체에 스프레드 연산자를 사용할 수 없지만,
arguments 객체는 유사 배열 객체이기 때문에 가능하다 */
3. Rest Parameter와 Arguments 객체 차이
1. Rest Parameter는 함수 표현에 정식으로 정의되지 않은 나머지 인자들을 대상으로 하는 반면, Arguments는 모든 함수 인자를 대상으로 한다.
2. Arguments는 유사 배열 객체인 반면, Rest Parameters로 만들어진 배열은 Array 인스턴스다.
'Language > JavaScript' 카테고리의 다른 글
[JavaScript] 고차 함수와 콜백 함수 (0) | 2024.03.30 |
---|---|
[JavaScript] innerHTML, innerText, textContent 차이점 (0) | 2024.03.27 |
[JavaScript] 요소의 속성을 설정하는 방법: setAttribute() (0) | 2024.03.23 |
[JavaScript] 요소의 속성 값을 가져오는 방법: getAttribute() (0) | 2024.03.23 |
[JavaScript] 이벤트 버블링, 이벤트 캡처링, 이벤트 위임 (1) | 2024.03.23 |
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- arguments
- react
- 비제어 컴포넌트
- 제어 컴포넌트
- Target
- CSS
- hydrationboundary
- 취업까지달린다
- rest parameter
- 리액트
- 중급 프로젝트
- 코드잇 스프린트
- javascript
- Next.js
- js
- 코드잇스프린트
- innerhtml
- 스프린트프론트엔드6기
- 배열
- tanstackquery
- 프론트엔드
- Git
- 유사배열객체
- 객체
- 동기
- currentTarget
- GitHub
- html
- 비동기
- map
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
글 보관함