Safari만 spread operator 작동이 다른가

[SeonHyungJo]

let extraServiceAvailable = {
  "waterLarge": false,
  "waterSmall": false,
  "cleaning": false,
  "additionalReturnPlace": false,
  "baggage": false
}

위와 같은 부가서비스를 제공여부에 대한 데이터 기본값이 들어있다. 그리고 API로 현재 제공되는 부가서비스를 가져오는 경우

{
  "waterLarge": false,
  "waterSmall": true,
  "cleaning": true,
  "additionalReturnPlace": false,
  "baggage": false
}

위와 같이 true로 변경되서 들어온다. 이제 기본값과 API로 넘어온 값을 합치려고 한다.

let extraServiceAvailable = {
  "waterLarge": false,
  "waterSmall": false,
  "cleaning": false,
  "additionalReturnPlace": false,
  "baggage": false
}

let APIExtra = {
  "waterLarge": false,
  "waterSmall": true,
  "cleaning": true,
  "additionalReturnPlace": false,
  "baggage": false
}

let result = {...extraServiceAvailable, ...APIExtra}

기본값에 작성한 순서를 유지하면서 API값을 합치기 위해서 Spread Operator를 사용했다. 그런데 사파리에서는 순서가 바뀌게 된다.

// 크롬
{waterLarge: false, waterSmall: true, cleaning: true, additionalReturnPlace: false, baggage: false}

// 사파리
{waterLarge: false, additionalReturnPlace: false, baggage: false, waterSmall: true, cleaning: true}

위와 같은 상황을 방지하기 위해서 forEach()를 사용해서 구현하였다.