DEV Community

Cover image for 10 JavaScript Array Utils
Mahmoud Elmahdi
Mahmoud Elmahdi

Posted on

10 JavaScript Array Utils

#javascript #utilities

10 utility functions with no dependencies, to borrow and use for both Node.js and Browser applications to work with Array. Each function has a snippet block and executable demo with a unit tests.

chunk

Split an array into chunks. If array can't be split equally based on the given size, the last chunk will be the remaining elements.

/*
 * chunk
 * @param {Array} array - List of elements
 * @param {Number} size - Length of each chunk to group
 * @return {Array} Returns list of grouped chunks
 */
function chunk(array, size = 1) {
  return [array.slice(0, size)].concat(chunk(array.slice(size), size));
}
Enter fullscreen mode Exit fullscreen mode

Demo

const chai = require("chai"); const assert = chai.assert; const isArrayWithLength = (array) => Boolean(Array.isArray(array) && array.length); function chunk(array, size = 1) { return isArrayWithLength(array) ? [array.slice(0, size)].concat(chunk(array.slice(size), size)) : []; } const actual = chunk(['one', 'two', 'three', 'four', 'five'], 2); const expected = [['one', 'two'], ['three', 'four'], ['five']]; assert.deepEqual(actual, expected); assert.lengthOf(actual, 3); const emptyList = []; assert.deepEqual(chunk([], 2), emptyList); assert.deepEqual(chunk({}, 2), emptyList); assert.deepEqual(chunk(null, 2), emptyList);

compact

Compact is a falsy bouncer that returns a new copy with
all falsey values: false, null, 0, "", undefined, and NaN removed.

/*
 * compact
 * @param {Array} array - A list of elements to compact
 * @return {Array} Returns a filtered values 
 */
function compact(array) {
  return array.filter(Boolean);
}
Enter fullscreen mode Exit fullscreen mode

Demo

const chai = require("chai"); const assert = chai.assert; const isArrayWithLength = (array) => Boolean(Array.isArray(array) && array.length); function compact(array) { return isArrayWithLength(array) ? array.filter(Boolean) : []; } const actual = compact([15, 06, false, 8, '', 7, 'em', undefined]); const expected = [15, 06, 8, 7, 'em']; assert.deepEqual(actual, expected); assert.lengthOf(actual, 5);

merge

Merges any additional values (args) to the first given input/array.

/*
 * merge
 * @param {Array} array - Main list to link to
 * @param {...*} args - The values to chain
 * @return {Array} Returns a series or chainable values
 */
function merge(array, ...args) {
  return [...array, ...args.flat()] :;
}
Enter fullscreen mode Exit fullscreen mode

Demo

⚠️ please select a higher Node version (10+) before you execute the code below

const chai = require("chai"); const assert = chai.assert; const isArrayWithLength = (array) => Boolean(Array.isArray(array) && array.length); function merge(array, ...args) { return isArrayWithLength(array) ? [...array, ...args.flat()] : []; } const one = ['one']; const actual = merge(one, 'two', ['three'], [['four']]); const expected = ['one', 'two', 'three', ['four']]; assert.deepEqual(actual, expected); assert.lengthOf(actual, 4);

last

Get the last element from array.

/*
 * last
 * @param {Array} array
 * @return {String} Returns last element in array
 */
function last(array) {
  return array[array.length - 1];
}
Enter fullscreen mode Exit fullscreen mode

Demo

const chai = require("chai"); const assert = chai.assert; const isArrayWithLength = (array) => Boolean(Array.isArray(array) && array.length); function last(array) { return isArrayWithLength(array) ? array[array.length - 1] : []; } const actual = last(['one', 'two', 'three', 'four']); const expected = 'four'; assert.deepEqual(actual, expected); assert.isString(expected);

uniq

Creates a duplicate-free version from the given input-array

/*
 * uniq
 * @param {Array} array - List of elements
 * @param {Boolean} [sort=false] - optional flag to sort
 * @return {Array} Returns uniq values list
 */
function uniq(array, sort = false) {
  return sort ? [...new Set(array)].sort() : [...new Set(array)];
}
Enter fullscreen mode Exit fullscreen mode

Demo

const chai = require("chai"); const assert = chai.assert; const isArrayWithLength = (array) => Boolean(Array.isArray(array) && array.length); function uniq(array, sort = false) { return isArrayWithLength(array) ? (sort ? [...new Set(array)].sort() : [...new Set(array)]) : []; } const duplicatedValues = ['b', 'a', 'c', 'd', 'a', 'c', 'b']; const actual = uniq(duplicatedValues); const expected = ['b', 'a', 'c', 'd']; const expectedOrder = ['a', 'b', 'c', 'd']; assert.deepEqual(actual, expected); assert.lengthOf(expected, 4); assert.deepEqual(uniq(duplicatedValues, true), expectedOrder);

range

Creates a set of values (keys() method - keys for each index in the array) with a beginning (0) and an end (size param)

/*
 * range
 * @param {Number} size
 * @return {Array} Returns a list of generated keys
 */
function range(size) {
  return [...Array(size).keys()];
}
Enter fullscreen mode Exit fullscreen mode

Demo

const chai = require("chai"); const assert = chai.assert; function range(size) { return size ? [...Array(size).keys()] : []; } const actual = range(11); const expected = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; assert.deepEqual(actual, expected); assert.lengthOf(expected, 11);

intersection

Finds all values that are the intersection/included in all the given arrays/args and creates a list from the result.

/*
 * intersection
 * @param {...*} args - List of arrays
 * @return {Array} Returns a list of unique values
 */
function intersection(...args) {
  const [ first, ...rest ] = args;
  return first.filter(item => rest.flat().includes(item));
}
Enter fullscreen mode Exit fullscreen mode

Demo

⚠️ please select a higher Node version (10+) before you execute the code below

const chai = require("chai"); const assert = chai.assert; function intersection(...args) { const [ first, ...rest ] = args; return first.filter(item => rest.flat().includes(item)) } const actual = intersection(['a', 'b', 'c'], ['b', 'c'], ['b', 'c', 'd', 'e']); const expected = ['b', 'c']; assert.deepEqual(actual, expected); assert.lengthOf(expected, 2); assert.include(expected, 'b'); assert.include(expected, 'c');

diff

Creates a list of values from array that are not present in other arrays/args. Result are determined by the first input

/*
 * diff
 * @param {...*} args - List of arrays
 * @return {Array} Returns result of excluded values
 */
function diff(...args) {
  const [ first, ...rest ] = args;
  return first.filter(item => !rest.flat().includes(item));
}
Enter fullscreen mode Exit fullscreen mode

Demo

⚠️ please select a higher Node version (10+) before you execute the code below

const chai = require("chai"); const assert = chai.assert; function diff(...args) { const [ first, ...rest ] = args; return first.filter(item => !rest.flat().includes(item)); } const actual = diff(['a', 'b', 'c'], ['b', 'c'], ['b', 'c', 'd', 'e']); const expected = ['a']; assert.deepEqual(actual, expected); assert.lengthOf(expected, 1); assert.include(expected, 'a');

allBut

Excludes specified values from the given array

/*
 * allBut
 * @param {Array} list - Array of elements
 * @param {...*} args - Values to exclude
 * @return {Array} Returns filtered list
 */
function allBut(list, ...args) {
  return list.filter((value) => !args.includes(value));
}
Enter fullscreen mode Exit fullscreen mode

Demo

const chai = require("chai"); const assert = chai.assert; function allBut(list, ...args) { return list.filter((value) => !args.includes(value)); } const actual = allBut(['first', 'second', 'third', 'fourth', 'fifth'], 'fourth'); const expected = ['first', 'second', 'third', 'fifth']; assert.deepEqual(actual, expected); assert.lengthOf(expected, 4); assert.notInclude(expected, 'fourth');

allButFirst

Creates a copy without the first element in array by destructuring all elements except the first one. If the given list has only one item it returns an empty array []

/*
 * allButFirst
 * @param {Array} array - List of elements
 * @return {Array} Returns filtered list
 */
function allButFirst([, ...rest]) {
  return rest;
}
Enter fullscreen mode Exit fullscreen mode

Demo

const chai = require("chai"); const assert = chai.assert; const isArrayWithLength = (array) => Boolean(Array.isArray(array) && array.length); function allButFirst(list) { if (isArrayWithLength(list)) { const [, ...rest] = list; return rest; } return []; } const actual = allButFirst(['first', 'second', 'third', 'fourth', 'fifth']); const expected = ['second', 'third', 'fourth', 'fifth']; assert.deepEqual(actual, expected); assert.lengthOf(expected, 4); assert.notInclude(expected, 'first');

Some of these functions are inspired by popular libraries like underscore and lodash which I highly recommend to use for more complex operations and working with data types as well.

Top comments (0)

Read next

m1dnightdev profile image

Creating Theme Systems in React with SCSS and Redux

M1dnightGMR -

philip_zhang_854092d88473 profile image

Mastering Server-Sent Events (SSE) with Python and Go for Real-Time Data Streaming 🚀

Philip -

andrewelans profile image

Inject HTML snippet from file

Andrew Elans -

mike_andreuzza profile image

How to Create an interactive color-shifting hover card with Tailwind CSS and JavaScript

Michael Andreuzza -