George and Robert walk into a bar...

The title might sound like there is only a joke waiting here for you (an SEO desaster, I know). Sorry to disappoint. This post is actually about JavaScript's logical assignment operators introduced in ES2021. Read on to find out what George and Robert have to do with this...

Historical background

Logical assignment operators are essentially a blend of Boolean logic and the assignment operation. But there's more to these components than one might initially think.

For one thing, many, if not most, developers might not realize how deeply woven Boolean logic is into the fabric of modern computing. It extends from computer circuits to conditional statements in your code.

We also use the equal sign every day, often without giving it much thought. This symbol, now crucial in both mathematics and coding, was invented for mathematical purposes back in the 16th century. Around 400 years later, in the 1950s, it found its way into computer programming.

If this historical context doesn't sound the least bit interesting to you, feel free to skip ahead to the Understanding Logical Assignment Operators section. Otherwise, join me for a brief journey back in time.

George Boole

The earliest studies of logic are attributed to the ancient Greeks, particularly Aristotle, who is often called the "Father of Logic." He developed a formal system of logic which laid the groundwork for the use of logical operators.

The real mathematical foundation of logical operators as we know them today began to take shape with the advent of symbolic logic in the 19th century. It uses symbols to represent logical forms and structures, which allows for more complex and abstract reasoning.

George Boole, a 19th-century English mathematician and logician, in his seminal work "The Laws of Thought" (1854), introduced an algebraic approach to logic. Here values could be either true or false, and operations could be performed on these values, analogous to algebraic operations. This system included the basic logical operators:

• AND (conjunction)
• OR (disjunction)
• NOT (negation)

Building on Boole's work, other mathematicians and logicians expanded the scope and depth of symbolic logic. And in the mid-20th century it found a new and fertile ground in the emerging field of computer science. The binary nature of Boolean logic proved to be perfectly suited to the digital circuitry at the heart of computers, where data could be represented as a series of 0s and 1s, and logical operators could control the flow of this data.

Logical operators became a fundamental part of programming languages, allowing for the construction of complex computational logic and decision-making processes in software. Today, they are integral to the syntax of nearly every programming language.

Robert Recorde

The equal sign was introduced in 1557 by Welsh mathematician Robert Recorde in his book "The Whetstone of Witte." Recorde grew tired of writing "is equal to" repeatedly in his work, so he chose two parallel lines of the same length as the symbol for equality. As he put it, it was because "noe 2 thynges can be moare equalle." This was a significant development in mathematical notation, providing a concise and clear way to express equality.

In the early days of programming, particularly with machine code and assembly languages, the concept of "assignment" was more about storing and moving data between registers and memory locations. Instructions were given using specific opcodes that directed the machine to perform these operations.

As high-level programming languages were developed, there was a need for a more abstract and human-readable way to represent the operation of assigning values to variables. This led to the adoption of the equal sign as an assignment operator in many languages, starting with FORTRAN in the 1950s.

The use of = for assignment created some ambiguity with its mathematical meaning of equality. This resulted in the introduction of different symbols to clarify intent in programming:

• Algol, developed in the 1960s, introduced the := symbol for assignment, distinguishing it from the equality comparison.
• C later popularized the use of = for assignment and == for equality testing, a convention that many subsequent languages have followed.

Over time, programming languages have introduced various forms of assignment operators to handle different operations efficiently, such as compound assignment operators (+=, -=, etc.) and, more recently, logical assignment operators in JavaScript.

Understanding Logical Assignment Operators

Logical assignment operators are syntactic sugar in JavaScript that combine assignment (=) with a logical (&&, ||) or nullish coalescing (??) operator. There are three types:

• Logical AND Assignment (&&=): Assigns the value on the right to the variable on the left only if the left variable is truthy.
• Logical OR Assignment (||=): Assigns the value on the right to the variable on the left only if the left variable is falsy.
• Nullish Coalescing Assignment (??=): Assigns the value on the right to the variable on the left only if the left variable is null or undefined.

Logical AND Assignment (&&=)

The &&= operator is a shortcut for setting a variable's value only if it currently holds a truthy value. It's particularly useful in scenarios where an action should only proceed if a certain condition remains true.

Example Use Case: Feature Toggle

Imagine a scenario where certain features should only be enabled for administrators:

const isAdmin = user.isAdmin();
let canAccessDashboard = isAdmin;

canAccessDashboard &&= user.isAuthenticated();
console.log(canAccessDashboard); // true if user is authenticated, otherwise false

This code snippet ensures that canAccessDashboard is only true if both isAdmin and user.isAuthenticated() are true, effectively guarding the feature behind two conditions.

Logical OR Assignment (||=)

The ||= operator allows you to assign a value to a variable if the variable currently holds a falsy value (e.g., null, undefined, 0, false, ""). This is incredibly useful for setting default values.

Example Use Case: Setting Defaults

const userSettings = {
  theme: null,
};

// Set default theme if none is specified
userSettings.theme ||= "dark";
console.log(userSettings.theme); // Outputs 'dark'

This operator is ideal for initializing variables that have not been set, ensuring that your application uses a sensible default without overwriting potentially meaningful falsy values like 0 or false.

Nullish Coalescing Assignment (??=)

The ?? operator, known as the nullish coalescing operator, is a relatively recent addition to programming languages. It's not a logical assignment operator in the strict sense, even though the ES2021 specification classifies it as such, since it's not based on a logical operator. Instead, its development is more closely tied to the practical needs of programming, particularly in handling null and undefined values in a clean and predictable manner.

The ??= operator is used to assign a value to a variable if and only if the variable is currently null or undefined. This is more precise than the ||= operator, which also considers other falsy values.

Example Use Case: Configuration Defaults

const config = {
  timeout: 0,
};

config.timeout ??= 5000; // Set default timeout if not specified, i.e. undefined, or null
console.log(config.timeout); // Outputs 0, preserving the explicitly set falsy value

This operator is particularly useful in configurations and settings where defaults should only fill in missing values without replacing other falsy but valid settings like 0.

Practical Benefits and Considerations

Using logical assignment operators, instead of if or ternary statements, reduces the amount of code you need to write, and can make your intentions clearer to other developers. As with many features, the key is to use these operators judiciously, especially when dealing with falsy values that are valid in your code's context.

Additional Note

There are more assignment operators in JavaScript, like the left shift assignment operator (

(Cover image on top by starline on Freepik)

The above is the detailed content of George and Robert walk into a bar.... For more information, please follow other related articles on the PHP Chinese website!