Functional programming에 대해서

const data = [{...} , {...} , {...}, {...} ]

이런 데이터가 있다고 하자.
그런데 이걸 2개씩 어레이에 담긴 어레이 객체로 바꾸고 싶다.
즉

const modifiedData = [[{...} , {...}] , [{...}, {...}] ]

이렇게 만들고 싶다. 그렇다면 어떻게 해야할까?
1. 첫번째 방법

let modifiedData = []
for(let i=0; i < data.length; i+=2){
	let dataArray = []
    dataArray.push(data[i])
    dataArray.push(data[i+1])
    modifiedData.push(dataArray)
}

2. 두번째 방법

  const modifiedData = data.reduce((result, current) => {
    const lastArray = result[result.length - 1]
    if (lastArray.length === 2) {
      return [...result, [current]]
    } else {
      const removedResult = result.filter((element, index) => index !== result.length - 1)
      return [...removedResult, [...lastArray, current]]
    }
  }, [[]])

무엇이 더 프로그래머틱 해보이는가?

간단해 보이는 건 첫번째 방법이다. 그런데 이게 간단한 로직이어서 그렇지 저렇게 array에 무엇을 넣고 그리고 그 어레이를 또 상위 어레이에 넣는 방식은 array의 index를 건드는 방식이라 버그가 나기 쉽다. 중간에 slice라도 하나 끼어있으면 버그가 바로 난다.

대신에 두번째 방법은 그런게 없는 Functional programming 방식이다.
기존 데이터에 reduce를 이용해서 array가 꽉차 있는 경우와 하나나 둘 들어가 있는 경우로 나누어서 하나하나 쌓아 나갔다. 이렇게 개발하면 버그가 어디서 나는지 확인하기 쉽고 잘 나지도 않는다/