Javascript snippets you need to know right now 🔥 - #4
Tags: javascript, webdev, beginners, programming
Published: 2021-12-01 05:42:40

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](https://twitter.com/rainboestrykr) 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.
```js
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); // []
```
2️⃣ dropRight
This snippet returns a new array with n elements removed from the right.
```js
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); // []
```
3️⃣ dropRightWhile
This snippet removes elements from the right side of an array until the passed function returns true.
```js
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]
```
4️⃣ dropWhile
This snippet removes elements from an array until the passed function returns true.
```js
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]
```
5️⃣ elementContains
This snippet checks whether the parent element contains the child.
```js
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
```
6️⃣ Filter Duplicate Elements
This snippet removes duplicate values in an array.
```js
const filterNonUnique = arr => arr.filter(i => arr.indexOf(i) === arr.lastIndexOf(i));

filterNonUnique([1, 2, 2, 3, 4, 4, 5]); // [1, 3, 5]
```
7️⃣ findKey
This snippet returns the first key that satisfies a given function.
```js
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'
```
8️⃣ findLast
This snippet returns the last element for which a given function returns a truthy value.
```js
const findLast = (arr, fn) => arr.filter(fn).pop();

findLast([1, 2, 3, 4], n => n % 2 === 1); // 3
```
9️⃣ insertAfter
This snippet can be used to insert an HTML string after the end of a particular element.
```js
const insertAfter = (el, htmlString) => el.insertAdjacentHTML('afterend', htmlString);

insertAfter(document.getElementById('myId'), '<p>after</p>'); // <div id="myId">...</div> <p>after</p>
```
🔟 insertBefore
This snippet can be used to insert an HTML string before a particular element.
```js
const insertBefore = (el, htmlString) => el.insertAdjacentHTML('beforebegin', htmlString);

insertBefore(document.getElementById('myId'), '<p>before</p>'); // <p>before</p> <div id="myId">...</div>
```

***

## Thank you for reading!

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

[Abhiraj's Dev-letter](https://www.getrevue.co/profile/abhiraj)

Until next time,
[Abhiraj](https://abhiraj.glitch.me)