Spread Operator (전개 연산자)

Spread Operator

Spread Operator(전개연산자)는 ES6의 문법으로, 배열이나 문자열과 같이 반복가능한 객체를 하나씩 펼쳐서 리턴한다.

• ... 과 같이 점 3개를 붙여서 사용한다.
• 모든 Iterable은 Spread 될 수 있다. (순회가능한 것들은 펼칠 수 있다.)

• func(...iterable)
  → 풀어서 함수인자로 받아올 수 있다. (iterable은 배열)
• [...iterable]
  → 배열 안에서 순회가능한 것을 펼치면 아이템 하나하나가 배열로 전달된다.
• { ...obj }
  → 오브젝트에서 오브젝트를 펼치면 기존 오브젝트 안에있는 키와 값이 복사되어서 들어온다. (shallow copy)

📌 배열

배열의 복사는 [...arr] 를 이용한다.

▼ ES5 에서 'concat' 메소드를 활용할 경우

// ex.1)
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];
const arrWrap = arr1.concat(arr2, arr3);

console.log(arrWrap); 
// [1, 2, 3, 4, 5, 6, 7, 8, 9]



// ex.2)
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];
const arrWrap = arr1.concat(arr3, arr2);

console.log(arrWrap); 
// [1, 2, 3, 7, 8, 9, 4, 5, 6] 

• arr1 배열에 concat 메소드를 활용해서 arr2와 arr3를 이어 붙인다.
• ex.2) 인자로 전달받은 값 순으로 기존 배열의 끝에서부터 값이 추가된다.

▼ ES6 에서 '전개 연산자(Spread Operator)'를 활용할 경우

// ex.1)
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];
const arrWrap = [...arr1, ...arr2, ...arr3];

console.log(arrWrap); 
// [1, 2, 3, 4, 5, 6, 7, 8, 9]



// ex.2)
const a1 = ['🍋'];
const aaa = ['🍏', ...a1, '🍎'];

console.log(aaa); 
// ["🍏", "🍋", "🍎"]

• 전개연산자를 사용해서 새로운 배열을 만든다.
• concat 메소드 보다 간결하고 가독성도 좋아졌다.
• ex.2) 배열의 아무곳에나 추가할 수 있다.

❗️ 전개 연산자를 이용한 복사에는 1차원에서만 유효

• 전개연산자를 이용하면, 2차원 이상의 배열을 할당할 때, 2차원 이상의 배열은 그대로 들어간다.

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

console.log(arr2);
// [1, 2, [3, 4], 5, 6, 7]

기존 배열에 값을 추가할 경우

• concat()
  : 인수로 전달된 값들(배열 또는 값)을 원본 배열의 마지막 요소로 추가한 새로운 배열을 반환한다.
• push()
  : 메소드는 원본 배열을 직접 변경한다.

✍️ push() 를 사용해서 (새로운 배열을 만들어내지 않고) 기존 배열에 값을 추가하면서 전개연산자를 사용해보자.

▼ push()만 사용할 경우

const fruits = ['🍏', '🍎'];
const fruits2 = ['🍊', '🍋']

fruits.push(fruits2);

console.log(fruits);
// ["🍏", "🍎", ["🍊", "🍋"]]

• push() 로 fruits배열에 fruits2 배열을 할당하면 배열안에 배열이 생성되어 2차원 배열이 된다. 이경우 기존 방법으로는 push.apply 를 사용해서 다소 복잡하게 ex.2) 와 같은 결과를 얻어낼 수 있었다고 한다.

▼ push() + 전개연산자를 사용할 경우

const fruits = ['🍏', '🍎'];
const fruits2 = ['🍊', '🍋']

fruits.push(...fruits2);

console.log(fruits);
// ["🍏", "🍎", "🍊", "🍋"]

• 전개연산자를 이용하면, 이와 같이 2차원 배열이 생성되지 않게 배열을 할당 할 수 있다.
  
  
  

기존 배열을 보존해야 할 때 유용하다.

▼ ES5 에서 'reverse' 메소드를 활용할 경우

const arr1 = [1, 2, 3];
const arr2 = arr1.reverse();

console.log(arr1); // [3, 2, 1]
console.log(arr2); // [3, 2, 1]

• 기존 배열이 변경된다.

▼ ES6 에서 '전개 연산자(Spread Operator)'를 활용할 경우

const arr1 = [1, 2, 3];
const arr2 = [...arr1].reverse();

console.log(arr1); // [1, 2, 3]
console.log(arr2); // [3, 2, 1]

• 원본 배열 변경없이 전개 연산자와 reverse() 메소드를 활용해서 새로운 배열을 만들 수 있다.

📌 객체

객체의 복사는 {...obj} 를 이용한다.

const obj1 = { a:'A', b:'B'};
const obj2 = { c:'C', d:'D'};
const objWrap = {...obj1, ...obj2};

console.log(objWrap);
// { a: 'A',  b: 'B',  c: 'C',  d: 'D'}

• 전개 연산자를 사용하면 객체 자체를 할당(2차원 객체)하지 않고, 각각의 값이 할당된다.

두 객체 리터럴을 병합 한다.

• 객체리터럴의 key값에 해당하는 속성이 같다면 병합된다.

const obj1 = { name: 'kim', age: 18 };
const obj2 = { age: 19, job: 'student' };

const person = { ...obj1 };
console.log(person); 
// { age: 18, name: "kim" }

const person1 = { ...obj1, ...obj2 };
console.log(person1);
// { age: 19, name: "kim", job: "student" }

기존의 Object.assign() 보다 더 짧은 문법으로 사용 가능하다. ( ❗️ 단 완전히 대체할 수 없다는 점에 유의하자 MDN 참고 )

rest parameter

const fruits3 = ["Apple", "Banana", "Cherry"];
console.log(fruits3); // ['Apple', 'Banana', 'Cherry']
console.log(...fruits3); // Apple Banana Cherry

function toObject(a, b, c) {
  return {
    a: a,
    b: b,
    c: c,
  };
}
console.log(toObject(...fruits3)); // {a: 'Apple', b: 'Banana', c: 'Cherry'}



const fruits3 = ["Apple", "Banana", "Cherry", "Orange"];
console.log(fruits3); // ['Apple', 'Banana', 'Cherry', 'Orange']
console.log(...fruits3); // Apple Banana Cherry Orange

function toObject(a, b, ...c) { 
  return {
    a: a, // 속성과 변수의 이름이 같으면 a 로 축약할 수 있다.
    b: b,
    c: c,
  };
}
console.log(toObject(...fruits3));


// 아래 코드 축약형
const toObject1 = (a, b, ...c) => ({ a, b, c }); // 1)

• 매개변수에서도 전개연산자를 사용할 수 있다. (rest parameter)
• 순서대로 받은 후, 이후 그 순서가 명확하지 않을 때 나머지를 배열의 형태로 전부 다 받는 용도로써 사용될 수 있다.
  

❗️ 객체데이터를 사용할때 {} 를 쓰는데 화살표함수에서의 {} 는 함수범위를 나타내는 단순 블록으로 해석된다.
따라서 () 안에 {} 객체 데이터를 정의해 주어야 함수 밖으로 반환될 수 있는 구조를 갖는다.✍️

reference
MDN-spread-operator
spread-operator