10. 나머지 매개변수, 전개 구문(Rest Spread syntax)

인수전달 (...)

다음과 같이 인수(name)을 받아서 출력하는 함수가 있을 때, 인수는 꼭 하나만 들어오지 않을 수도 있다.

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

showName('성원');  // '성원'
showName('성원', '달봉');  // '성원'
showName();  // undefined

• 인수가 두 개 이상인 경우 : 첫 번째 인수와 undefined가 나옴
• 인수가 들어오지 않은 경우 : undefined 출력

함수의 인수를 얻는 방법

1. arguments
   • 주의: 화살표 함수에는 arguments 가 없음
2. 나머지 매개 변수

arguments

• 함수로 넘어온 모든 인수에 접근
• 함수 내에서 이용 가능한 지역 변수
• length와 index를 가지고 있음
• Array 형태의 객체임 (배열이 아님)
  • 배열의 내장 메서드 없음 (forEach, map)
  • (ES6 환경 이상일경우) 나머지 매개변수 구문 사용 권장

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

showName('성원', '달봉');
// 2
// 성원
// 달봉
/* Arguments(2) ['성원', '달봉', callee: ƒ, Symbol(Symbol.iterator): ƒ]
0: "성원"
1: "달봉"
*/

나머지 매개변수

• 정해지지 않은 개수의 인수를 배열로 나타내줌
• 인수를 받을 자리에 (...배열이름)으로 작성하여 사용
• 주의: 나머지 매개변수는 항상 인수의 마지막에 있어야 한다.

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

showName();  // []
showName('성원');  // ['성원']
showName('성원', '달봉');  // ['성원', '달봉']

• 아무것도 전달받지 않은 경우, undefined가 아니라 빈 배열이 반환됨

---

실습

1. 전달받는 숫자의 개수가 항상 다를 때, 전달받은 수를 모두 더하기

// reduce
function addNum(...numbers){
  let result = numbers.reduce((pre, cur) => {
    return pre + cur;
  }, 0);
  console.log(result);
}

addNum(1, 2, 3);

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

addNum2(1, 2, 3, 4);

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

• skill은 몇 개가 들어올지 모르기 때문에 나머지 매개변수를 사용하여 array형태의 객체로 받아준다.

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

const user1 = new User('성원', 29, 'html', 'css', 'js');
const user2 = new User('달봉', 31, 'python');
const user3 = new User('쿠몬', 33, 'veu', 'C');

console.log(user1);
console.log(user2);
console.log(user3);

/*
User {name: '성원', age: 29, skills: Array(3)}
age: 29
name: "성원"
skills: (3) ['html', 'css', 'js']
*/

/*
User {name: '달봉', age: 31, skills: Array(1)}
age: 31
name: "달봉"
skills: ['python']
*/

/*
User {name: '쿠몬', age: 33, skills: Array(2)}
age: 33
name: "쿠몬"
skills: (2) ['veu', 'C']
*/

전개구문 (Spread syntax) : 배열

• ...arr 를 사용하여 배열의 값들을 풀어서 쓸 수 있음.
• push(), splice(), concat()... 을 사용하지 않아도 배열에 추가, 삭제 등이 가능하다.

let arr1 = [1, 2, 3];
let arr2 = [10, 20, 30];

console.log(...arr1);
console.log(...arr2);

let result = [0, ...arr1, '...', ...arr2, '...', 100, 200, 300];
console.log(result);

// 1 2 3
// 10 20 30
// [0,1,2,3,"...",10,20,30,"...",100,200,300]

전개구문 (Spread syntax) : 객체

• Object.assign()을 사용하지 않아도 다른 객체의 값을 가져올 수 있음.

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

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

전개구문: 복제

• 전개구문을 사용하면 배열과 객체의 깊은복사가 가능

let arr1 = [1, 2, 3];
let arr2 = [...arr1];

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

arr1[0] = 100;
user1.name = 'Jane';

console.log(arr1);
console.log(arr2);
console.log(user1);
console.log(user2);
// [100, 2, 3]
// [1, 2, 3]
// {name: 'Jane', age: 30}
// {name: 'Mike', age: 30}

---

실습

1. result = [4, 5, 6, 1, 2, 3] 만들기

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

// 1. 배열메소드 사용
arr2.forEach((num) => arr1.unshift(num));
console.log(arr1);  // [6,5,4,1,2,3]
// 1-1
arr2.reverse().forEach((num) => arr1.unshift(num));
console.log(arr1);  // [4,5,6,1,2,3]

// 2. 전개 구문 사용
let result = [...arr2, ...arr1]
console.log(result);  // [4,5,6,1,2,3]

2. skills : fe[], lang[]을 가진 user객체 생성하기

• (1) Object.assign() 사용

let user = { name: 'Mike' };
let info = { age: 30 };
let fe = ['JS', 'React'];
let lang = ['Ko', 'Eng'];

// assign 사용
user = Object.assign({}, user, info, {
  skills: [],
});

fe.forEach((item) => {
  user.skills.push(item)
});
lang.forEach((item) => {
  user.skills.push(item)
});

console.log(user);
/*
age: 30
name: "Mike"
skills: (4) ['JS', 'React', 'Ko', 'Eng']
*/

• (2) 전개 구문 사용

let user = { name: 'Mike' };
let info = { age: 30 };
let fe = ['JS', 'React'];
let lang = ['Ko', 'Eng'];

// 전개구문 사용
user = {
  ...user,
  ...info,
  skills: [...fe, ...lang],
}

console.log(user);
/*
age: 30
name: "Mike"
skills: (4) ['JS', 'React', 'Ko', 'Eng']
*/