Javascript Logical AND Assignment Operator

javascript
Published on August 3, 2020

The logical AND assignment operator represented by &&= works like the assignment operator =, but assigns only when the left-hand side is a truthy value.

// set x to y only when x is truthy
x &&= y;

What is a truthy value ? A truthy value in Javascript is considered as true when considered under a boolean context. All values are considered truthy except the following values :

  • Boolean false
  • number 0
  • number -0
  • "" / '' / `` empty string
  • null
  • undefined
  • NaN — Not a number

Examples

// a is falsy as it is undefined
let a;
let b = 10;

a &&= b;

// "undefined"
console.log(a);

// a is truthy
let a = 5;
let b = 10;

a &&= b;

// 10
console.log(5);

// falsy as innerHTML is empty
document.querySelector("#target").innerHTML = "";

// assigment will not happen
document.querySelector("#target").innerHTML &&= '<span></span>';

// ""
console.log(document.querySelector("#target").innerHTML);

Use-Cases of Logical AND Assignment Operator

  • Shorten down code : Instead of first checking whether the value is truthy and then performing an assignment, it is better to use the logical AND assignment operator as will involve only a single line of code.

    let a = 10;

if(a) {
	a = 20;
}		

// does the same thing but in a shorter syntax
a &&= 10;

  • Improving efficiency of DOM operations : The logical AND assignment operator gets and sets the value in a single shot. This can help in improving efficiency of some DOM methods as parsing and rendering operations are reduced.

    // access innerHTML property
if(document.querySelector("#target").innerHTML != '') {
	// access innerHTML property again
	document.querySelector("#target").innerHTML = '<div>Test</div>';
}

// access innerHTML property only once
document.querySelector("#target").innerHTML &&= '<div>Test</div>';

Browser Compatibility

Logical OR assignment operator is supported in all major browsers :

  • Chrome 85+ (to be released in August 2020)
  • Firefox 79+
  • Edge 85+ (to be released in August 2020)
  • Safari 14+
In this Tutorial