[javascript] 자바스크립트 스프레드 연산자 (spread operator)

참고: https://www.programiz.com/javascript/spread-operator

이 포스트에서는 JavaScript의 스프레드 연산자를 예제와 함께 알아보겠습니다. 스프레드 연산자는 JavaScript ES6에서 사용할 수 있는 새로 추가된 기능입니다.

스프레드 연산자 (spread operator)

스프레드 연산자(...)는 배열같은 객체의 요소를 전개하거나 펼칩니다. 예를 들면:

const arrValue = ['My', 'name', 'is', 'Jack'];

console.log(arrValue);
console.log(...arrValue);

위의 예제에서 다음의 코드 "console.log(...arrValue)"는 "console.log('My', 'name', 'is', 'Jack')"과 동일합니다.

스프레드 연산자로 배열 복사

스프레드 연산자(...)를 사용하여 배열을 복사할 수 있습니다. 예를 들면:

const arr1 = ['one', 'two'];
const arr2 = [...arr1, 'three', 'four', 'five'];

console.log(arr2);

스프레드 연산자를 사용해 배열 클론

JavaScript에서 객체는 값이 아닌 참조로 할당됩니다. 예를 들어:

let arr1 = [ 1, 2, 3];
let arr2 = arr1;

console.log(arr1);
console.log(arr2);

arr1.push(4);

console.log(arr1);
console.log(arr2);

여기서 변수 arr1과 arr2는 모두 동일한 배열을 참조합니다. 따라서 하나의 변수가 변경되면 두 변수 모두 변경됩니다.

여기서 동일한 배열을 참조하지 않고 배열을 복사하고자 할 때 스프레드 연산자를 사용할 수 있습니다. 이렇게 하면 다음 예제와 같이 한 배열의 변경사항이 다른 배열에 반영되지 않습니다:

let arr1 = [ 1, 2, 3];

let arr2 = [...arr1];

console.log(arr1);
console.log(arr2);

arr1.push(4);

console.log(arr1);
console.log(arr2);

스프레드 연산자와 객체

다음 예제와 같이 객체에 스프레드 연산자를 사용할 수도 있습니다:

const obj1 = { x : 1, y : 2 };
const obj2 = { z : 3 };

const obj3 = {...obj1, ...obj2};

console.log(obj3);

위의 예제에서 스프레드 연산자를 통해 obj1과 obj2의 속성이 obj3에 추가되었습니다.

Rest Parameter

스프레드 연산자를 매개변수로 사용하면 이를 rest 파라미터라고 합니다. rest 파라미터를 사용하여 함수 호출 시 여러 인수를 받을 수 있습니다:

let func = function(...args) {
    console.log(args);
}

func(3);
func(4, 5, 6);

• func() 함수에 파라미터를 하나만 넣으면 rest 파라미터는 하나의 파라미터만 받습니다.
• 여러개의 인수를 넣으면 rest 파라미터는 세 개의 인수 모두를 받습니다.

rest 파라미터를 사용하면 사용자가 전달한 인수는 배열로 전달됩니다.

이 외에도 스프레드 연산자를 활용하여 일반 함수에 여러 인수를 전달할 수도 있습니다. 예를 들어:

function sum(x, y ,z) {
    console.log(x + y + z);
}

const num1 = [1, 3, 4, 5];

sum(...num1);

위의 예와 같이 일반 함수에 스프레드 연산자를 사용해 인수를 전달하는 경우 함수는 필요한 값만 받아들이고 나머지는 무시합니다.

관련 글

자바스크립트 객체 디스트럭처링 (destructuring)