1. Generate Random String
if you will ever need a temporary unique id for something. this
one-liner will generate a random string for you
const randomString = Math.random().toString(36).slice(2);
console.log(randomString); //output- r0zf1xfqcr (the string will be random )
2. Extract Domain Name From An Email
you can use the substring() method to extract the domain name
of the email.
let email = 'xyz@gmail.com';
le getDomain = email.substring(email.indexOf('@') + 1);
console.log(getDomain); // output - gmail.com
3. Detect Dark Mode
with this one-liner, you can check if the user is using dark mode ( and then you can update some functionality according to dark mode)
const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').match;
4. Check if An Element is Focused
to detect if the element has the focus in JavaScript, you can use the read-only property activeElement of the Document object.
const elem = document.querySelector(' .text-input');
const isFocus = elem == document.activeElemnt;
/* isFocus will be true if elem will have focus, and isFocus will be false if elem will not have focus */
5. Check If An Array Is Empty
this one-liner will let you know if an array is empty or not.
let arr1 = [];
let arr2 = [2, 4, 6, 8, 10];
const arr1IsEmpty = !(Array.isArray(arr1) && arr1.length >0);
const arr2IsEmpty = !(Array.isArray(arr2) && arr2.length >0);
console.log(arr1); //output - true
console.log(arr2); // output - false
6. Redirecting User
you can redirect the user to any specific URL using JavaScript.
const redirect = url => location.href = url
/* call redirect (url) whenever you want to redirect the user to a specific url */
7. Check If A Variable Is An Array
You can check if any Variable is an Array or not using the Array.isArray() method.
let fruit = 'apple';
let fruits = ["apple", "banana", "mango", "orange", "grapes"];
const isArray = (arr) => Array.isArray(arr);
console.log(isArray.(fruit)); //output - false
console.log(isArray.(fruits)), //output- true
Top comments (28)
Nice tips, but i think you made a mistake on the fifth tip. It should be like this:
Thanks for sharing Kamran, here's my little one
Reverse date format and change the delimiter
Nice hacks bro
My favourite tip : select elements directly by id without getElementById
<h1 id='h1'></h1>
you can do to select element :
h1.style.Color instead document.getElementById('h1').style.Color
that's why it is a bad practice to use id(attribute) in HTML elements and that you should always use class(attribute), in larger scale applications you will face unpredictable behavior because Javascript will be filled with global variables
nice bro that's great
Want to add a "Killer" trick.
A function to check if a given positive integer is a power of 2
&
used here is the Bitwise AND.This is what the modulus operator
%
is for. By negating the check, you return 1 (true) or 0 (false) with:console.log(!num % 2)
Modulus checks if the number is divisible by a number or not, It doesn't checks for exponent.
Nice tricks. The first one is cool.
KILLER INDEED
Nice but there are some errors
like in tip 7
there should not be
.
after theisArray
and there shouldn't be a,
at the end it should be;
fixed code
Poe's Law (look it up if you need to it's an essential part of modern internet vocabulary)
As in surely, when I read this, I read it as a parody, a joke ...
Replacing this:
with this:
is a killer one-liner indeed. Well the killer one-liner is in fact:
As in, it's one line, no-one needs (a killer).
And on a close inspection the errors aside (a hasty post it seems) they all seem to be in jest.
Quite Helpful,
I would like to add something to the first one.
Math.random is not actually a very good way if you want to use it for generating an id, it's okay if you are using it for some personal project.
Thing is that these functions generate a pseudo random number.
I have explained about this Here in detail.
If you want to generate more "random" random values, you can check out the Crypto global Here on MDN
Cheers and following you now !
Side note:
matchMedia
is also very interesting for checking whether a certain media-query is matched or not. And also listening for changes.Cf. developer.mozilla.org/en-US/docs/W...
Using
location.href
is bad for the testability, better uselocation.assign(url)
.