🔍 4 Powerful JavaScript Logical Operators You Should Know

[akadmin]

---

4 Powerful JavaScript Logical Operators You Should Know

Preface

While working on a collaborative project, I’ve reviewed code from many developers. Surprisingly, few of them use JavaScript’s newer logical operators—despite their usefulness and long-standing support. These operators can help you write cleaner, safer code, especially when dealing with optional data or fallback values. In this article, we’ll break down four of these logical operators with examples to help you use them confidently in your own code.

---

1. Optional Chaining (?.)

What It Does

The optional chaining operator allows you to safely access nested object properties without throwing an error if part of the chain is null or undefined. If any reference before the ?. is null or undefined, the expression will short-circuit and return undefined.

Example

let user = {
  name: "Ducky",
  address: {
    city: "Guangzhou"
  }
};

console.log(user.address.city); // "Guangzhou"

let user2 = {
  name: "Ducky"
};

console.log(user2.address?.city); // undefined

Key Notes

• Optional chaining only guards against null or undefined, not empty objects ({}).
• If user2.address doesn’t exist, it won’t throw an error—it will return undefined.

---

2. Nullish Coalescing Operator (??)

What It Does

The ?? operator returns the right-hand value only if the left-hand value is null or undefined. It’s great for setting default values without mistakenly treating valid falsy values (like 0 or '') as empty.

Example

let name = null;
let defaultName = "Ducky";

let result = name ?? defaultName;
console.log(result); // "Ducky"

If name is neither null nor undefined, it will be used:

let name = "I am name";
let defaultName = "Ducky";

let result = name ?? defaultName;
console.log(result); // "I am name"

Important Differences from ||

• || returns the right-hand side for all falsy values (false, 0, '', NaN, null, undefined)
• ?? only considers null and undefined

---

3. Nullish Coalescing Assignment (??=)

What It Does

The ??= operator assigns a default value only if the current value is null or undefined.

Example

let name = null;
let age = undefined;
let count = 0;

name ??= "default"; // "default"
age ??= "default";  // "default"
count ??= "default"; // remains 0

Key Takeaways

• It’s a shorthand for setting fallback values.
• It does not overwrite falsy values like false, 0, or ''.

---

4. Boolean Conversion with Double Bang (!!)

What It Does

The !! (double exclamation mark) is a quick trick to convert any value to its Boolean equivalent.

Example

let value = "Ducky";
let emptyValue = "";

console.log(!!value);      // true (non-empty string)
console.log(!!emptyValue); // false (empty string)

The first ! negates the value, and the second ! inverts it back to Boolean.

---

Summary

These logical operators—introduced in ECMAScript 2020—make your JavaScript code more robust, concise, and readable. While they might seem unfamiliar at first, mastering them will help you avoid errors and handle edge cases more elegantly.

---

Multiple Choice Questions (MCQs)

1. What does the ?. operator do?

A. Converts the value to a boolean
B. Throws an error if a property is undefined
C. Returns undefined if a property is null or undefined
D. Assigns a default value

Answer: C

---

2. Which values will trigger the right-hand expression in the ?? operator?

A. false, 0, and ''
B. null and undefined
C. Any falsy value
D. NaN only

Answer: B

---

3. What is the result of the following code?

let x = 0;
x ??= 10;
console.log(x);

A. 10
B. undefined
C. 0
D. null

Answer: C

---

4. What is the primary use of !!value in JavaScript?

A. Checking if a value is null
B. Converting a value to a number
C. Converting a value to a Boolean
D. Assigning default values

Answer: C

---

5. How does ?? differ from ||?

A. ?? considers all falsy values
B. ?? works only with numbers
C. ?? ignores null and undefined
D. ?? does not consider values like 0, false, or '' as nullish

Answer: D

---