더 나은 웹개발을 꿈꾸는 기술 블로그. 웹이즈프리.

HOME > lodash

[lodash] chunk 알아보기

Last Modified : 2022-11-13 / Created : 2022-11-14
409
View Count
lodash 배열 메소드 중 하나인 _.chunk()에 대하여 알아봅니다.




# lodash chunk 메소드
chunk의 사전적 의미를 먼저 살펴보면 아래와 같이 나타납니다.

chunk  n. 덩어리, 많은 양

뜻을 통해서 chunk()가 어떤 큰 뭉치나 덩어리로 만들어준다는 것을 대충 알 수 있습니다. 실제로 배열에 chunk()를 사용하면 특정 길이를 가지는 배열 단위의 부분 집합을 가지도록 만들어 줍니. 예를들어 아래와 같은 하나의 배열이 2차원 배열처럼 변경할 수도 있죠.

Before )
[ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

After )
[ [1, 2, 3], [4, 5, 6], [7, 8, 9] ]


이처럼 배열 내부의 배열 형태는 매우 유용하게 사용되는 데이터의 한 형태입니다. 다음으로 _.chunk()의 간략한 문법은 아래와 같습니다.


_.chunk(Array, Chunk size)

// Array : chunk를 적용할 배열
// Chunk size<Number>: chunk 단위로 묶게 될 크기, size

size는 배열의 크기를 나타내며 size만큼 가지는 배열의 집합으로 바뀌게 됩니다. 그럼 아래에서 간략하게 몇 가지 예제를 만들어 보겠습니다.


! lodash _.chunk() 예제보기
아래에서는 배열 변수 myItems를 만들고 각각 다른 크기의 값을 가지는 2차원 배열을 만들어 보겠습니다. 다음의 코드를 봐주세요.
let myItems = [1, 2, 3, 4, 5, 6, 7, 8, 9]

_.chunk(myItems)
_.chunk(myItems, 3)
_.chunk(myItems, 5)

위 코드를 실행하면 그 결과는 각각 아래와 같이 나타나게 됩니다. 가장 먼저 _.chunk(myItems)의 결과입니다.
_.chunk(myItems)

[1, 2, 3, 4, 5, 6, 7, 8, 9]

결과를 보면 모두 하나씩 크기를 가지는 결과를 반환하게 됩니다. 즉 _.chunk(myitems, 1)과 동일한 결과를 가져오죠.

다음은 _.chunk(myItems, 3)을 실행한 결과입니다. 3개의 값을 가지는 2차원 배열로 변환된 것을 알 수 있습니다.
_.chunk(myItems, 3)

[ [1, 2, 3], [4, 5, 6], [7, 8, 9] ]

다음은 _.chunk(myItems, 5)을 실행한 결과입니다.
_.chunk(myItems, 5)

[ [1, 2, 3, 4, 5], [6, 7, 8, 9] ]

아이템이 모두 9개이므로 각각 5, 4개를 가지는 2차원 배열로 변환되었습니다.


위의 예제는 매우 간단한 형태의 예재입니다 ~ 그렇다면 실제로 사용 가능한 예제는 무엇이 있을까요? 만약 학급에 전체 학생이 21명인 경우 5명으로 조를 나누어 체육 대회를 연다고 가정해봅니다. 이 때 각각의 학생들의 조를 나누어야한다면 chunk()를 사용할 수 있겠습니다. 다로 코드를 작성해보도록 하겠습니다.


@ 21명인 학급에서 5명씩 조를 나누는 예제 만들기
먼저 코드를 작성해봅니다. 학급 인원인 21이므로 숫자 1부터 21까지의 값을 가지는 배열을 먼저 하나 만들고 이를 members에 선언합니다.
const members = new Array(21).fill().map((i, index) => index + 1)
(n개의 값을 가지는 배열을 만드는 방법은 꽤 여러가지가 있습니다. 위 방은 그 중 하나의 방법입니다.)

이제 members 배열에 _.chunk()를 사용하여 n 크기의 값을 가지는 여러 개의 배열로 만들어보겠습니다. 각각의 배열이 각 조를 의미한다고 보면 되겠습니다.
const fiveMembers = _.chunk(members, 5)
위 코드를 실행하면 아래와 같이 나타나게 됩니다.
console.log(fiveMembers )

// 출력결과
[
  [1, 2, 3, 4, 5],
  [6, 7, 8, 9, 10],
  [11, 12, 13, 14, 15],
  [16, 17, 18, 19, 20],
  [21]
]

결과를 확인해보면 21개의 값을 가지는 배열이 각각 5개씩 묶여 2차원 배열의 형태를 가지게 되었습니다!

위의 전체 코드는 아래와 같게됩니다.
const members = new Array(21).fill().map((i, index) => index + 1)
const fiveMembers = _.chunk(members, 5)

console.log(fiveMembers )


! 마치면서
여기까지 _.chunk() 메소드에 대하여 알아봤습니다. 쉽게 생각하면 _.chunk()는 배열의 값을 2차원 배열로 변환할 수 있습니다. 이를 통해 무엇을 할 수 있을까요? 그 전에 객체를 2차원 배열로 변환할 수 있죠? Object.entries()를 사용하면 쉽게 가능합니다. 객체에서 배열로 바뀐 값은 Object.fromEntries()를 사용해 다시 객체로 변환할 수 있습니다. 결국 2차원 배열을 사용하여 객체로 변환할 수도 있다는 것을 의미합니다. 이처럼 배열과 객체의 형변환을 통해 데이터를 좀 더 쉽게 바꾸거나 조작하는 것이 가능합니다. 때때로 컬렉션 값 중에서 특정 데이터만 추출하거나 값을 가져와야하는 경우 이를 활용하면 매우 편리합니다.

Author ByEnSSo

이전 글 보기

Post thumbnail lodash delay 시간 지연 메소드 정보

다음 글 보기

[lodash] compact 메소드 알아보기 Post thumbnail