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.
'Til next time
Abhiraj
Top comments (1)
Thanks for adding Luke!