Hello Folks ๐
This is Savio here. I'm young dev with an intention to enhance as a successful web developer. I love building web apps with React. I have proved my superiority in frontend technologies.
Today, I'd like to share 20 Killer JavaScript one liners to make your life easier. Let's goooo ๐
Get Value of a brower Cookie
Retrieve the value of a cookie by accessing with document.cookie
const cookie = name => `; ${document.cookie}`.split(`; ${name}=`).pop().split(';').shift();
cookie('_ga');
// Result: "GA1.2.1929736587.1601974046"
Convert RGB to Hex
const rgbToHex = (r, g, b) =>
"#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
rgbToHex(0, 51, 255);
// Result: #0033ff
Copy to Clipboard
Easily copy any text to clipboard using navigator.clipboard.writeText
.
const copyToClipboard = (text) => navigator.clipboard.writeText(text);
copyToClipboard("Hello World");
Check if Date is Valid
Use the following snippet to check if a given date is valid or not.
const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());
isDateValid("December 17, 1995 03:24:00");
// Result: true
Find the day of year
Find which is the day by a given date.
const dayOfYear = (date) =>
Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);
dayOfYear(new Date());
// Result: 272
Capitalise a String
Javascript doesn't have an inbuilt capitalise function, so we can use the following code for the purpose.
const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)
capitalize("follow for more")
// Result: Follow for more
Find the number of days between two days
Find the days between 2 given days using the following snippet.
const dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000)
dayDif(new Date("2020-10-21"), new Date("2021-10-22"))
// Result: 366
Clear All Cookies
You can easily clear all cookies stored in a web page by accessing the cookie using document.cookie
and clearing it.
const clearCookies = document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`));
Generate Random Hex
You can generate random hex colors with Math.random
and padEnd
properties.
const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`;
console.log(randomHex());
// Result: #92b008
Remove Duplicated from Array
You can easily remove duplicates with Set
in JavaScript. Its a life saver.
const removeDuplicates = (arr) => [...new Set(arr)];
console.log(removeDuplicates([1, 2, 3, 3, 4, 4, 5, 5, 6]));
// Result: [ 1, 2, 3, 4, 5, 6 ]
Get Query Params from URL
You can easily retrieve query params from a url either by passing window.location
or the raw URL goole.com?search=easy&page=3
const getParameters = (URL) => {
URL = JSON.parse('{"' + decodeURI(URL.split("?")[1]).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') +'"}');
return JSON.stringify(URL);
};
getParameters(window.location)
// Result: { search : "easy", page : 3 }
Log Time from Date
We can log time, in the format hour::minutes::seconds
from a given date.
const timeFromDate = date => date.toTimeString().slice(0, 8);
console.log(timeFromDate(new Date(2021, 0, 10, 17, 30, 0)));
// Result: "17:30:00"
Check if a number is even or odd
const isEven = num => num % 2 === 0;
console.log(isEven(2));
// Result: True
Find Average of Numbers
Find the average between multiple numbers using reduce
method.
const average = (...args) => args.reduce((a, b) => a + b) / args.length;
average(1, 2, 3, 4);
// Result: 2.5
Scroll to Top
You can use window.scrollTo(0, 0)
method to automatic scroll to top. Set both x
and y
as 0.
const goToTop = () => window.scrollTo(0, 0);
goToTop();
Reverse a string
You can easily reverse a string using split
, reverse
and join
methods.
const reverse = str => str.split('').reverse().join('');
reverse('hello world');
// Result: 'dlrow olleh'
Check if array is empty
Simple one liner to check if an array is empty, will return true
or false
.
const isNotEmpty = arr => Array.isArray(arr) && arr.length > 0;
isNotEmpty([1, 2, 3]);
// Result: true
Get Selected Text
Get the text the user has select using inbuilt getSelection
property.
const getSelectedText = () => window.getSelection().toString();
getSelectedText();
Shuffle an Array
Shuffling an array is super easy with sort
and random
methods.
const shuffleArray = (arr) => arr.sort(() => 0.5 - Math.random());
console.log(shuffleArray([1, 2, 3, 4]));
// Result: [ 1, 4, 3, 2 ]
Detect Dark Mode
Check if a user's device is in dark mode with the following code.
const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
console.log(isDarkMode) // Result: True or False
Do you want to test your project?
Try LambdaTest, test your browers in 3000+ browers like that with an image of your website
๐ Wrapping Up
Yeah, that's a wrap. Hope you enjoyed the article. Do not hesitate to share your feedback. I am on Twitter @saviomartin7. Give a follow!
Follow me on Github @saviomartin, Don't miss my amazing projects! ๐ฏ
Feedbacks are greatly appreciated! ๐ Have an amazing day!
Latest comments (43)
Check if an array is not empty?
let arr = [];
arr?.some(x => x)
I'd do padStart instead of padEnd bacause of the obvious reasons.
const randomHex = () =>
#${Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, "0")}
;Nice content, Savio Martin, thanks for sharing it with us!
Nice one! I wrote a similar article not long ago. Please check my take on the subject here
I like this one:
await new Promise(r => setTimeout(r, 2000))
Shorter:
great
Thanks for sharing. Well done.
Nah, these are not killer one-liners, just a beginner level. Besides that, writing something in 1 line doesn't mean good. It can sometimes harm readability, for example the first snippet is just a good example of how NOT to write your code.
And some of the examples are pretty useless. Why would you create a function for
window.scrollTo(0, 0)
? It's short enough on its own to use it directly.In fact you just stolen all these snippets either from 30secondsofcode.org/ or from StackOverflow (I checked) and you have audacity to call yourself "superior". If you are really "an enthusiastic frontend developer" as you call yourself, than go and learn instead of posting useless articles.
He's 14 though, give him a break.
hahah seriously?
go do a background research on him, 14 and oversmart and fooling on internet.
That's great. Just one correction: "capitalise"ยน is applied to each word in a string. In your example, it should be "upper case first" or something like that.
Best regards.
ยน developer.apple.com/documentation/...
Since line breaks are optional in JavaScript, any code can be one line if you want to. ๐คฃ
Ok, jokes aside, I understand one liner functions have appeal with developers, since Functional Programming is receiving full love nowadays.
So if anyone here needs to convert browser's rgb string to hex: stackoverflow.com/a/3627747/424498. This way you can directly send the result of a
getComputedStyle(someElement).backgroundColor
call to the one line function and receive the hex string as result.Good post. Just wanted to comment that making a set removes duplicates but also converts the array into a set. It stops being an array.
It's not a set because he's spreading it inside an array, so it becomes an array again.
Removing duplicates example will not work for deep objects.
Array shuffling this way won't be statistically random, it's biased due to how
sort
works with non-deterministic compare function. I propose changing the snippet to the similar...which assigns a random "position" to each element, compares by those, then discards them.
There are even better ways (
O(n)
).For more on this, see stackoverflow.com/q/2450954/8376184
This has come up before!
Nice post. Be aware that shuffling an Array like this is not perfectly random and a proper implementation is a little more complicated: medium.com/@nitinpatel_20236/how-t...
Some comments may only be visible to logged-in visitors. Sign in to view all comments.