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

인수전달

function showName(name){ // 인수에 개수 제한 없음
  console.log(name);
}
showName("Mike"); // "Mike"
showName("Mike", "Tom"); // ? 
showName(); //undefined

arguments / 나머지 매개 변수
화살표함수에는 arguments가 없음

Arguments 인자

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

function showName(name){
  console.log(arguments.length);
  console.log(arguments[0]);
  console.log(arguments[1]);
}
showName("Mike","Tom");
//2
//"Mike"
//"Tom"

ES6 쓸수 있는 환경이면, 나머지 매개변수(Rest parameters)을 쓰도록 권장

나머지 매개변수 (Rest parameters)

function showName(...names){
  console.log(names);
}
showName(); // [] 빈배열로 찍힘
showName('Mike'); // ["Mike"]
showName('Mike','Tom'); // ["Mike", "Tom"]

다이나믹하게 인수를 받아서 더하고 싶을 때

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

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

	add(1,2,3);
	add(1,2,3,4,45,556,6,77,);

나머지 매개변수

• user 객체를 만들어 주는 생성자 함수를 만들겁니다.
• 여러 인자값이 있다면 나머지 매개변수는 무조건 마지막에
  파이썬 *args, **kwargs랑 유사하다고 생각되넹

function User(name, age,...skill){
	this.name = name;
    this.age = age;
    this.skill = skill;
   }
const user1 = new User("Mike", 30, "html", "css");
const user2 = new User("Tome", 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 = [0, ...arr1, ...arr2, 7, 8, 9];
		// [0,1,2,3,4,5,6,7,8,9]

arr.push() / arr.splice() / arr.concat() .. etc

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"
console.log(user2.name); // "Tom"

전개 구문
arr1 을 [4,5,6,1,2,3] 으로

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

arr2.reverse().forEach((num) => {
  arr1.unshift(num);
});
// 전재구문을 활용하면 한줄로 끝!
arr1 = [...arr2, ...arr1];
console.log(arr1)

let user = { name: "Mike" };
let info = { age : 30 };
let fe = ["JS","React"];
let lang = ["Korean","English"];

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

//전개 구문없이 skills에 넣는다면 
fe.forEach((item) => {
  user.skills.push(item);
});
lang.forEach((item) => {
  user.skills.push(item);
});

console.log(user);

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