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!
Top comments (43)
😊
But who has the need in the real world / real apps to reverse a string? Nobody.
Faster !== Correct ... his string reverse breaks with code points, while
[...str]
doesn't.Try it: OP reverse breaks the emoji with
reverse('some 💩');
while this reduce suggestion doesn't.P.S.
In a bid to be obnoxious 😏 you could have shortened your code further by 2 characters 🌚
I made no claim to it being faster, but in this case the
reduce
method is almost twice as fast - jsbench.me/3tkttupth4/1 - at least on Chrome. On Firefox though, the situation is reversed. Different JS engines, different optimisations I guessalternative reverse:
:D
Nice list!
Some things I want to mention
const
(orlet
) in the first code blockObject.fromEntries(new URLSearchParams(window.location.search))
For 2, I think converting to an object is pointless, nothing wrong with the URLSearchParams object (which is basically a Map)
But it's not an actual object (like
arguments
is not an actual array), so If you want to do some advanced object stuff you need to convert it to an object.What do you mean with "I have proved my superiority in frontend technologies.". Be humble, you're not superior than anyone.
He has proved that he can copy paste from StackOverflow :-)
but to distinguish the better code to copy is the hardest thing
Yes, especially when one post has 1k votes and another has -16?
I believe English is not his primary language(not mine either). I guess he means skill/competency.
Dont be hard on him he's just a kid (he's 14)
He's 14
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.
Once I used to use JS to capitalize, and everything else.
Feedback comments came in from Experts
Now I just use the simpler CSS.
Ex: w3schools.com/cssref/pr_text_text-...
That doesn't do the same thing, merely changes the appearance of the string on screen - doesn't change the string. Depending on the use case, that could be okay
Yes, but that was an example (Ex:) for conversation.
I used to do everything in JS
including building accessible menus, etc
wrote several 100s of lines of code for each.
In CSS, it was always less than 50 each, very easy to change, and by everyone.
I think there is also an issue with your
randomHex
function - it will never return#ffffff
since:can only ever return values from
0
tox-1
. You need to useMath.round()
Suggested alternative:
const capitalize = ([init, ...rest]) => init.toUpperCase() + rest.join('')
Shorter:
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...
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.Some comments may only be visible to logged-in visitors. Sign in to view all comments.