[컴] flat() 과 flatMap()

js / flat / flatmap / 자바스크립트 / javascript 의 flat

flat() 과 flatMap()

flat 의 의미는 array 로 되어있는 것들을 array 밖으로 꺼내서 평평하게(flat) 만든다는 의미로 보면 될 것 같다. 그래서 flat() 에서는 2중으로 된 array 를 1개의 평평한 array 로 만들어주고, flatMap() 에서는 map 을 돌면서 발생하는 array 에 대해서 이를 array 그대로 merge 하는 것이 아니라 flat 하게 해서 merge 한다.

예를 들어 [3, [4,5]] 이 있다면,

• index 0 의 3은 res_array[0] 에 들어가고
• index 1 의 4, 5 는 res_array[1], res_array[2] 에 들어가게 된다.

자세한 이야기는 각 항목을 확인하자.

flat()

flat() 은 명확하다. array 안에 있는 element 들을 전부 concat 하는 것이다. 다만 아래처럼 2중으로 된 array 는 그냥 하나의 element 로 처리한다.

단순하게 얘기하면, 2번 감싸여 있는 array를 한꺼풀 벗겨준다고 보면 된다.

>> [3, [4,5], [5,[5,3]]].flat()

[ 3, 4, 5, 5, [5, 3]]

flatMap()

flatMap() 은 ref. 1 에 있는 source code 가 이해를 쉽게 해준다.

function flatMap(arr, mapFunc) {
    const result = [];
    for (const [index, elem] of arr.entries()) {
        const x = mapFunc(elem, index, arr);
        // We allow mapFunc() to return non-Arrays
        if (Array.isArray(x)) {
            result.push(...x);
        } else {
            result.push(x);
        }
    }
    return result;
}

map() 과 같은데, map() 은 return 값으로 array 가 오면, 그 array 를 통으로 array 안으로 밀어넣는다.

>> [1,3].map((val, i)=>{return [val]})

[[1], [3]]

그런데 flatMap()은 return 값이 array 라면, 이것을 한커풀 풀어서 넣어준다. 즉, array 밖으로 꺼내서 넣어준다.

>> [1,3].flatMap((val, i)=>{return [val]})

[1, 3]

References

1. ES2019: Functional pattern – flatMap