Modern JavaScript (ES2021)

Logical Assignment Operators

Assign only when needed - &&=, ||=, ??= shortcuts!

Find videos you like?

Save to resource drawer for future reference!

What are Logical Assignment Operators?

These are conditional assignment shortcuts!&&=,||=, and??=combine logical operators with assignment. They only assign if the condition is met - making your code cleaner and more efficient!

Shorter & Clearer

Instead of x = x || 10, write x ||= 10. Same logic, less code!

🎯Three Operators

||=

Logical OR

Assign if left is falsy

x ||= y → x || (x = y)

&&=

Logical AND

Assign if left is truthy

x &&= y → x && (x = y)

??=

Nullish

Assign if left is null/undefined

x ??= y → x ?? (x = y)

Example 1: Understanding Each Operator

See how each logical assignment operator works

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Example 2: Real-World Use Cases

Practical scenarios for logical assignment

javascript

code

DarkEditable

// 1. Default config values (||=)
function initConfig(config = {}) {
  config.theme ||= 'light';
  config.language ||= 'en';
  config.timeout ||= 5000;
  
  return config;
}

console.log(initConfig({}));
// { theme: 'light', language: 'en', timeout: 5000 }

console.log(initConfig({ theme: 'dark' }));
// { theme: 'dark', language: 'en', timeout: 5000 }

// 2. Update if exists (&&=)
const users = {
  'user1': { name: 'Alice', premium: true },
  'user2': { name: 'Bob', premium: false }
};

// Upgrade premium users only
for (let userId in users) {
  users[userId].premium &&= { 
    ...users[userId], 
    benefits: ['ad-free', 'support'] 
  };
}

// 3. Initialize if missing (??=)
const cache = {};

function getData(key) {
  // Initialize cache entry if doesn't exist
  cache[key] ??= fetchExpensiveData(key);
  return cache[key];
}

function fetchExpensiveData(key) {
  console.log(`Fetching ${key}...`);
  return { data: 'expensive' };
}

getData('user1');  // Fetches and caches
getData('user1');  // Uses cache (no fetch)

// 4. Form field defaults
const formData = {
  username: '',
  email: null,
  age: 0
};

// Use ||= for empty strings
formData.username ||= 'guest';
console.log(formData.username);  // "guest"

// Use ??= for nullish values (keeps 0!)
formData.age ??= 18;
console.log(formData.age);  // 0 (not replaced!)

Console Output

Click "Run Code" to see output here...

Key Takeaways

||=

OR Assignment

Assign if falsy (0, '', false, null, undefined)

&&=

AND Assignment

Assign only if truthy

??=

Nullish Assignment

Assign only if null/undefined (keeps 0, false, '')

⚡

ES2021

Cleaner conditional assignments

Previous Topic

globalThis

Universal global object across environments (ES2020).

Next Topic

Numeric Separators

Using _ in numbers for better readability: 1_000_000 (ES2021).

Ask a Question

Have a question about Logical Assignment? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.

Modern JavaScript (ES2021)

Logical Assignment Operators

Assign only when needed - &&=, ||=, ??= shortcuts!

Find videos you like?

Save to resource drawer for future reference!

What are Logical Assignment Operators?

These are conditional assignment shortcuts!&&=,||=, and??=combine logical operators with assignment. They only assign if the condition is met - making your code cleaner and more efficient!

Shorter & Clearer

Instead of x = x || 10, write x ||= 10. Same logic, less code!

🎯Three Operators

||=

Logical OR

Assign if left is falsy

x ||= y → x || (x = y)

&&=

Logical AND

Assign if left is truthy

x &&= y → x && (x = y)

??=

Nullish

Assign if left is null/undefined

x ??= y → x ?? (x = y)

Example 1: Understanding Each Operator

See how each logical assignment operator works

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Example 2: Real-World Use Cases

Practical scenarios for logical assignment

javascript

code

DarkEditable

// 1. Default config values (||=)
function initConfig(config = {}) {
  config.theme ||= 'light';
  config.language ||= 'en';
  config.timeout ||= 5000;
  
  return config;
}

console.log(initConfig({}));
// { theme: 'light', language: 'en', timeout: 5000 }

console.log(initConfig({ theme: 'dark' }));
// { theme: 'dark', language: 'en', timeout: 5000 }

// 2. Update if exists (&&=)
const users = {
  'user1': { name: 'Alice', premium: true },
  'user2': { name: 'Bob', premium: false }
};

// Upgrade premium users only
for (let userId in users) {
  users[userId].premium &&= { 
    ...users[userId], 
    benefits: ['ad-free', 'support'] 
  };
}

// 3. Initialize if missing (??=)
const cache = {};

function getData(key) {
  // Initialize cache entry if doesn't exist
  cache[key] ??= fetchExpensiveData(key);
  return cache[key];
}

function fetchExpensiveData(key) {
  console.log(`Fetching ${key}...`);
  return { data: 'expensive' };
}

getData('user1');  // Fetches and caches
getData('user1');  // Uses cache (no fetch)

// 4. Form field defaults
const formData = {
  username: '',
  email: null,
  age: 0
};

// Use ||= for empty strings
formData.username ||= 'guest';
console.log(formData.username);  // "guest"

// Use ??= for nullish values (keeps 0!)
formData.age ??= 18;
console.log(formData.age);  // 0 (not replaced!)

Console Output

Click "Run Code" to see output here...

Key Takeaways

||=

OR Assignment

Assign if falsy (0, '', false, null, undefined)

&&=

AND Assignment

Assign only if truthy

??=

Nullish Assignment

Assign only if null/undefined (keeps 0, false, '')

⚡

ES2021

Cleaner conditional assignments

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

globalThis

Numeric Separators

JavaScript Code Editor

Building Your Learning Module...

Logical Assignment Operators

What are Logical Assignment Operators?

Shorter & Clearer

Logical OR

Logical AND

Nullish

Example 1: Understanding Each Operator

Example 2: Real-World Use Cases

Key Takeaways

OR Assignment

AND Assignment

Nullish Assignment

ES2021

globalThis

Numeric Separators

JavaScript Code Editor

Logical Assignment Operators

What are Logical Assignment Operators?

Shorter & Clearer

Logical OR

Logical AND

Nullish

Example 1: Understanding Each Operator

Example 2: Real-World Use Cases

Key Takeaways

OR Assignment

AND Assignment

Nullish Assignment

ES2021