📖 [JavaScript] 나머지 매개변수

🔎 인수 전달: 개수를 맞출 필요는 없음!

function showName(name){
  console.log(name);
}

showName('Mike', 'Tom'); //Mike만 찍힘
showName() //undefined

📌 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'

📌 나머지 매개변수: ...

정해지지 않은 개수의 매개변수를 배열로 나오도록 함.
배열의 methods도 사용할 수 있음
항상 마지막에 나와야 함

function showName(...nameS){
  console.log(names);
}

showName(); //[] 아무것도 전달하지 않으면 빈배열이 나타남
showName('Mike', 'Tom'); //['Mike', 'Tom']

🔗 실행 예시

✔️ 1. 나머지 매개변수, 전달받은 모든 수를 더해야함

function add(...numbers){
  numbers.forEach((num) => (result += num));
  console.log(result);
}

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

add(1,2,3); //6
add(1,2,3,4,5,6,7,8,9,10) //55

✔️ 2. user 객체를 만들어 주는 생성자 함수

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

const user1 = new User('Mike', 30, 'html', 'css');
const user2 = new User('Tom', 20, 'js', 'react');
const user3 = new User('Jane', 10, 'english');

console.log(user2); //{name:"Tom", age:20, skills: ['js', 'react']