[🍦] JS 문법 - Spread operator (전개 연산자)

'spread'의 뜻은 펼치다, 뿌리다.

단어의 뜻과 같이 배열 내의 요소들을 펼쳐놓는다.

원본은 그대로 유지되고 복사본은 원하는 대로 변경이 가능하기 때문에 

주로 객체나 배열을 복사할 때 쓰인다.

 

Spread operator

 

📍기본 형식

• 점 세 개(...)만 작성하면 된다.

1. 양쪽 대괄호 [ ] 를 제거할 수 있다.

let a = [1, 2, 3]
console.log(...a) // 1 2 3
// console.log(1, 2, 3); -> 1 2 3

 

2. 새로운 배열을 만들 수 있다.

let a = [1, 2, 3]
let b = [...a] // b는 새로운 배열

 

3. 두 개의 배열을 합칠 수 있다.

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

let c = [...a, ...b] // [1, 2, 3, 4, 5, 6]
console.log(c)

 

 

📍왜 사용할까? (배열 예시)

• 객체 타입의 특이한 복사 방식 때문이다.
• 원시 타입 예시 - 문자열, 숫자, 불리언, null, undefined 등

• a에 재할당을 해도 기존의 b값은 변하지 않는다.

// 원시 타입
let a = 1 
let b = a

a = 2

console.log(a) // 2
console.log(b) // 1

 

• 객체 타입 예시 - array(배열), object(객체)

• a와 b가 완전히 동일해진다. (참조 복사)
• a를 바꾸면 b도 바뀜 => 위험 or React에서 추후에 문제가 될 수 있다.
• b를 바꿔도 a가 바뀜 => 위험 or React에서 추후에 문제가 될 수 있다.

let a = [1, 2, 3]
let b = a

a[0] = 100 

console.log(a) // [100, 2, 3]
console.log(b) // [100, 2, 3]

 

• 대안 -> spread operator

let a = [1, 2, 3]
let b = [...a]

a[0] = 100;
console.log(a) // [100, 2, 3]
console.log(b) // [1, 2, 3]

 

 

📍객체 적용 예시

• 양쪽 중괄호 { } 를 제거해준다.

• console.log로 바로 확인하면 에러가 난다.
• a: 1, b: 2 라는 문법은 없기 때문이다.

let a = { a: 1 , b: 2 }
console.log(...a) // { a: 1, b: 1 }
// Uncaught TypeError: Spread syntax requires 
// ...iterable[Symbol.iterator] to be a function
//    at <anonymous>:1:9
// (익명) @ VM2572:1

console.log({...a}) // 이렇게 작성해서 새로운 객체를 만들어줍니다.
// { a: 1 , b: 2 }

 

• 새로운 객체를 만들 수 있다.

let a = { a: 1 , b: 2 }
let b = { ...a }

console.log(b) // { a: 1, b: 2 }

 

• 두 객체를 합칠 수 있다.

let a = { a: 1, b: 2 } 
let b = { c: 3, d: 4 }

let c = {...a, ...b}
console.log(c); // { a: 1, b: 2, c: 3, d: 4 }

 

• key(키)가 겹치면 뒤의 키 & 값으로 대체된다.

let 첫번째 = { a: 1, b: 2 }
let 두번째 = { ...첫번째, a: 3 }
// { b: 2, a: 3 }
두번째.a

console.log(첫번째)

 

 

📍실전 예시

• spread 사용 전

const products = [
  {
    브랜드: "수아레",
    상품명: "케이블 카라 반팔 니트 - 6 Color",
    가격: 39900,
  },
  {
    브랜드: "커버낫",
    상품명: "에센셜 어쩌고",
    가격: 34300,
  },
];

const newProducts = products.map((product) => {
  return {
    브랜드: product.브랜드,
    상품명: product.상품명,
    가격: product.가격 * 0.8,
  };
});

console.log(newProducts);

 

• spread 사용 후

const newProducts = products.map((product) => {
  return {
    ...product,
    가격: product.가격 * 0.8,
  };
});