[javascript] Spread Operator (스프레드 연산자) 예제

사용법

myFunction(...iterableObj);

 

함수를 호출할때 인자값으로 사용하는 예제

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1,2,3];
console.log( sum(...numbers) ); // 6

const numbers2 = [1,2,3,4];
console.log( sum(...numbers2) ); // 6
// sum함수에서 인자값 3개만 받아서 연산하기 때문에 결과는 6

 

스프레드 연산자를 배열에 넣는 예제

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

console.log( arr3 ); // [1,2,5,3,4]

 

문자열을 넣을 경우 예제

const name = "Hello";
const nameArr = [ ...name ];

console.log( nameArr );  // ["H", "e", "l", "l", "o" ]

 

배열을 복사할 경우 예제 (복사가 아니라 참조가 되고 있다.)

const original = [1,2,3,4];
const copy = original;

copy.push(5);

console.log( original ); // [1,2,3,4,5]
console.log( copy ); // [1,2,3,4,5]

 

배열을 복사할 경우 예제 (스프레드 연산자로 복사) (진정한 복사가 되었다.)

const original = [1,2,3,4];
const copy = [...original];

copy.push(5);

console.log( original ); // [1,2,3,4]
console.log( copy ); // [1,2,3,4,5]

 

오브젝트 복사 사용 예제

const person = {name: "kisspa", age: 25};

const cloneObj = {...person};

console.log( cloneObj ); // {name: "kisspa", age: 25}

 

함수 인자값으로 사용 예제 reduce 함수

function sum(...theArgs) {
  return theArgs.reduce((previous, current) => {
    return previous + current;
  });
}

console.log(sum(1,2,3));   // 6
console.log(sum(1,2,3,4)); // 10