[lodash] orderBy, groupBy

lodash.. lodash... 이제는 자바스크립트로 비즈니스 로직을 구현하다보니 lodash 없으면 어쨌을까 싶다....

최근 회사 통계 데이터를 select해와서 가공하는 데 제목에 있는 함수들을 사용했었다.

 

저번에 SQL의 order by와 group by에 대해 포스팅했는데 이번엔 데이터 collection들도 똑같이 구현할 수 있는 lodash orderBy와 groupBy에 대해 알아볼 것이다.

 

현재 사이드 프로젝트에서 사용할 게시글 조회 API를 일부 수정하여 보기 좋은 response 데이터로 예시를 들것이다.

"data": 
   [
        {
            "id": 1,
            "title": "test1",
            "content": "Im king",
            "viewCount": 10,
            "likeCount": 5
        },
        {
            "id": 2,
            "title": "test2",
            "content": "test",
            "viewCount": 0,
            "likeCount": 3
        },
        {
            "id": 3,
            "title": "test3",
            "content": "test",
            "viewCount": 0,
            "likeCount": 0
        },
        {
            "id": 4,
            "title": "test4",
            "content": "test1",
            "viewCount": 0,
            "likeCount": 1
       	},
        ...
    ]

이와 같이 게시글의 response 데이터가 존재한다.

 

_.groupBy

게시글의 "content"를 키로 잡고 lodash groupBy 하면 어떤 일이 발생되는 지 알아볼 것이다.

코드는 이와 같이 사용하면 된다.

lodash groupBy

코드를 설명하면 첫 번째 인자로 그룹핑할 배열, 그리고 iteratee를 넣어주면 된다.

o는 object의 줄임말로 쓴것이고 사용할 이름은 아무렇게 해도 무방하다.

boards 배열에 배열의 원소(o)안에 있는 content 키를 group by하여 데이터를 가공하는 것이다.

그러면 아래와 같이 response 데이터가 나오는 것을 볼 수 있다.

 

"data": {
        "Im king": [
            {
                "id": 1,
                "title": "test1",
                "content": "Im king",
                "viewCount": 10,
                "likeCount": 5
            }
        ],
        "test": [
            {
                "id": 2,
                "title": "test2",
                "content": "test",
                "viewCount": 0,
                "likeCount": 3
            },
            {
                "id": 3,
                "title": "test3",
                "content": "test",
                "viewCount": 0,
                "likeCount": 0
            },
            {
                "id": 6,
                "title": "test6",
                "content": "test",
                "viewCount": 0,
                "likeCount": 0
            },
            {
                "id": 8,
                "title": "test8",
                "content": "test",
                "viewCount": 0,
                "likeCount": 0
            },
            {
                "id": 9,
                "title": "test9",
                "content": "test",
                "viewCount": 0,
                "likeCount": 3
            }
        ],
        "test1": [
            {
                "id": 4,
                "title": "test4",
                "content": "test1",
                "viewCount": 0,
                "likeCount": 1
            },
            {
                "id": 5,
                "title": "test5",
                "content": "test1",
                "viewCount": 0,
                "likeCount": 2
            }
        ],
        "test3": [
            {
                "id": 7,
                "title": "test7",
                "content": "test3",
                "viewCount": 0,
                "likeCount": 3
            }
        ]
    }

코드를 보면 content 별로 그룹핑된 board, 게시글의 데이터들이 나열되어있다.

 

_.orderBy

이번엔 orderBy이다.

위에 예시로 든 response 데이터에서 likeCount 좋아요 순으로 내림차순 정렬하여 response할 것이다.

코드는 이와 같이 작성하면 된다.

lodash orderBy

orderBy는 groupBy 처럼 맨 처음인자로 배열(boards),

두 번째 iteratee, 세 번째로 정렬 값을 넣어주면 된다.

 

그렇게 정렬된 데이터를 response하면 

 "data": [
        {
            "id": 1,
            "title": "test1",
            "content": "Im king",
            "viewCount": 10,
            "likeCount": 5
        },
        {
            "id": 2,
            "title": "test2",
            "content": "test",
            "viewCount": 0,
            "likeCount": 3
        },
        {
            "id": 7,
            "title": "test7",
            "content": "test3",
            "viewCount": 0,
            "likeCount": 3
        },
        {
            "id": 9,
            "title": "test9",
            "content": "test",
            "viewCount": 0,
            "likeCount": 3
        },
        {
            "id": 5,
            "title": "test5",
            "content": "test1",
            "viewCount": 0,
            "likeCount": 2
        },
        {
            "id": 4,
            "title": "test4",
            "content": "test1",
            "viewCount": 0,
            "likeCount": 1
        },
        ...
    ]

이와 같이 likeCount 좋아요 순으로 정렬된 것을 볼 수가 있다.

 

orderBy에 iteratee와 정렬값이 왜 배열로 있는 지 궁금할 수도 있다.

그건 다중 orderBy를 하기 위해 배열로 구성되어 있고

iteratee가 두 개라면 정렬값도 순서 맞춰서 두 개 넣어줘야 한다.

자세한 건 아래 공식문서를 참조할테니 확인할 수 있을 것이다.

 

groupBy 공식 문서

https://lodash.com/docs/4.17.15#groupBy

Lodash Documentation

 

orderBy 공식 문서

https://lodash.com/docs/4.17.15#orderBy

Lodash Documentation