매일 한줄 코딩

11. javascript spread 연산자 ( … ) 본문

develop/javascript

11. javascript spread 연산자 ( … )

ShipJH 2022. 9. 11. 21:59

객체나 배열에 있는 값을 펼쳐준다.

const sedanCar = {
  type: "sedan"
};

const bmw = {
  type: "sedan",
  madeIn: "germany",
  name: "bmw 320d"
};

const honda = {
  type: "sedan",
  madeIn: "japan",
  name: "CR-V"
};

// type이 모두 sedan. 중복된코드...

console.log(bmw); // {type: "sedan", madeIn: "germany", name: "bmw 320d"}
console.log(honda); // {type: "sedan", madeIn: "japan", name: "CR-V"}

spread 를 이용한다면?

객체를 펼쳐주므로 …sedanCar 를 하면, sedanCar에 있는 값들이 객체로 들어가게 된다.

const sedanCar = {
  type: "sedan"
};

const bmw = {
  ...sedanCar,
  madeIn: "germany",
  name: "bmw 320d"
};

const honda = {
  ...sedanCar,
  madeIn: "japan",
  name: "CR-V"
};

console.log(bmw); // {type: "sedan", madeIn: "germany", name: "bmw 320d"}
console.log(honda); // {type: "sedan", madeIn: "japan", name: "CR-V"}

마찬가지로 배열도 가능하다.

const sedanCar = ["bmw 320d", "CR-V", "GV80", "말리부"];
const suvCar = ["코란도", "투싼", "산타페"];

const allCar = [...sedanCar, ...suvCar, "페라리"];

console.log(allCar); //["bmw 320d", "CR-V", "GV80", "말리부", "코란도", "투싼", "산타페", "페라리"]

'develop > javascript' 카테고리의 다른 글

13. javascript Promise  (0) 2022.09.11
12. javascript 동기 / 비동기  (0) 2022.09.11
10. javascript 비 구조화 할당  (0) 2022.09.11
9. javascript 배열 내장 함수  (0) 2022.09.11
8. javascript 반복문  (0) 2022.09.11
Comments