나머지 매개변수와 전개 구문은 ... 로 사용되어진다.
그렇다면 이 둘의 차이점은 무엇일까?
나머지 매개변수는 함수의 인수 전달 시에 마지막으로 사용되며, 전달된 인수들의 목록을 배열로 압축할때 사용되어진다.
전개 구문은 뭉쳐있는 여러 개의 값들을 개별적인 값들의 목록으로 만들때 사용되어진다. 즉, 나머지 매개변수는 배열로 합쳐주고, 전개 구문은 배열 또는 객체를 펼쳐주는 역할을 한다.

나머지 매개변수(Rest parameters)

인수전달

function showName(name){
	console.log(name);
}
showName('Mike'); // 'Mike'
showName('Mike', 'Tom'); // ?
// 에러는 발생하지 않고 'Mike'만 출력되어진다.
showName(); // undefined

자바스크립트에서 함수의 넘겨주는 인수의 개수는 제한이 없다. 지금은 name하나만 사용되어져 있는데 실제 호출할 때 그 개수를 맞출 필요는 없다. showName()처럼 아무것도 전달하지 않아도 된다.
함수의 인수에는 접근하는 방법이 2가지 있다. 하나는 arguments로 접근하는 방법이고, 또 다른 하나는 나머지 매개변수를 쓰는 것이다! 과거에는 argument만 사용이 가능했다. 지금은 여러가지 장점이 있는 나머지 매개변수를 사용하는 추세이다.

arguments

• 함수로 넘어 온 모든 인수에 접근할 수 있음
• 함수 내에서 이용 가능한 지역 변수
• length / index가 있기 때문에 배열이라고 생각할 수 있지만 Array 형태의 객체임
  -> Array 형태의 객체는 length와 index등의 속성을 가지고 있지만 배열의 내장 메소드는 가지고 있지 않다. 그래서 forEach나 map은 사용 불가능하다.
• 배열의 내장 메소드 없음(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 showName(...names){
	console.log(names);
}
showName(); // []
showName('Mike'); // ['Mike']
showNmae('Mike', 'Tom'); // ['Mike', 'Tom']

ES6를 사용할 수 있는 환경이면 나머지 매개변수를 사용하는 것을 권장한다. 나머지 매개변수는 정해지지 않은 개수의 수를 배열로 나타낼 수 있게 한다. ...를 찍고 뒤에 names라는 배열 이름을 정해준다. 그러면 names배열 안에 전달된 변수들이 들어가게 된다. 아무것도 전달하지 않으면 undefined가 아니라 빈 배열이 나타나게 된다.

// 전달받은 모든 수를 더해야함
function add(...numbers){
	const result = numbers.reduce((prev, cur) => prev + cur);
    return result;
}

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

// ----------------------------------------------------

// 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(user1);
// {
//   name: "Mike",
//   age: 30,
//   skills: ["html", "css"]
// }
console.log(user2);
// {
//   name: "Tom",
//   age: 20,
//   skills: ["JS", "React"]
// }
console.log(user3);
// {
//   name: "Jane",
//   age: 10,
//   skills: ["English"]
// }

전개 구문(Spred Syntax)

전개 구문(Spred Syntax) : 배열

const arr1 = [1,2,3];
const arr2 = [4,5,6];
const result = [...arr1, ...arr2];

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

const result = [0, ...arr1, ...arr2, 7, 8, 9];
// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

arr.push() / arr.splice() / arr.concat() 작업을 전개 구문이 한 번에 줄여줌

전개 구문(Spred Syntax) : 객체

const user = {name: 'Mike'}
const mike = {...user, age: 30}

console.lg(mike) // {name: 'Mike', age: 30}

Object.assign()을 사용할 필요도 없음!

전개 구문(Spred Syntax) : 복제

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

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

user2.name = "Tom";

console.log(user.name); // "Mike"
console.log(user2.name); // "Tom"

---

출처 )