DEV Community

Cover image for Javascript snippets you need to know right now 🔥 - #4
Abhiraj Bhowmick
Abhiraj Bhowmick

Posted on • Originally published at abhiraj.mdx.one

Javascript snippets you need to know right now 🔥 - #4

Hello my fellow readers!
If you have really come this far in this series of posts, I would like to thank you for your support in reading all of the posts in this series. Thank you and do follow me on Twitter for more tech content soon. Let's get started.


1️⃣ Drop Elements
This snippet returns a new array with n elements removed from the left.

const drop = (arr, n = 1) => arr.slice(n);

drop([1, 2, 3]); // [2,3]
drop([1, 2, 3], 2); // [3]
drop([1, 2, 3], 42); // []
Enter fullscreen mode Exit fullscreen mode

2️⃣ dropRight
This snippet returns a new array with n elements removed from the right.

const dropRight = (arr, n = 1) => arr.slice(0, -n);

dropRight([1, 2, 3]); // [1,2]
dropRight([1, 2, 3], 2); // [1]
dropRight([1, 2, 3], 42); // []
Enter fullscreen mode Exit fullscreen mode

3️⃣ dropRightWhile
This snippet removes elements from the right side of an array until the passed function returns true.

const dropRightWhile = (arr, func) => {
  while (arr.length > 0 && !func(arr[arr.length - 1])) arr = arr.slice(0, -1);
  return arr;
};

dropRightWhile([1, 2, 3, 4], n => n < 3); // [1, 2]
Enter fullscreen mode Exit fullscreen mode

4️⃣ dropWhile
This snippet removes elements from an array until the passed function returns true.

const dropWhile = (arr, func) => {
  while (arr.length > 0 && !func(arr[0])) arr = arr.slice(1);
  return arr;
};

dropWhile([1, 2, 3, 4], n => n >= 3); // [3,4]
Enter fullscreen mode Exit fullscreen mode

5️⃣ elementContains
This snippet checks whether the parent element contains the child.

const elementContains = (parent, child) => parent !== child && parent.contains(child);

elementContains(document.querySelector('head'), document.querySelector('title')); // true
elementContains(document.querySelector('body'), document.querySelector('body')); // false
Enter fullscreen mode Exit fullscreen mode

6️⃣ Filter Duplicate Elements
This snippet removes duplicate values in an array.

const filterNonUnique = arr => arr.filter(i => arr.indexOf(i) === arr.lastIndexOf(i));

filterNonUnique([1, 2, 2, 3, 4, 4, 5]); // [1, 3, 5]
Enter fullscreen mode Exit fullscreen mode

7️⃣ findKey
This snippet returns the first key that satisfies a given function.

const findKey = (obj, fn) => Object.keys(obj).find(key => fn(obj[key], key, obj));

findKey(
  {
    barney: { age: 36, active: true },
    fred: { age: 40, active: false },
    pebbles: { age: 1, active: true }
  },
  o => o['active']
); // 'barney'
Enter fullscreen mode Exit fullscreen mode

8️⃣ findLast
This snippet returns the last element for which a given function returns a truthy value.

const findLast = (arr, fn) => arr.filter(fn).pop();

findLast([1, 2, 3, 4], n => n % 2 === 1); // 3
Enter fullscreen mode Exit fullscreen mode

9️⃣ insertAfter
This snippet can be used to insert an HTML string after the end of a particular element.

const insertAfter = (el, htmlString) => el.insertAdjacentHTML('afterend', htmlString);

insertAfter(document.getElementById('myId'), '<p>after</p>'); // <div id="myId">...</div> <p>after</p>
Enter fullscreen mode Exit fullscreen mode

🔟 insertBefore
This snippet can be used to insert an HTML string before a particular element.

const insertBefore = (el, htmlString) => el.insertAdjacentHTML('beforebegin', htmlString);

insertBefore(document.getElementById('myId'), '<p>before</p>'); // <p>before</p> <div id="myId">...</div>
Enter fullscreen mode Exit fullscreen mode

Thank you for reading!

Subscribe to my newsletter to never miss out on Product Launches and my top posts.

Abhiraj's Dev-letter

Until next time,
Abhiraj

Top comments (2)

Collapse
 
rfieve profile image
rfieve • Edited

Thank you for your post.

Firstly, I think you could improve your filterNonUnique function performance by removing the unnecessary arr.indexOf(i) loop, as the index is already passed to your filter second parameter.

const filterNonUnique = arr => arr.filter(i => arr.indexOf(i) === arr.lastIndexOf(i));
// Could become:
const filterNonUnique = arr => arr.filter((i, index) => index === arr.lastIndexOf(i));
Enter fullscreen mode Exit fullscreen mode

For array deduplication, using a Set might be a most performant solution.
Consider the following function:

const deduplicate = (arr) => [... new Set(arr)];
Enter fullscreen mode Exit fullscreen mode

Here, computation speed only depends on array length, whereas your current filterNonUnique function also depends on the number of actual duplicates in the inputted array.
Consider a large array with only one duplicate at the start, arr.lastIndexOf(i) will go through arr.length - index elements at each filter iteration.

A quick test on JSBench shows the following results:

const someArray = new Array(10000).fill(null).map((_, i) => i);

const filterNonUnique = arr => arr.filter((i, index) => index === arr.lastIndexOf(i));
const deduplicate = arr => [...new Set(arr)];

const foo = filterNonUnique(someArray); // 6.63 ops/s => 99.68% slower
const bar = deduplicate(someArray); // 2077.79 ops/s => fastest
Enter fullscreen mode Exit fullscreen mode

And as your inputted array grows, further more does the filterNonUnique performance drops.

Have a nice day !

Collapse
 
abhirajb profile image
Abhiraj Bhowmick

Thank you so much for adding this!