TIL88. zip array

다른 두 배열을 한 배열처럼 만들어보자.

해결상황

하드코딩된 부분을 맵을 돌려서 예쁘게 만들어보자.
목표: 서로 다른 두 배열을 가지고 하나의 맵을 돌려 화면에 나타내야 한다.
-> zip array 활용하기

하드코딩, 수정해야 하는 부분

<div className="estimate">
          <span>위 : {summaryOfEvaluation?.count[0].value}</span>
          <span>아래 : {summaryOfEvaluation?.count[1].value} </span>
          <span>왼쪽 : {summaryOfEvaluation?.count[2].value} </span>
          <span>오른쪽 : {summaryOfEvaluation?.count[3].value} </span>
</div>

zip 기본 예제

const arr1 = ['a', 'b', 'c'];
const arr2 = [1, 2, 3];

const arr3 = arr1.map((el, i) => {
  return [el, arr2[i]];
});

console.log(arr3);
// [ [ 'a', 1 ], [ 'b', 2 ], [ 'c', 3 ] ] 

요소의 갯수가 정해져 있는 배열, 튜플형태

zip 적용하기

  //데이터 형태
 "summary": {
        "count": [
          {
            "type": "TOP",
            "value": 3
          },
          {
            "type": "BOTTOM"
            "value": 1
          },
            "type": "LEFT"
          "value": 0
          },
          {
            "type": "RIGHT"
            "value": 1
          }
        ],
          ...생략
      },
        

const organizeData = () => {
    const direction = ["위", "아래", "왼쪽", "오른쪽"];
    const value = summary?.count?.map((item) => {
      return item.value;
    });
    const zip = direction.map((key, i) => {
      return [key, value?.[i]];
    });
    return zip;
  };

//jsx 부분
 <div className="estimate">
          {organizeData().map(([key, value]) => {
            return (
              <span>
                {key} : {value}
              </span>
            );
          })}
</div>

우선 데이터에서 필요한 부분을 뽑아 배열형태로 만들어준다.
첫번째 배열에 map을 돌려서 배열의 첫번째 요소로 넣어주고, 두번째 요소로 인덱스값을 통해 두번째 배열의 값을 뽑아주는 튜플형태로 리턴해준다.

리팩토링

한번 더 간결하게!

const organizeData = () => {
  return direction.map(( key, i ) => [key, summary?.count?.[i]?.value])  
};

완성된 화면

위 : 3

아래 : 1

왼쪽 : 0

오른쪽 : 1