[Javascript] 자바스크립트 전개연산자(Spread Operator)

▶자바스크립트 전개연산자(Spread Operator)

오늘은 전개 연산자에 대해 정리해보려고 합니다.

 

🔎 전개 연산자(Spread Operator) ?

---

전개 연산자는 배열 또는 객체를 하나하나 넘기는 용도로 사용이 되는데요.

다음 예제 코드를 통해 알아보도록 하겠습니다.

const arr = [1, 2, 3];
let test_arr1 = [4, 5, 6];
let test_arr2 = [4, 5, 6];

test_arr1.push(arr);
console.log(test_arr1); // [ 4, 5, 6, [ 1, 2, 3 ] ]

test_arr2.push(...arr);
console.log(test_arr2); // [ 4, 5, 6, 1, 2, 3 ]

push를 이용할 때 전개 연산자를 사용하지 않은 코드는 array 전체가 들어가 2차원 배열이 되었지만,

전개 연산자를 사용하게 되면 array 내부의 요소 하나하나가 삽입이 됩니다.

 

다음은 객체 전개 연산자입니다.

const obj = {
  name: 'doeunn',
  age: 23,
};

const test_obj = {
  test1: 1,
  test2: 2,
};

const a_merge = {obj, test_obj};
const b_merge = {...obj, ...test_obj};

console.log(a_merge);
// { obj: { name: 'doeunn', age: 23 }, test_obj: { test1: 1, test2: 2 } }
console.log(b_merge);
// { name: 'doeunn', age: 23, test1: 1, test2: 2 }

차이가 느껴지시나요?

전개 연산자를 사용하지 않는다면 obj의 이름으로 키값을 가지는 2차원 이상의 객체가 만들어지지만,

전개 연산자를 사용하면 1차원으로 객체를 만들 수가 있습니다.

 

아래 예제는 제가 헤매던 부분과 관련된 코드인데요.

전개 연산자를 어떻게 활용하는지 좋은 예시가 될 것 같아 작성해 보았습니다.

const datas = [
  {
    name: '호민',
    age: 23,
  },
  {
    name: '병건',
    age: '24',
  },
];
// 사용자로부터 값을 받아 datas에 정보를 추가하려고 한다.
const inputData = {
  name: '풍',
  age: 26,
};

const newArray1 = [...datas, inputData];
console.log(newArray1);
/*
[
  { name: '호민', age: 23 },
  { name: '병건', age: '24' },
  { name: '풍', age: 26 }
]
*/

새로운 배열에 가지고 있는 객체들을 동일하게 담고 싶다면

위 코드와 같이 배열로 되어 있는 변수 앞에 전개 연산자를 사용하여 펼쳐서 배열 안에 넣어주면

1차원 배열로 모든 데이터를 한번에 배열로 담을 수 있게 됩니다.