자바스크립트 - 나머지 매개변수, 전개구문(Rest parameters, Spread syntax)

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

나머지 매개변수와 전개 구문은 ... 로 사용되어집니다.

이 둘의 차이는 무엇일까?

 

인수 전달

• js에서 함수에 넘겨주는 인수에 개수는 제한이 없다.
• 호출할 때 그 개수를 정확하게 맞출 필요가 없다.

함수에 인수를 얻는 방법은 2 가지가 있는데 하나는 arguments로 접근하는 것과 나머지 매개변수 Rest parameters로 접근하는 것이다.

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

showName('Mike');
showName('Mike', 'Tom');

 

 

arguments

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

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

showName('Mike');
showName('Mike', 'Tom');

위코드의 결과는 아래와 같습니다. 

arguments의 length는 받은 인수의 개수가 됩니다.

 

그러나 arguments를 사용하는 것 보다 ES6환경이면 가급적 나머지 매개변수 사용을 권장하고 있습니다.

 

 

나머지 매개변수(Rest parameters)

나머지 매개변수는정해지지 않은 개수의 수를 배열로 나타낼 수 있게 합니다. ...를 찍고 뒤에

names라는 배열 이름을 정해줬습니다. 그러면 names배열 안에 전달된 변수들이 들어가게 됩니다. 

아무것도 전달하지 않으면 undefined가 아니라 빈 배열이 나타나게 됩니다. 

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

showName();
showName('Mike');
showName('Mike', 'Tom');

 

좀 더 실용적이게 어떻게 쓰일까? 

아래는 전달 받은 모든 수를 더해야하는 함수를 만들어야합니다. 몇개의 인수가 전달 될 지 모르니 나머지 매개변수를 사용합니다. 

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

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

 

아래는 조금 더 실용적인 문제를 살펴보겠습니다.

user 객체를 만들어 주는 생성자 함수를 만들겁니다. skills이 몇개 들어올지 모르기때문에 skills만 나머지 매개변수를 사용해 주었습니다. 

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

const user1=new User("Alex", 30, "html", "css");
const user2=new User("choi", 25, "js", "react");
const user3=new User("Tom", 20, "c", "c++");

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

결과입니다. 나머지 매개변수를 사용할 때 주의해야할 점은 나머지 매개변수는 인수중 마지막에 써야합니다. 지금 위의 코드에서처럼 말이죠. 

 

전개 구문(Spread syntax) 

전개 구문 : 배열 

전개구문은 객체 혹은 배열들을 펼칠 수 있게 해줍니다.

...arr1은 1,2,3을 풀어서 쓴것이고 ...arr2는 4,5,6을 풀어서 쓴것입니다.

const arr1 =[1,2,3];
const arr2 =[4,5,6];
const result=[...arr1, ...arr2];

console.log(result);

 추가로 중간에 전개구문을 사용하는 것도 가능합니다. 

 

let result = [0, ...arr1, ...arr2, 7,8,9]; 를 해주면 0부터 9까지의 배열이 완성됩니다.

추가로 arr.push() / arr.splice() / arr.concat() 작업을 전개 구문이 한 번에 줄여주는 역할도 합니다.

 

 

전개구문(Spred Syntax) : 객체

Object.assign()을 사용할 필요도 없습니다.

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

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

 

전개 구문(Spread Syntax) : 복제

다음과 같이 객체를 복제할 수도 있습니다.

const arr = [1, 2, 3];
const arr2 = [...arr]; // [1, 2, 3]

const user = {name: 'Mike', age: 30};
const 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);
});

console.log(arr1);

전개구문을  사용하지 않으면 위의코드처럼 복잡하게 작성해야하는데

전개구문을 사용해보겠습니다. 

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

/*
arr2.reverse().forEach((num)=>{
  arr1.unshift(num);
});
*/

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

console.log(arr1);

결과가 잘 나옴을 알 수 있습니다. 

다음은 객체에서도 한번 사용해보겠습니다.

 user가있는데 user의 info를 넣고 fe와 lang을 합쳐서 skills로 넣는다고 가정해봅시다.

이번에도 전개구문을 사용하지 않고 작성해보면 

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

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

먼저 Object.assign() 함수를통해 다음과 같은 객체를 만들어줍니다. 

그리고 foreEach를 돌면서 push를 통해 fe와 lang을 넣어줍니다.

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

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

console.log(user);

위의 코드는 복잡하므로 전개구문을 사용해보겠습니다.

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

위와같이 전개구문을 사용하면 엄청 간단해지는걸 볼 수 있습니다. 결과도 동일하게 잘 나옵니다.