Merge multiple arrays together if not null

Question

I am building a React App and am using Async Actions to make request to outside API's and bring in data into my app. I have 4 arrays that I need to merge together. Since I am using Async Actions the default values if theres no data is null. I want to check to see if the array is not null and if it has a value then merge it with the others into a single array. Once I have all the data into a single array I am going to use the includes method to see if any of the values are present in the array. Using the spread operator I don't think is going to work here as it will fail as null is not an iterable. Is there a way to do this with reduce to check through each of the 4 separate arrays make sure the value is not null and then combine them together into one array.

Answer 1

Your question leads you to the answer. :)

Essentially you are asking how to filter all non-array inputs and then combine (or concatenate) them together into a new array.

A couple of notes on the following approach:

• For better stability in filtering, rather than using a blacklist (not null), use a whitelist (Array.isArray) to ensure only arrays are combined.
• The spread operator can be used to then create an arguments list for a new array's concat method.

const arr1 = [1,2];
const arr2 = null;
const arr3 = [3,4];
const arr4 = [5];

const concat = (...arrays) => [].concat(...arrays.filter(Array.isArray));

console.log(concat(arr1, arr2, arr3, arr4));

For a bit of fun, if the combined array needs to be unique values (assuming simple types for values) then including a quick cast to a Set and back to an Array can make that happen:

const arr1 = [1,2];
const arr2 = null;
const arr3 = [3,4];
const arr4 = [4,5];

const concat = (...arrays) =>[].concat(...arrays.filter(Array.isArray));

const unique = (array) => [...new Set(array)];

const concated = concat(arr1, arr2, arr3, arr4);
const uniqued = unique(concated);

console.log({concated, uniqued});

Answer 2

Here is a one line solution (ES6).

At the first part, we merge all arrays, and then filter array elements - we include only "not null" values and exclude duplicates:

const arr1 = [1, null, 6, 'q'],
      arr2 = null,
      arr3 = [1, 1, null, 1],
      arr4 = ['e', 'q', 6, 1, null];

const final = []
  .concat(arr1, arr2, arr3, arr4)
  .filter((item, i, arr) => item && arr.indexOf(item) === i);

console.log(final); // Expected output: [1, 6, "q", "e"]