Nullish Coalescing Operator (??)

The Nullish Coalescing Operator (??) is a JavaScript/Typescript operator that provides a concise way to handle nullish (null or undefined) values in expressions. It allows you to specify a default value that will be returned if the value on the left side of the operator is nullish.

const result = value1 ?? value2;

If value1 is nullish (null or undefined), it returns value2. Otherwise, it returns value1.

Here’s an example to illustrate its usage:

const url = null;
const defaultUrl = "https://mithle.sh";
const redirectTo = url ?? defaultUrl

console.log(redirectTo); // Output: "https://mithle.sh"

The nullish coalescing operator ?? checks if the value on the left side (url) is null or undefined. If it is, it uses the value on the right side (defaultUrl). In other words, if url is not provided or has no value, redirectTo will be set to the value of defaultUrl. However, if url has a value (not null or undefined), then redirectTo will be set to the value of url.

Since url is null in this case, redirectTo will be set to https://mithle.sh, and that’s what will be displayed in the console.

Logical OR Operator (||)

In Javascript/Typescript, the Logical OR Operator (||) is used to check if the left-hand side operand is truthy. If it is, then the left-hand side operand is returned. Otherwise, the right-hand side operand is returned.

Here’s an example:

const name = null; 
const fullName = name || "John Doe";
console.log(fullName); // Output: "John Doe"

In this case, if name is truthy (not null, undefined, false, 0, empty string, or NaN), the variable name will be assigned the value of fullName. Otherwise, it will be assigned the string 'John Doe'.

Remember that the logical OR operator returns the actual value of the operand, not just true or false.

What’s the difference?

Here are the main differences between the Nullish Coalescing Operator (??) and Logical OR Operator (||) in JavaScript:

1. Nullish check: The Nullish Coalescing Operator in Javascript only checks for null or undefined, while the Logical OR Operator in Javascript checks for any falsy value (such as null, undefined, 0, false, empty string, or NaN).
2. Return value: The Nullish Coalescing Operator returns the right-hand side operand only if the left-hand side operand is null or undefined. The Logical OR Operator returns the right-hand side operand if the left-hand side operand is falsy.
3. Precedence: The Nullish Coalescing Operator has higher precedence than the Logical OR Operator. This means that if both operators are used in the same statement, the Nullish Coalescing Operator will be evaluated first.
4. Use case: The Nullish Coalescing Operator is typically used to provide default values for variables that could be null or undefined. The Logical OR Operator is often used for boolean operations or to provide default values for variables that could be any falsy value.

Here’s an example to illustrate the difference between the two operators:

const age = 0;
const defaultAge = 18;

const result1 = age ?? defaultAge;
const result2 = age || defaultAge;

console.log(result1); // Output: 0
console.log(result2); // Output: 18

In this example, age is 0 and defaultAge is 18. When we use the Nullish Coalescing Operator, result1 is assigned the value of age because age has a defined value (0). When we use the Logical OR Operator, result2 is assigned the value of defaultAge because age is falsy (i.e., 0).

The post Nullish Coalescing Operator (??) vs Logical OR (||) in JavaScript appeared first on Mithle.sh.

There are mainly three types of for loops in JavaScript:

1. for loop: A for loop allows you to execute a block of code repeatedly for a specified number of times.
2. for…in loop: A for/in loop allows you to iterate over the properties of an object, executing the loop body once for each property.
3. for…of loop: A for/of loop allows you to iterate over the values of an iterable object, executing the loop body once for each value.

Consider the following object array. Suppose we want to iterate over the users array, run some time consuming task on each iteration before logging the user object to the console.

const users = [
    {
        id: 1,
        name: 'Alan',
    },
    {
        id: 2,
        name: 'Joel',
    },
    {
        id: 3,
        name: 'Triss',
    }
];

To use await in a for loop, you must mark the loop function as async, and then use await inside the loop to wait for each asynchronous operation to complete before moving on to the next iteration.

In the following example, the code is same for each type of the loops except the syntax of the loop method.

Async await with for loop

async function randomWait() {
    await new Promise((resolve) => setTimeout(resolve, Math.floor(Math.random() * 100)));
    return;
}

async function printUser() {
    for(let i=0; i < users.length; i++) {
        // Wait for some time consuming task to finish
        await randomWait();
        console.log(users[i]);
    }
}

printUser();

OUTPUT: 
{ id: 1, name: 'Alan' }
{ id: 2, name: 'Joel' }
{ id: 3, name: 'Triss' }

Async await with for…in loop

async function printUser() {
    for(const index in users) {
        await randomWait();
        console.log(users[index]);
    }
}

OUTPUT: 
{ id: 1, name: 'Alan' }
{ id: 2, name: 'Joel' }
{ id: 3, name: 'Triss' }

Async await with for…of

async function printUser() {
    for(const user of users) {
        await randomWait();
        console.log(user);
    }
}

OUTPUT: 
{ id: 1, name: 'Alan' }
{ id: 2, name: 'Joel' }
{ id: 3, name: 'Triss' }

This code defines two async functions: randomWait() and printUser().

randomWait() uses the await keyword to pause execution for a random amount of time, chosen using Math.random() and setTimeout(). Once the timer expires, the Promise resolves and the function returns.

printUser() is an async function that iterates over an array called users. For each element of the array, it first calls randomWait() to simulate some time-consuming operation, then prints the element to the console using console.log().

In the result, you can see that the data is printed in the sequential order in each of the three for loops.

Caveats

Using await inside a loop can potentially slow down the loop significantly, especially if the operations being awaited are time-consuming. In some cases, it might be more efficient to use Promise.all() to run multiple promises in parallel rather than awaiting them one at a time in a loop.

The post How to use Async Await with For Loop in Javascript & Typescript appeared first on Mithle.sh.