7 Killer JavaScript One-Liners that you must know

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 = '[e-mail]';
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

Comments

[m0nm]

Nice tips, but i think you made a mistake on the fifth tip. It should be like this:

console.log(arr1IsEmpty); //output - true
console.log(arr2IsEmpty); // output - false

[Remo Harsono]

Thanks for sharing Kamran, here's my little one

Reverse date format and change the delimiter

let str = "2022-01-25";
console.log(str.split("-").reverse().join("/")); // output: 25/01/2022

[Othmane kahtal]

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

[Ibrahim Wehbi]

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

[Kamran Ahmad]

nice bro that's great

[Prakhar Tandon]

Want to add a "Killer" trick.

A function to check if a given positive integer is a power of 2

function isPowerofTwo(num){
     if( num & (num-1) == 0 ) return true;
return false;
}

& used here is the Bitwise AND.

[Johnny C-L]

This is what the modulus operator % is for. By negating the check, you return 1 (true) or 0 (false) with:
console.log(!num % 2)

[Prakhar Tandon]

Modulus checks if the number is divisible by a number or not, It doesn't checks for exponent.

[lordshenk]

Nice tricks. The first one is cool.

[skotlindjames]

KILLER INDEED

[Arnav Kumar]

Nice but there are some errors

like in tip 7
there should not be . after the isArray and there shouldn't be a , at the end it should be ;

fixed code

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

[Bernd Wechner]

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:

console.log(Array.isArray(fruit)); //output - false

with this:

console.log(isArray(fruit)); //output - false

is a killer one-liner indeed. Well the killer one-liner is in fact:

const isArray = (arr) => Array.isArray(arr);

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.

[Prakhar Tandon]

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 !

[Andreas Sander]

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...

[Alex Lohr]

Using location.href is bad for the testability, better use location.assign(url).