How to handle a variable that might be an array or not in javascript inline?

Question

I need to pass an argument, that is either an array of one type or the type on its own, to a function that requires the only argument be an array:

// myFunction throws an error if the first argument is not an array
const foo = typeOrArrayOfType => myFunction([...typeOrArrayOfType, oneDefault]);

However if I do this:

const anArray = ['oneItem', 'twoItem'];
const notAnArray = 'oneItem';
const nonIterator = 300;
const oneDefault = 20;

const foo = typeOrArrayOfType => console.log([...typeOrArrayOfType, oneDefault]);

foo(anArray) // prints array items
foo(notAnArray) // spreads the string
foo(nonIterator) // error

It either works, spreads the string into characters or breaks entirely.

How can I flexibly take arguments that may or may not be an array?

I know about Array.isArray but I don't want helper function or conditionals if possible. I don't care about nested arrays, but if they behave differently it would be worth a note about it.

Answer 1

Create an array only if necessary

Declare a simple helper that wraps non-array values in an array or leaves the original intact:

const toArray = data =>
  Array.isArray(data)
    ? data
    : [data];

Example:

const anArray = ['oneItem', 'twoItem'];
const notAnArray = 'oneItem';
const nonIterator = 300;
const oneDefault = 20;

const toArray = data =>
  Array.isArray(data)
    ? data
    : [data];

const foo = typeOrArrayOfType => console.log([...toArray(typeOrArrayOfType), oneDefault]);

foo(anArray) // works
foo(notAnArray) // works
foo(nonIterator) // works

Convert everything to new arrays

The above has a slight weakness - it returns the original array in some cases. Which means that mutations might affect it:

const toArray = data =>
  Array.isArray(data)
    ? data
    : [data];

function test(input) {
  const arrOutput = toArray(input);
  arrOutput.push("world");
  
  return arrOutput;
}

const arrInput = ["hello"];

const output = test(arrInput);
console.log(output);   // [ "hello", "world" ]
console.log(arrInput); // [ "hello", "world" ]

To handle this, you could copy every array uniformly using Array#concat() - if given an array, it will produce a new array with a copy of its contents (only one level), if given non-array it will create a new array with the argument(s) as item(s):

const toArray = data =>
  [].concat(data);

Example:

const anArray = ['oneItem', 'twoItem'];
const notAnArray = 'oneItem';
const nonIterator = 300;
const oneDefault = 20;

const toArray = data =>
  [].concat(data);

const foo = typeOrArrayOfType => console.log([...toArray(typeOrArrayOfType), oneDefault]);

foo(anArray) // works
foo(notAnArray) // works
foo(nonIterator) // works

Example which does not have a problem with shared arrays:

const toArray = data =>
  [].concat(data);

function test(input) {
  const arrOutput = toArray(input);
  arrOutput.push("world");
  
  return arrOutput;
}

const arrInput = ["hello"];

const output = test(arrInput);
console.log(output);   // [ "hello", "world" ]
console.log(arrInput); // [ "hello" ]

---

This might be even simpler to use, since it removes the need to spread items. The .concat() method already creates a new array and accepts variable number of arguments, it can be used directly as a way to create a new array with extra items:

const anArray = ['oneItem', 'twoItem'];
const notAnArray = 'oneItem';
const nonIterator = 300;
const oneDefault = 20;

const foo = typeOrArrayOfType => console.log([].concat(typeOrArrayOfType, oneDefault));

foo(anArray) // works
foo(notAnArray) // works
foo(nonIterator) // works

---

Note: the @@isConcatSpreadable well-known symbol property can affect how Array#concat() works. When set to true then concatinating the object will be "flatten" similar to how arrays are. This will work on any array-like. Conversely setting the property to false will prevent .concat() from spreading the object:

//make an object string
const str = new String('bar');
//make it spreadable
str[Symbol.isConcatSpreadable] = true;

console.log([].concat(str));


//a spreadable array-like:
const arrayLike = { 
  0: "h", 1: "e", 2: "l", 3: "l", 4: "o", 
  length: 5,
  [Symbol.isConcatSpreadable]: true
};

console.log([].concat(arrayLike));

//non-spredable array:
const arr = ["x", "y", "z"];
arr[Symbol.isConcatSpreadable] = false;

console.log([].concat(arr));

.as-console-wrapper { max-height: 100% !important };

Answer 2

You should handle the variable by testing if it's an array with Array.isArray():

e.g.

const anArray = ['oneItem', 'twoItem'];
const notAnArray = 'oneItem';
const nonIterator = 300;
const oneDefault = 20;

const foo = typeOrArrayOfType =>
  console.log(Array.isArray(typeOrArrayOfType)
  ? [...typeOrArrayOfType, oneDefault]
  : [typeOrArrayOfType, oneDefault]);

foo(anArray) // prints array items
foo(notAnArray) // spreads the string
foo(nonIterator) // error

It would take very little effort to factorise the check into a utility function, which other answers do.

Answer 3

You can wrap it in an array and then use .flat() before spreading*

I've not seen this anywhere else on Stack Overflow.

This means that you always end up spreading an array:

const anArray = ['oneItem', 'twoItem'];
const notAnArray = 'oneItem';
const nonIterator = 300;
const nestedArray = ['lets', ['go', 'nest', ['arrays']]];
const anIterator = new Set([1,3,5,3]);
const oneDefault = 20;

const foo = typeOrArrayOfType => console.log([...[typeOrArrayOfType].flat(), oneDefault]);

foo(anArray) // nested array items is flattened one level
foo(notAnArray) // wrapped string doesn't get flattened
foo(nonIterator) // wrapped number doesn't get flattened
foo(nestedArray) // only flattens one level, added to show how .flat(works)
foo(anIterator)  // this does not work, and results in {}

N.B. Using .flat() only goes down one level by default (unlike, say lodash.flattenDeep or some other libraries). You could optionally supply a number, but that is out of the scope of the question.

const foo = (typeOrArrayOfType, depth=1) => console.log([...[typeOrArrayOfType].flat(depth), oneDefault]);

And not useful for the situation in the question.

---

* As an aside, some of the other answers use [].concat(variable) which to me is as clear or slightly less clear, but is somewhat more performant, as per this jsbenchmark without spreading or with spreading.