Javascript 스프레드 연산자

스프레드 혹은 전개 연산자는 ... 으로 표기하며 이름처럼 펼치거나 확산한다라는 의미로 동작한다. 말로는 참 이해 안 되는 말이다. 그냥 예제를 보는 게 좋을 것 같다.

let a1 = [1, 2, 3];
let a2 = [...a1, 4, 5, 6];

위 코드에서 a2 는 [1, 2, 3, 4, 5, 6] 이 된다. 즉 a1 리스트의 내용이 a2 내에 풀어져서 자연스럽게 합체(?)되었다. 이것이 바로 스프레드의 정체성을 가장 잘 보여주는 예제같다.

스프레드는 리스트 뿐만 아니라 오브젝트(Object)에서도 별 무리 없이 잘 풀어준다.

let o1 = {
  name: "James",
  age: 16
}
let o2 = {
  familyName: "Kim",
  ...o1
}

이렇게 하면 o2 에는 { familyName: "Kim", name: "James", age: 16 } 이런 내용이 들어가게 된다. 따라서 오브젝트의 내용에 뭔가를 대량으로 추가할 때 상당히 편하게 사용할 수 있는 문법이다.

물론 반대 방향(?)의 활용도 가능하다.

[a, b, ...others] = [1, 2, 3, 4, 5, 6]

아마도 예상 가능하겠지만, 위 코드를 실행시키면 others 에는 [3, 4, 5, 6] 이 들어간다.

스프레드의 이런 특징은 함수의 매개변수에서도 활용이 가능하다.

function sixArgs(a, b, c, d, e, f) {
    // ...
}

let arr = [1, 2, 3, 4, 5, 6]
sixArgs(...arr);

이렇게 하면 각 매개변수에 해당 배열의 값들이 알아서 펼쳐져서 들어간다. 즉 a 에는 1 이, b 에는 2 가, 그리고 최종적으로 f 에는 6 이 들어간다.

물론 스프레드를 사용하는 위치를 임의로 정할 수도 있다.

function someFunc(value, ...rest) {
    console.log(value);
    console.log(rest);
}

위 함수를 someFunc(1, 2, 3, 4, 5) 로 호출한 경우 value 에는 1 이, rest에는 [2, 3, 4, 5] 가 들어간다.

참고로 이 경우 스프레드(Spreads)가 아니라 나머지 매개변수(Rest Parameter)라 불리는 것 같다.