2019년 1년차때 회사에서 배열을 풀어서 작업하는 과정이고 그때 그냥 map 함수와 foreach 등 여러가지 함수를 사용하며, 배열을 풀어내는 작업을 하다가 불편하여 한번에 할 방법이 없는가? 궁금해 했던 시기였다. ES10이 안정화 되기 전에 시기였다.
const list = [1,3,4,5,[2,5,2]];
const array = []
list.forEach(v=>{
Array.isArray(v)? array.push(...v):array.push(v)
});
console.log(array)위에 해당하는 코드처럼 만들었다. 위에 코드에서 보면 concat() 을 이용한 방법도 있었지만, 나는 push를 이용하여 배열을 합쳤다.
위에 리스트가 [1,3,4,5,[2,5,2]] 였던 값이 codepen이나 codesandbox 에서 실행해보면 [1, 3, 4, 5, 2, 5, 2] 로 바뀐 것을 알수 있다.
이처럼 이런 방식을 배열을 평탄화 한다고 해서 배열의 평탄화라고 부른다.
위에 이미지는 캐핑카 개조를 위해 평탄하게 세팅이 되어 있는걸 볼 수 있다. 이처럼 Javascript도 배열을 쭉~ 펼치기 위해서 위에 코드를 이용하여 2 ~ 8... 중 배열을 쭉 펼쳐낸다고 보면된다.
Javascript ES 10 에서 조금더 쉽게 배열을 평탄화 하게 쉽게 나온 함수들이 있다. 그것은 바로 flat, flatMap 함수 이다.
flat, flatMap
flat
우선 flat 함수의 사용한 예제를 보면서 이야기 하자. "자자 아래의 코드를 봐주세요~"
const arr1 = [0, 1, 2, [3, 4]];
console.log(arr1.flat());
// expected output: Array [0, 1, 2, 3, 4]
const arr2 = [0, 1, [2, [3, [4, 5]]]];
console.log(arr2.flat(2));
// expected output: Array [0, 1, 2, 3, Array(2)] -> Array(2) 는 [4,5] 이다.
console.log(arr2.flat(Infinity));
// expected output: Array [0, 1, 2, 3, 4, 5]mozilla 사이트 참고하여 코드를 들고왔다. 여기에서는 열심히 for문 돌리는것도 없고 반복작업을 하는것이 없다. 심지어 flat 함수 하나로만 모든게 해결이 되어있는것을 볼 수 있다. 리스트가 [0, 1, 2, [3, 4]] 인게 [0, 1, 2, 3, 4] 로 되어있는 것을 볼 수 있다.
여기에서 flat 함수를 사용할때 주의 할점은 Aarray 배열만 사용할 수 있으며, flat( -> 여기 안에 배열의 깊이 만큼 <-) 숫자를 적어서 배열을 평탄화 작업을 해야한다.
flatMap
그 다음으로 볼 것은 flatMap 함수이다. 이거는 주로 어디에 사용이 되는가 고민이 될 때가 있다. 그냥 위에 flat 함수로 모든걸 사용할 수 있지 않은가? 이런 고민도 있을거고 하지만 밑에 Mozilla 사이트에서 좋은 예시를 보여준게 있다.
const arr1 = ["it's Sunny in", "", "California"];
arr1.map((x) => x.split(" "));
// [["it's","Sunny","in"],[""],["California"]]
arr1.flatMap((x) => x.split(" "));
// ["it's","Sunny","in", "", "California"]이렇게 보면 알겠는가?? 자세히 보면, 문자열 배열인데 거기에서 split으로 한번 더 배열로 나누는 작업을 하고 있다. 그런데 flatMap을 이용하여 그 2중 배열이 되어야 하는걸 바로 평탄화 작업하여 1중 배열로 만들어 버리는 것을 볼 수 있다.
한마디로 flat + map 이름 그대로 두개의 함수가 합쳐서 만들어 졌다고 봐도 무난하다.
나는 이렇게 정리를 하면 현재 ES14까지 나왔는데, 무서운 속도로 javascript가 발전하고 있다는 것을 실시간으로 지켜보고 있는거 같다. 단순한 함수를 사용하여 알고리즘을 풀어내는 것이 아니라 새로운 함수를 어떻게 효율적으로 사용할지 고민을 해야 되겠다.