Kyle Shevlin

Software Engineer

Snippet

toArray()

edit
0 strokes bestowed

toArray is a helper function that takes a value, and always returns an array of that value. I think this snippet is best understood with types, so even though the category is JavaScript, I'm going to write it both in plain JavaScript and TypeScript in my code snippet.

// JavaScript
function toArray(value) {
  return Array.isArray(value) ? value : [value]
}

// TypeScript
function toArray<Value>(value: Value | Value[]): Value[] {
  return Array.isArray(value) ? value : [value]
}

This is primarily useful in two situations. First, when a function might return you a single value or an array of values. I would argue that the API should always return an array, but you don't always control that. With toArray you can normalize the result. A recent example I've run into is next/router returning string | string[] for params.

const router = useRouter()
let { id } = router.query // could be string | string[]
id = toArray(id) // guaranteed to be string[]

The second is when you want to provide the consumer of a function a shorthand for a single item. The first example that comes to mind is the XState library. In fact, the source code for it is where I learned this trick.

The XState API frequently has places where you can pass a string or an array of strings. When you pass in a single string, under the hood, the argument is passed to toArray so that the rest of the function can treat it like an array.

{
  // imagine we're in a statechart
  active: {
    on: {
      DEACTIVATE: {
        target: 'inactive',
        actions: 'someSideEffect', // same as ['someSideEffect']
      }
    }
  }
}

I should write a full blog post on this someday, but the benefit of normalizing a value to an array is not needing to bifurcate your logic on whether you're operating over one item or many. Wrap it in an array and map, filter and loop your way to your necessary result regardless of how many items are being operated on.


Finished reading?

Here are a few options for what to do next.

Like
Liked the post? Click the beard up to 50 times to show it
Share
Sharing this post on Twitter & elsewhere is a great way to help me out
Support
Was this post valuable to you? Make a donation to show it
Make a Donation
Kofi logo

Kyle Shevlin's face, which is mostly a beard with eyes
Kyle Shevlin is a software engineer who specializes in JavaScript, React and front end web development.

Let's talk some more about JavaScript, React, and software engineering.

I write a newsletter to share my thoughts and the projects I'm working on. I would love for you to join the conversation. You can unsubscribe at any time.

Data Structures and Algorithms Logo
Data Structures and Algorithms

Check out my courses!

Liked the post? You might like my courses, too. Click the button to view this course or go to Courses for more information.
I would like give thanks to those who have contributed fixes and updates to this blog. If you see something that needs some love, you can join them. This blog is open sourced at https://github.com/kyleshevlin/blog
alexloudenjacobwsmithbryndymentJacobMGEvanseclectic-codingjhsukgcreativeerikvorhesHaroenvmarktnoonandependabotmarcuslyonsbrentmclarkfederico-fiorinimedayzDoNormal
©2021 Kyle Shevlin. All Rights Reserved.