나머지 매개변수(Rest parameters)

📌 인수 전달

function showId(id) {
   console.log(id);
}

showId(‘Mike’); // ‘Mike’
showId(‘Mike’, ‘Tom’); // 한 개의 매개변수를 받는 함수에 두 개의 인자를 전달해도 에러는 발생하지 않는다.
showId(); // undefined, 아무것도 전달하지 않아도 에러는 발생하지 않는다.

• 전달한 인수를 얻는 방법 2가지: arguments, 나머지 매개변수.
• 여러가지 장점이 있는 나머지 매개변수를 사용하는 추세.
• 결정적으로, 화살표 함수에는 arguments가 없다.

📌 arguments란?

• 함수로 넘어 온 모든 인수에 접근.
• 함수내에서 이용 가능한 지역 변수
• length/index 사용 가능
• Array 형태의 객체
• 배열의 내장 메서드 없음(forEach나 map 사용 불가능)

function showName(name) {
    console.log(arguments.length);
    console.log(arguments[0]);
    console.log(arguments[1]);
 }

showName(‘Mike’, ‘Tom’);
// 2
// ‘Mike’
// ‘Tom’

📌 나머지 매개변수(Rest parameters)

function showUser(…user) {
   console.log(user);
}

showUser(); // [], undefined가 아니라 빈 배열 반환
showUser(‘Mike’); // ‘Mike’
showUser(‘Mike’, ‘Tom’); // ‘Mike’, Tom’

• 나머지 매개변수는 정해지지 않은 개수의 인수를 배열로 반환한다.

📌실용적인 예제

1️⃣

function add(…num) {
   let result = 0
   num.forEach((number) => {
       result += number
   })
console.log(result);
}

add(1, 2, 3, 4, 5, 6, 7, 8, 9) // 45

2️⃣

function calculator (…numbers) {
    let result = numbers.reduce((prev, cur) => prev + cur);
    console.log(result);
}

calculator(1,2,3,4,5) // 15

3️⃣

function User(name, age, …skill) {
   {
        this.name = name;
        this.age = age;
        this.skill = skill;
   }
}

const user1 = new User(“Tom”, 30, “JS”, “React”);

console.log(user1); // User { name: “Tom”, age: 30, skill: [ “JS”, “React” ] }

💡나머지 매개변수는 항상 마지막에 작성해야 한다!