13. javascript 나머지 매개변수

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

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

showName이라는 함수가 있다. 이 함수는 name이라는 인자를 받는다.

하나 이때 name이 두 개가 들어온다면 어떻게 되는가?? Tom 하나만 받고 Mike는 받지 않는다..

 

이럴 때 나머지 매개변수를 사용할 수 있다.

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

이 함수는 정해지지 않은 개수의 인수를 받아 배열로 나타낼 수 있다. 

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

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

인수를 받지 않을때는 빈 배열을 나타낸다.

 

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

let user1 = new User('Mike',30,'JS','CSS');

let user2 = new User('Jane',19, 'English','Korean');

let user3 = new User('June', 25, 'java','python');

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

결과

결과 skills라는 배열이 생겼고 인자들이 담겨있는 걸 볼 수 있다. 나머지 매개변수는 인자들의 제일 마지막에서만 사용을 할 수 있다.

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

위와 같이 되게 되면 인자를 구분할 수 없어 나머지 매개변수를 사용할 수 없다.

 

비슷하게 사용되는 것이 전개 구문이라는 것이 있다. 이는 배열이 있고 그 배열을 다른 배열의 중간중간 삽입을 할 때 용이하게 사용된다.

전개 구문은 나머지 매개변수랑은 다르게 중간에 넣어 사용할 수 있다.

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

let num = [...arr1,...arr2];
let num2 = [0,...arr2,...arr1 , 7,8,9];

console.log(num); // [1,2,3,4,5,6];
console.log(num2); // [0,4,5,6,1,2,3,7,8,9];

let user = { name : 'seonghun' };
let age = { age : 30 };
let fe = ['Js','Html','Java'];
let lang = ['English', 'Korean'];

위와 같은 변수로 User라는 객체를 생성하고자 한다. 전개구문을 사용하지 않고 만든다면

let User = Object.assign({}, user, age, {
  skills:[]
});

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

console.log(User);

 

forEach를 이용해 skills에 fe, lang 을 넣는다. 전개 구문을 사용 시에는 아래의 구분으로 끝낼 수 있다.

let user1 = {
  ...user,
  ...age,
  skills:[...fe,...lang]
}

 

나머지 매개변수 및 전개 구문에 대해 알아 보았다. 이를 이용해 개수를 알 수 없는 인자를 받거나 배열의 값을 빼거나 넣을 수 있을 것 같다. 조금 더 데이터 관리에 용이해진 것 같다.