Flatten & Unflatten

플래턴(Flatten)과 언플래턴(Unflatten). 먼저, 플래턴은 중첩된 배열이나 객체를 한 단위로 풀어서 사용함을 말하고, 언플래턴은 그 반대로 특정 단위를 묶거나 curring처럼 다 쪼개어 사용함을 말한다.

Flatten

Flatten은 flat의 동사형이다. 따라서 평평하게 한다는 뜻을 갖고 있다. 위에서 언급했듯 배열이나 객체를 평탄화 시킨다는 의미다. 배열에서는 flat() 메서드를 통해 하위 배열까지 평탄화할 수 있고, 객체에서는 map() 혹은 reduce()와 concat() 이용한다. 코드를 보면 무슨 말을 하는 지 조금 더 이해된다.

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]

arr.reduce((acc, val) => acc.concat(val), []); // [1, 2, 3, 4]

배열을 flat() 메서드로 평탄화한 코드다. 다른 것 없다. 중첩된 배열을 풀었다. 복잡하게 얽혀 있는 배열을 단순하게 풀어두는 것을 플래턴이라 부른다. 플래턴화 시키는 이유는 단순하다 얼기설기 묶여서 보기 어려운 모습을 단순화시켜 깔끔하게 표기하는 것. 더불어 평탄화해도 무방한 그룹화일 경우에도 사용한다. 물론, 메서드를 사용하지 않고 직접 풀어둔다 해도 무방하다. 푸는 작업 자체가 플래턴이기 때문.

{
    "user": {
        "key_value_map": {
            "CreatedDate": "123424",
            "Department": {
                "Name": "XYZ"
            }
        }
    }
}

// 메서드를 쓰지 않고 위 모습을 아래 모습처럼 바꾸는 것도 플래턴이라 할 수 있다.

{
    "user.key_value_map.CreatedDate": "123424",
    "user.key_value_map.Department.Name": "XYZ"
}

객체를 플래턴화 하는 기본 메서드는 존재하지 않다. 다만, 라이브러리에서 찾을 수 있다. https://www.npmjs.com/package/flatten-object, https://www.npmjs.com/package/flat 등 객체 플래턴 라이브러리 설명서는 객체 플래턴화의 이해를 도왔다.

 

Unflatten

언플래턴은 정확히 플래턴의 반대말로 나타난 표현이다. 여러 자료를 찾아봐도 플래턴 자체만으로도 여러 설명이 있지만, 플래턴 없은 언플래턴 자료는 없었다. 필자가 못찾은 것일 수도 있으나 있다해도 굉장히 적은 수임은 틀림 없다. 반대 의미로 생각해 보건데, 언플래턴은 아마 객체에서 주로 쓰일 듯하다. 배열의 경우 플래턴화 시켰을 때 깔끔한 경우가 많지만, 객체 경우 언플래턴일 때 더 가독성이 좋기 때문이다. 다만, 코드가 길어지는 게 단점일 듯하다. 그리고 curring과 같이 특정 요소를 중첩해 사용하고 싶을 때나 고정하고 싶을 때도 언플래턴이 도움이 되지 않을까 싶다.

 

Best way to flatten JS object (keys and values) to a single depth array

[MDN] Array.prototype.flat()

flat

※ 잘못된 내용이 있을 경우 댓글로 알려주세요. 배우고 익히고 수정하겠습니다:)