twitch
Streaming on Twitch twice a week

Splitting arrays into chunks

JavaScript

With a combination of Array.prototype.map() and Array.prototpe.slice(), we can split an array into many smaller arrays. This is useful for pagination or injecting something into an array every set number of elements. There’s an explanation of how this works on my blog: How to split arrays into equal-sized chunks

// `array` is the array we want to split, `chunkSize` is how big we want
// each group to be
const chunkArray = (array, chunkSize) => {
  // find how many chunks we need if each holds `chunkSize` elements
  const numberOfChunks = Math.ceil(array.length / chunkSize)

  // create an array with one slot for each chunk we need
  const chunks = [...Array(numberOfChunks)]
    // walk through each of the empty slots
    .map((value, index) => {
      // put a slice of the original `array` in the empty slot
      return array.slice(index * chunkSize, (index + 1) * chunkSize)
    })

  return chunks
}

console.log(chunkArray([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 5))
// ⇒ [
//     [1, 2, 3, 4, 5],
//     [6, 7, 8, 9, 10]
//   ]

console.log(chunkArray([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 4))
// ⇒ [
//     [1, 2, 3, 4],
//     [5, 6, 7, 8],
//     [9, 10]
//   ]

More fire tips

Replacing all matches in a string

The String prototype’s replace function only replaces the first occurrence of a substring by default. We can extend that with a global flag on the expression.

JavaScriptregular expressions
Read fire tip

Namespacing styled-components

To improve the readability of React components, we can import the styled-components they use from another file under a ui-namespace.

JavaScriptstyled-componentsreadability
Read fire tip

Read all fire tips →