Have a Handy JS Snippet You Want to Share?

Nick Taylor - Jan 23 '18 - - Dev Community

So it's pretty simple. I'm looking for one or two lines of JavaScript that do something useful.

I'll get the ball rolling and start with some examples:

  • Shallow array clone via Array spread.
const originalArray = [1, 2, 3];
const shallowArrayClone = [...originalArray];

Enter fullscreen mode Exit fullscreen mode
  • Shallow array clone via Array.protoype.slice.
const originalArray = [1, 2, 3];
const shallowArrayClone = originalArray.slice();

Enter fullscreen mode Exit fullscreen mode

  • Shallow clone of an object via object spread.
const originalObject = { a:1, b: 2, c: 3 };
const shallowObjectClone = {...originalObject};

Enter fullscreen mode Exit fullscreen mode
  • Shallow clone of an object via object spread with one property overridden.
const originalObject = { a:1, b: 2, c: 3 };
const shallowObjectClone = {...originalObject, c: 45 };

Enter fullscreen mode Exit fullscreen mode
  • Get unique values of an array using Set
const arrayWithDuplicateValues = [1, 2, 3, 3, 1, 5];
const uniqueArray = Array.from(new Set(arrayWithDuplicateValues);
Enter fullscreen mode Exit fullscreen mode

or

const arrayWithDuplicateValues = [1, 2, 3, 3, 1, 5];
const uniqueArray = [...new Set(arrayWithDuplicateValues)];
Enter fullscreen mode Exit fullscreen mode
  • See if two arrays have the same values (unordered and for primitive values).
const a = [1, 2, 3];
const b = [2, 3, 4];

const uniques = new Set(a.concat(b));
const haveSameValues = uniques.length === a.length // or uniques.length === b.length;
Enter fullscreen mode Exit fullscreen mode
  • Flatten an array with the ES spread operator and Array.prototype.concat. Great tip care of Jonathan Z. White.


const arrayToFlatten = [ [1,2,3], [4,5,6], [7,8,9] ];
const flattenedArray = [].concat(...arrayToFlatten);
Enter fullscreen mode Exit fullscreen mode

2020 Update for the above is

[ [1,2,3], [4,5,6], [7,8,9] ].flatMap(x=>x)
Enter fullscreen mode Exit fullscreen mode

And go!

Cover image care of Flickr user Wayne Grivell.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .