프로젝트를 앞두고 자바스크립트 복습을 하던 중 궁금해진 것
function sample(...items) {
console.log(items)
}
const array = [1, 2, 3, 4];
console.log(array)
console.log(...array)둘 간의 차이가 정확히 무엇인지
나머지 매개변수의 자리라는 것 자체가 '배열'을 만들어주는 건데 array를 넣으면 [[1, 2, 3, 4]]가 되어야 하고, ...array를 넣으면 [1, 2, 3, 4] 가 되어야하는 것이 아닌가?
의문이 생긴 이유는 후에 알아보니 console.log()를 sample()로 착각해서 생긴 것이었다! 하지만 의문을 풀기 위해 다시 공부하며 정리가 잘 되었으니 블로그에 남겨보자
나머지 매개변수 Rest Parameter
function sum(...numbers) { // numbers는 배열로 처리됨 }- 함수 정의 시에 사용되며 함수의 매개변수로 선언됨
- 매개변수의 목록 끝에 ...를 붙이고 그 뒤에 나머지 인자들을 모아 배열로 처리
- 함수 호출 시 전달되는 인자 중 명시된 매개변수 외의 나머지 인자들을 배열로 묶어주는 역할을 함
전개 연산자 Spread Operator
const numbers = [1, 2, 3];
console.log(...numbers); // 1 2 3- 배열이나 객체를 해체하거나 전달할 때 사용됨
= 배열이나 객체의 요소를 분리하거나 병합할 때 사용됨 - 함수 호출 시에는 배열이나 객체를 해체하여 각 요소를 개별 인자로 전달하는데 사용될 수 있음
차이점
- 나머지 매개변수는 함수 정의 시 사용되며, 함수의 매개변수 목록의 끝에 위치함
- 전개 연산자는 함수 호출 시 사용되며, 인자를 전개하거나 배열/객체를 해체하는데 사용됨
풀어서 설명하면 이 예시에서
function sample(...items) {
console.log(items)
}
const array = [1, 2, 3, 4];
console.log(array)
console.log(...array)함수를 호출할 때 array와 전개 연산자 ...array는 배열을 전달하느냐, 배열 안의 각 요소를 '전달'하느냐의 차이
즉, 전달에 관한 이야기
이러한 상황에서 함수 정의 시 사용되는 ...items는 전달된 매개변수를 '배열'로 받는 것이고 items는 그냥 인수 그 자체로 받는 것
따라서
console.log(array)는 [1, 2, 3, 4]
console.log(...array)는 1, 2, 3, 4
이 상황에서 만약 sample(...items)의 인수로 array와 ...array를 각각 전달한다면
sample(array)일 때
인수로는 [1, 2, 3, 4]를 전달하고
...items는 전달된 매개변수를 배열 items의 요소(배열 items를 만듦)로 받기 때문에
items = [[1, 2, 3, 4]]가 되는 것,
그래서 출력은 [[1, 2, 3, 4]]
sample(...array)는
전개연산자를 통해 1, 2, 3, 4를 전달했고
...itms는 전달된 매개변수를 역시 배열로 만들어 받기 때문에
출력은 [1, 2, 3, 4]
혹시 또 헷갈리면 찾아와서 보려고 길게 적었으나
정리하자면
나머지 매개변수는 들어온 매개변수를 배열로 '받음'의 문제
전개연산자는 배열을 풀어서 배열의 각 요소를 인수로 '전달'할 때 사용!
