flatMap()

오늘은 무한스크롤을 구현하면서 새롭게 알게된 배열메서드인 flatMap 에 대해 공부한걸 적어보려고 한다.
우선 flatMap 함수는 flat과 map을 합친 메서드이다.
flat 메서드가 무엇인지 잘 모를수도 있기에 우선 flat에 대해 설명하겠다.

flat()

    const a = [1,2,3]
    const b = [4,5,6]
    // a와 b는 배열을 가지고 있는 변수입니다.
    // 이 두 개를 합치기 위해서는 concat으로 합치는 방법도 있습니다.

    console.log(a.concat(b)) // [1,2,3,4,5,6]
    console.log([a,b].flat()) // [1,2,3,4,5,6]

우선 concat과 비슷하게 배열을 합치는 메서드인데, 좀 더 사용하기에는 깔끔하고 편한것 같다.
a변수와 b변수를 배열로 합쳐서 하나의 배열로 만들었다.

우선 mdn에서 정의한 flatMap()은 이렇다.

• Array 인스턴스의 flatMap() 메서드는 배열의 각 요소에 주어진 콜백 함수를 적용한 다음 그 결과를 한 단계씩 평탄화하여 형성된 새 배열을 반환합니다. 이 메서드는 map() 뒤에 깊이 1의 flat()을 붙이는 것(arr.map(...args).flat())과 동일하지만, 두 메서드를 따로 호출하는 것보다 약간 더 효율적입니다.

예시를 들어 설명해보겠다.

    const arr = [1,2,3,4,5]
    console.log(arr.map(value => [value + 1])) // [[2],[3],[4],[5],[6]]
    console.log(arr.flatMap(value => [value + 1])) // [2,3,4,5,6]

map만 사용한다면 위에 콘솔처럼 각각의 value값들을 배열로 담아서 arr이 가지고 있던 배열의 인덱스값들에 + 1 씩 더해져서
[[2],[3],[4],[5],[6]] 이렇게 나올 수 있는데,
flatMap은 배열의 요소들을 평면화하여 하나의 배열로 만들 수 있다.

사용해보고나서 느낀 점은 여러 데이터들이 있고 이것을 하나로 묶어서 관리할 때 사용하면 편할 것 같다라는 생각이 들었다.
무한스크롤을 구현하면서 알게된 메서드인지라 당연히 무한스크롤 처럼 여러 데이터들을 하나의 배열로 묶어서 보여주는데에도 엄청 용이한 것 같다.