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

* 인수 전달

자바스크립트에서 넘겨주는 함수의 인수 갯수는 제한 X

인수의 갯수는 정해놓고 함수를 만들어도 실제 호출 시 정확히 그 갯수를 맞춰 줄 필요 X

아무것도 전달하지 않아도 됨 -> undefined로 나옴(에러발생 x)

function showName(name){
  console.log(name);
}
showName('Mike'); //'Mike'
showName('Mike','Tom'); //'Mike'
showName(); //undefined

함수의 인수를 얻는 방법
1. arguments로 접근: 과거 사용 방법, 화살표 함수에서는 사용 불가

2. 나머지 매개 변수 사용: 다양한 방법 있음

1. arguments

- 함수로 넘어 온 모든 인수에 접근할 수 있음

- 함수 내에서 이용 가능한 지역 변수

- length와 index가 있기 때문에 배열이라고 생각할 수 있지만 사실 Array 형태의 객체에 해당

- 그러나 배열의 내장 메서드는 가지고 있지 않음( forEach, map 사용할 수 x)

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

 

2. 나머지 매개변수(Rest parameters)

- 가급적 나머지 매개변수 사용 권장

- 정해지지 않은 갯수의 인수를 배열로 나열할 수 있음
- ... 를 찍고 배열 이름을 지정
- ...names 배열 안에 전달된 인수들이 들어감

function showName(...names){
  console.log(names);
}
showName();//[]
showName('Mike');//['Mike']
showName('Mike','Tom'); //(2) ['Mike','Tom']

 

예시1) 전달 받은 모든 수 더하기

function add(...numbers) {
  let result = 0;
  numbers.forEach((num) => (result += num))
  console.log(result);
}
add(1,2,3); //6
add(1,2,3,4,5,6,7,8,9,10); //55

function add(...numbers) {
  let result = numbers.reduce((prev, cur) => (prev += cur))
  console.log(result);
}
add(1,2,3); //6
add(1,2,3,4,5,6,7,8,9,10); //55

예시2) 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) //User {name: 'Mike', age: 30, skills: Array(2)}
console.log(user2) //User {name: 'Tom', age: 20, skills: Array(2)}
console.log(user3) //User {name: 'Jane', age: 10, skills: Array(1)}

* 전개구문(Spread syntax)

- 배열

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

let result = [0, ...arr1, ...arr2,7,8,9];
console.group(result) //(10) [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

- 객체

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

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

- 복제

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

예시1)  arr1을 [4,5,6,1,2,3]으로
- reverse를 이용해 arr2를 역순으로 만들어 줌

let arr1 = [1,2,3];
let arr2 = [4,5,6];
arr2.reverse().forEach((num) => {
  arr1.unshift(num);
});
console.log(arr1)//(6) [4, 5, 6, 1, 2, 3]

이를 전개구문으로 더 간단하게 표현 가능

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

-> 객체일 경우 오브젝트 사용 시

let user = {name: "Mike"};
let info = {age: 30};
let fe = ["JS","React"];
let lang = ["Korean","English"];
user = Object.assign({},user,info,{
  skills:[],
})
fe.forEach((item) => {
  user.skills.push(item);
});
lang.forEach((item) => {
  user.skills.push(item);
});
console.log(user);
//{name: 'Mike', age: 30, skills: Array(4)}
//age: 30
//name: "Mike"
//skills: (4) ['JS', 'React', 'Korean', 'English']

-> 객체일 경우 전개구문 사용 시

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

user = {
  ...user,
  ...info,
  skills: [...fe, ...lang],
};
console.log(user);
//{name: 'Mike', age: 30, skills: Array(4)}
//age: 30
//name: "Mike"
//skills: (4) ['JS', 'React', 'Korean', 'English']