This content originally appeared on DEV Community and was authored by Abhiraj Bhowmick
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!
Abhiraj Bhowmick@rainboestrykr
5 Javascript snippets for you to write better code 🔥🔥🔥 (Part 1)
A thread🧵👇
#webdevelopment #webdev #javascript #techtwitter #devcommunity07:45 AM - 04 Nov 2021
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
This content originally appeared on DEV Community and was authored by Abhiraj Bhowmick
Abhiraj Bhowmick | Sciencx (2021-12-08T09:29:04+00:00) Javascript snippets you need to know right now 🔥 – #5. Retrieved from https://www.scien.cx/2021/12/08/javascript-snippets-you-need-to-know-right-now-%f0%9f%94%a5-5/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.