나머지 매개변수, 전개구문

나머지 매개변수(rest parameters)

• ...로 사용한다(점 세개)

• 함수의 인수를 얻는방법에는
  1. arguments, 2.나머지 매개변수 이용이 있는데 ES6를 사용하는 환경이라면 나머지 매개변수 사용을 권장한다.

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

• 나머지 매개변수는 함수 매개변수로서 항상 마지막에 위치한다는 것을 주의한다.

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

show(); // []
show("ari"); // ['ari']
show("ari", "till"); // ['ari', 'till']


// 전달받은 모든 수 더하기
function add(...num) { // 전달한 인수가 배열이 되고 그 배열을 이용하여 계산 
  let result = 0;
  num.forEach((i) => {
    result += i;
  });
  console.log(result);
}

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

// reduce()이용하여 모든 수 더하기 
function add(...num) {
  const result = num.reduce((prev, cur) => {
    return prev + cur;
  }, 0);
  console.log(result);
}

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

//나머지 매개변수는 항상 마지막에 위치한다는 것을 주의한다. 
function User(name, age, ...skills) {  // skills로 몇개의 인수가 들어올지 몰라 나머지 매개변수로 지정했다. 
  this.name = name;
  this.age = age;
  this.skills = skills;
}

const user1 = new User("ari", 40, "html", "css");
const user2 = new User("tim", 10, "JS");
const user3 = new User("goao", 30, "Math", "English");

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

전개구문(spread 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 user = { name: "mike", age: 30 };
const user2 = { ...user }; // 복제, Object.assign을 쓸 필요가 없다.

user2.name = "tom";
console.log(user.name); // mike, 별개의 user2로 복제되었기 떄문에 user의 속성은 영향을 받지 않는다.
console.log(user2.name); // tom

// arr1을 [4,5,6,1,2,3]으로
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

arr2.forEach((i) => {
  arr1.unshift(i); //[6,5,4,1,2,3] , 루프를 돌면서 4를 1앞에 넣고 5를 4앞에 넣고 6을 5 앞에 넣기 때문이다.
});

// arr1을 [4,5,6,1,2,3]으로 - 전개구문 이용
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

arr1 = [...arr2, ...arr1];

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



//user에 객체 합치고 속성 넣기
let user = { name: "mike" };
let info = { age: 30 };
let fe = ["js", "css"];
let lan = ["ko", "en"];

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

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

lan.forEach((i) => {
  user.skills.push(i);
});


//user에 객체 합치고 속성 넣기 - 전개구문 이용
let user = { name: "mike" };
let info = { age: 30 };
let fe = ["js", "css"];
let lan = ["ko", "en"];

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

user.skills = [...fe, ...lan];

console.log(user);

//user에 객체 합치고 속성 넣기 - 전개구문 이용2
let user = { name: "mike" };
let info = { age: 30 };
let fe = ["js", "css"];
let lan = ["ko", "en"];

user = {
  ...user,
  ...info,
  skills: [...fe, ...lan],
};

console.log(user);