나머지 매개변수

인수전달

function showName(name){
	console.log(name);
} // name에 개수 제한 없음

showName('Mike'); // 'Mike'
showName('Mike', 'Tom'); // ?

showName(); // undefined

• 이럴 경우를 대비하여 arguments & 나머지 매개 변수 사용

argument

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

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

showName('Mike', 'Tom'); // 2 // 'Mike' // 'Tom'

나머지 매개변수(Rest parameters)

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

showName(); // []
showName('Mike); ['Mike']
showName('Mike', 'Tom'); // ['Mike', 'Tom']

실용예제

• 나머지 매개변수
• 전달 받은 모든 수를 더해야함

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

function add(...numbers) {
	let result = 0;
   	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

• 나머지 매개변수
• user 객체를 만들어 주는 생성자 함수를 만들어준다.

function User(name, age, ...skill){
	this.name = name;
    this.age = age;
    this.skill = 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(user1);
console.log(user2);
console.log(user3);

전개 구문(Spread syntax)

전개 구문: 배열

let arr1 = [1,2,3];
let arr2 = [4,5,6];

let result = [...arr1, ...arr2];
console.log(result); // [1,2,3,4,5,6]

전개 구문: 복제

let arr = [1,2,3];
let arr2 = [...arr]; // [1,2,3]

let user = {name: 'Mike', age:30};
let user2 = {...user};

user2.name = "Tom";

console.log(user.name); // "Mike" user.name의 값은 바뀌지 않는다. 
console.log(user2.name); // "Tom"