Support People In Ukraine
Ukraine was invaded by Russia in the early morning of 24.02.2022, explosions thundered in Ukrainian cities, many civilians died, tens of millions are affected. Our army protects all Europe from the occupiers and it needs help now to restrain one of the biggest armies in the world. Please, donate a small amount.
I Am
Volodymyr Hudyma
<FrontEndDeveloper />
You Are Here: Home/Logical OR/AND/Nullish Assignments In JavaScript

Logical OR/AND/Nullish Assignments In JavaScript

July 01, 2021

Table Of Contents

    The latest JavaScript specification, ECMAScript 2021, includes a lot of useful features, but the one we'll discuss today is Logical Assignment Operator, which is a combination of a logical operator (||, &&, ??) with an assignment (=).

    By using Logical Assignment Operator, we can make an assignment with a single line of code.

    Before we start learning this function, let's remember how the logical operators work in JavaScript and what is meant by Short Circuit.

    Logical OR

    The Logical OR operator returns x if it is Truthy Value, otherwise it returns y.

    Truthy Value is a value that is considered true in a Boolean context.

    Falsy Value is a value that is considered false in a Boolean context.

    Nullish Value is a value that is equal to null or undefined. All Nullish Values are also Falsy.

    // Syntax
    x || y
    
    // Equivalent
    x ? x : y

    Examples:

    // Truthy values
    1 || "notReturned" // => 1
    true || "notReturned" // => true
    "returnMe" || "notReturned" // => "returnMe"
    
    // Falsy values
    null || "returnMe" // => "returnMe"
    NaN || "returnMe" // => "returnMe"
    0 || "returnMe" // => "returnMe"
    "" || "returnMe" // => "returnMe"
    undefined || "returnMe" // => "returnMe"

    Logical AND

    The Logical AND operator returns x if it cannot be converted to true, otherwise it returns y:

    // Syntax
    x && y
    
    // Equivalent
    x ? y : x

    Examples:

    // Truthy values
    1 && "returnMe" // => "returnMe"
    true && "returnMe" // => "returnMe"
    "string" && "returnMe" // => "returnMe"
    
    // Falsy values
    null && "notReturned" // => "null"
    NaN && "notReturned" // => "NaN"
    0 && "notReturned" // => "0"
    "" && "notReturned" // => ""
    undefined && "notReturned" // => "undefined"

    Logical Nullish Assignment

    The Logical Nullish Assignment operator returns y if x is null or undefined, otherwise it returns x:

    // Syntax
    x ?? y
    
    // Equivalent
    x !== undefined && x !== null ? x : y

    Examples:

    // Truthy values
    1 ?? "notReturned" // => "1"
    true ?? "notReturned" // => "true"
    "returnMe" ?? "notReturned" // => "returnMe"
    
    // Falsy values
    null ?? "returnMe" // => "returnMe"
    NaN ?? "notReturned" // => "NaN"
    0 ?? "notReturned" // => "0"
    "" ?? "notReturned" // => ""
    undefined ?? "returnMe" // => "returnMe"

    Short Circuit

    Short Circuit means that the right side of an expression is not evaluated if the operator is already determined after the first operand evaluation.

    Any side effects that could have occurred do not take any effect:

    const expensiveCalc = () => {
      console.log("Doing some expensive calculations...");
    };
    
    true || expensiveCalc(); // -> "true"
    false && expensiveCalc(); // -> "false"
    true ?? expensiveCalc(); // -> "true"

    In all three cases the expensiveCalc() function is never called.

    Logical OR Assignment

    The Logical OR Assignment operator only assigns if x is Falsy Value:

    // Syntax
    x ||= y
    
    // Equivalent
    x || (x = y)

    It Short-Circuits if the first operand determines the result.

    Example:

    const user = {
      name: "John",
      surname: "Doe"
    };
    
    user.name ||= "Andrew";
    user.age ||= 18;
    
    // Prints { name: "John", surname: "Doe", age: 18 }
    console.log(user);

    In this example, the name property is not reassigned because it is a Truthy Value, but age is Falsy (equal to undefined), so there is a new value at the end.

    Logical AND Assignment

    The Logical AND Assignment operator only assigns if x is Truthy Value:

    // Syntax
    x &&= y
    
    // Equivalent
    x && (x = y)

    It Short-Circuits if the first operand determines the result.

    Example:

    const user = {
      name: "John",
      surname: "Doe"
    };
    
    user.name &&= "Andrew";
    user.age &&= 18;
    
    // Prints { name: "Andrew", surname: "Doe" }
    console.log(user);

    In this example, the name property is reassigned because it is a Truthy Value, but age is Falsy (equal to undefined), so it is not reassigned.

    Logical Nullish Assignment

    The Logical Nullish Assignment operator only assigns if x is Nullish Value:

    // Syntax
    x ??= y
    
    // Equivalent
    x ?? (x = y)

    It Short-Circuits if the first operand determines the result.

    Example:

    const user = {
      name: "John",
      surname: "Doe",
      age: null,
    };
    
    user.name ??= "Andrew";
    user.age ??= 18;
    
    // Prints { name: "John", surname: "Doe", age: 18 }
    console.log(user);

    In this example, the name property is not reassigned because it is a Truthy Value, but age is Nullish (equal to undefined), so there is a new value at the end.

    Summary

    In this article, we learned how to use three new Logical Assignment Operators in JavaScript:

    • Logical OR Assignment: x ||= y
    • Logical AND Assignment: x &&= y
    • Logical Nullish Assignment: x ??= y

    On the one hand, proper usage of them makes the code shorter, cleaner, and more readable, but on the other hand, redundant usage leads to rapid decreasing of readability.

    So be sure to play around with these new operators to understand them better, and use them wisely.

    Newsletter
    Receive all new posts directly to your e-mail
    No spam, only quality content twice a week
    Let me know what you think about this article
    Click here to write response...
    Author
    July 03, 2021
    Hi Maciej, thanks for reading my blog and being so careful about the details! You are absolutely right, changing the examples in section makes perfect sense, just done that :)
    Maciej Hnat
    July 03, 2021
    Hey Vova, very cool article. I think that in the "Logical AND" section you confused the "returnMe" and "notReturned" strings, by that I mean, that in truthy values section: 1 && "notReturned" // => "notReturned" should probably be 1 && "returnMe" // => "returnMe" and in falsy values section: null && "returnMe" // => "null" should probably be null && "notReturned" // => "null" Other than that, great read! :) It's always nice to see improvements to my favorite programming language :)