Javascript shorthand tricks 🔥

Javascript shorthand tricks 🔥

Written by Posandu Mapa on Nov 1st, 2022 ・ Views ・ Report Post

Posandu Mapa Visit User Profile

While writing code, we often write long lines of code. But some techniques can help us write shorter code. When we write shorter code, it is easier to read and understand (Not always, but most of the time). Let's see some of the techniques.

Ternary Operator

The ternary operator is a shorthand for if-else statements.

Normally, a beginner would write the following code:

let a = 10;

if (a > 5) {
    console.log("a is greater than 5");
} else {
    console.log("a is less than 5");
}

But we can write the same code in a shorter way using the ternary operator:

let a = 10;

console.log(a > 5 ? "a is greater than 5" : "a is less than 5");

Now don't get confused with the syntax. The ternary operator is written as follows:

condition ? "Value if true" : "Value if false";

&& Operator

The && operator is used to check if the two conditions are true. And also, it is used to check if a variable is defined or not.

Let's see an example:

const a = 0; // Falsey value
const b = 1; // Truthy value

console.log(a && "a is defined"); // Prints the value of a because a is falsey
console.log(b && "b is defined"); // Prints "b is defined" because b is truthy

It works like this:

value && "Value is defined";

That is a short form of:

🤩 Our Amazing Sponsors 👇
DigitalOcean View Website
DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.
Laravel News View Website
Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.
Genesis View Website
A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. 
value ? "Value is defined" : value; // (falsey value)

|| Operator

The || operator is a bit the same as the && operator. But, if the variable is not defined, it will return the value after the || operator.

Consider the following example:

const a = 0; // Falsey value
const b = 1; // Truthy value

const test = "HELLO";

console.log(a || "Hello"); // Prints "Hello" because a is falsey

console.log(b || "Hello"); // Prints 1 because b is truthy

This is a short form of:

if (value) {
    return value;
} else {
    return "Hello";
}

?? Operator

The nullish coalescing operator (??) is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined and otherwise returns its left-hand side operand.

const a = null;
const b = undefined;
const c = false;

console.log(a ?? "Hello"); // Prints "Hello" because a is null
console.log(b ?? "Hello"); // Prints "Hello" because b is undefined
console.log(c ?? "Hello"); // Prints false because c is NOT null or undefined

?. Operator

This is called optional chaining. It is used to check if a property exists or not. If it exists, it will return the value of the property. If it doesn't exist, it will return undefined.

const a = {
    b: {
        c: "Hello",
    },
};

console.log(a.b.c); // Prints "Hello"

console.log(a.b?.c); // Prints "Hello"
//             ^ This is the optional chaining operator

console.log(a.d?.c); // Prints undefined

This comes in handy when we are working with APIs. We can check if a property exists or not before using it.

let data = await fetch("https://api.example.li/gm?a=0");
data = await data.json();

// HARD 😓
if(obj && obj.response && obj.response.id) {
 //...
}

// Easy 😀
if(obj?.response?.id) {
    // ...
}

Conclusion

Thanks for reading this article. I hope you learned something new. If you have any questions, feel free to ask in the comments section or connect with me

Comments (0)