[JS문법] ...(three dots, 점 세개)의 사용법 두 가지(객체/배열 vs 함수)

자바스크립트에서 점 세개, `...` 은 두 가지 사용법이 있다.

1. Spread Operator

뒤늦게 알게 되어 매우 아쉬울 정도로 객체와 배열을 사용할 때 아주 유용한 방식이다.

객체와 배열을 사용할 때 서로 다른 객체/배열끼리 합치고 싶을 때가 많다.

그때 {}, [] 의 껍데기가 거슬리게 느껴지는데 이를 없애주는 것이 ...이다.

 

사용법은 아래와 같다.

[객체 ver.]

const walwal = {
	name: "Walwal",
    age: 19,
    height: 180,
    job: "backend developer"
}

const john = {
	...walwal,
    name: "John",
    age: 20,
    hobby: "skating"
 }
 
// john = {
//    name: "John",
//    age: 20
//    height: 180,
//    job: "backend developer",
//	hobby: "skating"
// }

...을 사용하면 기존의 객체를 구조분해하여 새로운 객체에 집어넣을 수 있다. 

다만 같은 key값에 대해 새로운 값을 부여할 경우 새롭게 정의된 값이 key에 할당된다.

따라서 위의 name, age과 같이 key가 겹치는 경우 john의 새로운 값들로 바뀐 것이다.

 

[배열 ver.]

const fruits = [ "banana", "apple", "mango"]
const foods = [...fruits, "pasta", "ramen", "hamburger"]

//foods = ["banana", "apple", "mango", "pasta", "ramen", "hamburger"]

배열은 어느 위치에 합치든 상관없다.

key값이 겹치는 일이 없기 때문에 중복된 값도 그대로 들어간다.

const fruits = [ "banana", "apple", "mango"]
const foods = ["pasta", "ramen", ...fruits,  "hamburger"]

// foods = [ 'pasta', 'ramen', 'banana', 'apple', 'mango', 'hamburger' ]

const fruits = [ "banana", "apple", "mango"]
const foods = ["pasta", "ramen", ...fruits, "banana", "apple", "mango", "hamburger"]

// foods = [ 'pasta', 'ramen', 'banana', 'apple', 'mango', 'banana', 'apple', 'mango', 'hamburger' ]

 

2. Rest Operator

이 방식은 함수를 정의할 때 사용된다.

함수 인자에 대해, 개수를 미리 정하지 않고, 일정 개수 이상으로 들어오는 인자에 대해서는 모두 하나의 배열 안에 묶는 방식이다.

 

아래 예시를 보자.

const functionWithDots = (firstArg, ...otherArgs) => {
    console.log(firstArg);
    console.log(otherArgs);
};

functionsWithDots(1,2,3,4,5,6);

// 1
// [2,3,4,5,6]

(Arg는 argument (인자)의 줄임말)

첫 번째 인자 이후로 들어오는 인자들은 모두 하나의 배열로 묶어서 처리한다.

...을 사용한 인자는 마지막 순서에만 사용이 가능하며, 앞이나 중간에 넣을 경우 Error가 발생한다.