프론트엔드 개발자가 되기위한 여정 -38

이정우·2022년 10월 22일
0

frontend-bootcamp

목록 보기
40/60

밸~하!

밸로그 여러분 안녕하세요!
오늘은 자바스크립트에서 사용하는 flatten과 unflatten 에 대해서 알아볼수있도록 하겠습니다 !

자 그럼 바로 알아볼까요?/

flatten이란?

단어 그대로 번역을 하게된다면 바로 평평하게 하다라는 뜻입니다
도대체 어떤것을 평평하게 하는걸까요??

바로 중첩된 배열의 구조를 하나의 배열로 만드는것을 의미합니다!

다시말해서 하나의 배열로 만들면
여러개로 나뉘어져있던 배열들이 한개가 되어 평평해 지겠죠??

그럼 이 flatten의 방법엔 어떤것들이 있을까요??

다양한 방법들이 있는데 제가 오늘 소개시켜드릴 방법은 바로
mdn에서 제공하는 array.flat()이라는 메서드를사용하는것입니다
어떤 역할을까요??

flat메서드는 모든 하위 배열요소를 지정한 깊이까지 재귀적으로 이어붙인 새로운 배열을 생성하게 됩니다

한번 예제를 봐볼까요??

const arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]

const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

const arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

자 이렇게 flat을 쓴다면은 배열안에 있는 배열이 한개로 합쳐진것을 볼수있습니다
대신 사용할때는 평탄화 할 깊이를 지정해주어야합니다
Default값으로는 1이 들어가게 되고 Infinity를 주게되면 모든 중첩배열을 평탄화 해줄수있습니다

자 이렇게 flatten이 어떤것이 알아보았으니

이번엔
unflatten을 알아볼까요??

unflatten이란?

앞서 설명드렸던 flatten과는 다르게
평탄화하지않는 즉 중첩된 배열구조를 의미합니다!

앞서 예시에서 보여드렸던

const arr1 = [1, 2, [3, 4]];

이 예제가 바로 unflatten이라고 할수있겠죠??

자 이렇게 오늘은 flatten과 unflatten에 대해서 알아보았습니다!

flatten을 사용을 한다면 복잡한 배열의 구조 또한도 한번에 볼수있기에 훨씬 가독성이 뛰어나지겠고 알고리즘을 풀때도 크게 도움이 되겠죠??

자 그럼 오늘도 지식한개 쌓아가봐요!

그럼 오늘도 이만

밸~ 바!

profile
주니어 프론트엔드 개발자

0개의 댓글