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

#javascript #webdev #programming #beginners

Hello and how are you doing?
Hope you guys are doing great. As you know, I started a series of 50 beneficial and useful JS snippets where I would give you 10 every week. After the beautiful response on the previous posts of this series with 3k+ views, I thank you all for supporting me along this way.
This started with a tweet of mine, so if you aren't following me on twitter, please do so!

Let's get started

1️⃣ flatten
This snippet flattens an array up to a specified depth using recursion.

const flatten = (arr, depth = 1) =>
  arr.reduce((a, v) => a.concat(depth > 1 && Array.isArray(v) ? flatten(v, depth - 1) : v), []);

flatten([1, [2], 3, 4]); // [1, 2, 3, 4]
flatten([1, [2, [3, [4, 5], 6], 7], 8], 2); // [1, 2, 3, [4, 5], 6, 7, 8]

2️⃣ forEachRight
This snippet executes a function for each element of an array starting from the array’s last element.

const forEachRight = (arr, callback) =>
  arr
    .slice(0)
    .reverse()
    .forEach(callback);

forEachRight([1, 2, 3, 4], val => console.log(val)); // '4', '3', '2', '1'

3️⃣ forOwn
This snippet iterates on each property of an object and iterates a callback for each one respectively.

const forOwn = (obj, fn) => Object.keys(obj).forEach(key => fn(obj[key], key, obj));
forOwn({ foo: 'bar', a: 1 }, v => console.log(v)); // 'bar', 1

4️⃣ Get Time From Date
This snippet can be used to get the time from a Dateobject as a string.

const getColonTimeFromDate = date => date.toTimeString().slice(0, 8);

getColonTimeFromDate(new Date()); // "08:38:00"

5️⃣ Get Days Between Dates
This snippet can be used to find the difference in days between two dates.

const getDaysDiffBetweenDates = (dateInitial, dateFinal) =>
  (dateFinal - dateInitial) / (1000 * 3600 * 24);

getDaysDiffBetweenDates(new Date('2019-01-13'), new Date('2019-01-15')); // 2

6️⃣ getStyle
This snippet can be used to get the value of a CSS rule for a particular element.

const getStyle = (el, ruleName) => getComputedStyle(el)[ruleName];

getStyle(document.querySelector('p'), 'font-size'); // '16px'

7️⃣ getType
This snippet can be used to get the type of a value.

const getType = v =>
  v === undefined ? 'undefined' : v === null ? 'null' : v.constructor.name.toLowerCase();

getType(new Set([1, 2, 3])); // 'set'

8️⃣ hasClass
This snippet checks whether an element has a particular class.

const hasClass = (el, className) => el.classList.contains(className);
hasClass(document.querySelector('p.special'), 'special'); // true

9️⃣ head
This snippet returns the head of a list.

const head = arr => arr[0];

head([1, 2, 3]); // 1

🔟 hide
This snippet can be used to hide all elements specified.

const hide = (...el) => [...el].forEach(e => (e.style.display = 'none'));

hide(document.querySelectorAll('img')); // Hides all <img> elements on the page

Thank you for reading!

Do follow me on Twitter, I'll be creating awesome tech content over there soon.
Subscribe to my newsletter to never miss out on tech news, product launches and my top blogposts.

Subscribe here

'Til next time
Abhiraj