JavaScript Logical Assignment Operators

Javascript logical assignment operators help to use the logical operators with the default and another expression. It works between two expressions or values with a single operator. ES2021 provides three logical assignment operators, which are as follows:

Logical AND assignment operator
Logical OR assignment operator
Nullish coalescing assignment operator

The following table displays the difference between the basic and logical assignment operators.

ES Logical Assignment Operators	Basic Logical Operators
a &&= b	a && (a = b)
a \|\|= b	a \|\| (a = b)
a ??= b	a ?? (a = b);

Logical AND assignment operator (&&=)

The &&= symbol is a "Logical AND assignment operator" and connects two variables. If the initial value is correct, the second value is used. It is graded from left to right.

Syntax

The following syntax shows the Logical AND assignment operator with the two values.

Examples

The examples work with multiple values using the "Logical AND assignment operator" in the javascript.

Example1:

The following example shows basic values for the "AND assignment operator" in javascript.

<!DOCTYPE html>
<html>
<head>
<title> JavaScript Logical Assignment Operators </title>
</head>
<body>
<h3> JavaScript Logical Assignment Operators </h3>
<p> JavaScript Logical AND Assignment Operator work with the basic values. </p>
<button type = "button" onclick = "clickHere();"> Click Here! </button>
<p id = "value1"> </p>
<p id = "value2"> </p>
<p id = "value3"> </p>
<script>
function clickHere(){
var value1 = 0;
var value2 =  50;
var value3 =  100;
var value4 =  983;
var add1 = value1 &&= value2;
document.getElementById('value1').innerHTML = add1;
var add2 = value2 &&= value3;
document.getElementById('value2').innerHTML = add2;
var add3 = value2 &&= value4;
document.getElementById('value3').innerHTML = add3;
}
</script>
</body>
</html>

Output

The image shows the "logical AND assignment operator's data" as an output.

Example2:

The following example shows the "AND assignment operator" hash in javascript.

<!DOCTYPE html>
<html>
<head>
<title> JavaScript Logical Assignment Operators </title>
</head>
<body>
<h3> JavaScript Logical Assignment Operators </h3>
<p> JavaScript Logical AND Assignment Operator work with the basic values. </p>
<button type = "button" onclick = "clickHere();"> Click Here! </button>
<p> Output shows in Console Tab </p>
<script>
function clickHere(){
let Student1 = {
firstName: 'Ram',
lastName: 'Seth',
};
console.log("JavaScript Logical AND Assignment Operators ");
Student1.firstName &&= 'devid';
console.log(Student1);
console.log(Student1.firstName);
Student1.lastName &&= 'Seth';
console.log(Student1.lastName);
Student1.lastName &&= 'simple';
console.log(Student1.lastName);
}
</script>
</body>
</html>

Output

The image shows the "logical and assignment operator's data" as an output.

Example3:

The following example shows an array for the "AND assignment operator" in javascript.

<!DOCTYPE html>
<html>
<head>
<title> JavaScript Logical Assignment Operators </title>
</head>
<body>
<h3> JavaScript Logical Assignment Operators </h3>
<p> JavaScript Logical AND Assignment Operator work with the Array values. </p>
<button type = "button" onclick = "clickHere();"> Click Here! </button>
<p id = "print_data"> </p>
<script>
function clickHere(){
let array_var = [4, "learn", null, "Good", undefined, []]
// Replace with arrays truthy values with input value (JavaTpoint)
array_var.forEach((item, index)=>{
array_var[index] &&= "JavaTpoint"
})
document.getElementById("print_data").innerText = array_var.toString();
}
</script>
</body>
</html>

Output

The image shows the "logical and assignment operator's data" as an output.

Logical OR assignment operator (||=)

The ||= is a "logical OR assignment operator" between two values. If the initial value is incorrect, the second value is used. It is graded from left to right.

Syntax

The following syntax shows the Logical OR assignment operator with the two values.

Examples

The examples work with multiple values using the " Logical OR assignment operator" in the javascript.

Example1:

The following example shows basic values for the "Logical OR assignment" in javascript. Here, We can use simple numeric values.

<!DOCTYPE html>
<html>
<head>
<title> JavaScript Logical Assignment Operators </title>
</head>
<body>
<h3> JavaScript Logical Assignment Operators </h3>
<p> JavaScript Logical OR Assignment Operator works with the basic values. </p>
<button type = "button" onclick = "clickHere();"> Click Here! </button>
<p id = "value1"> </p>
<p id = "value2"> </p>
<p id = "value3"> </p>
<script>
function clickHere(){
var value1 = 0;
var value2 =  50;
var value3 =  100;
var value4 =  983;
var add1 = value1 ||= value2;
document.getElementById('value1').innerHTML = add1;
var add2 = value2 ||= value3;
document.getElementById('value2').innerHTML = add2;
var add3 = value2 ||= value4;
document.getElementById('value3').innerHTML = add3;
}
</script>
</body>
</html>

Output

The image shows the "logical OR assignment operator's data" as an output.

Example2:

The following example shows the "OR assignment operator" hash in javascript.

<!DOCTYPE html>
<html>
<head>
<title> JavaScript Logical Assignment Operators </title>
</head>
<body>
<h3> JavaScript Logical Assignment Operators </h3>
<p> JavaScript Logical OR Assignment Operator works with the basic values. </p>
<p> Output shows in Console Tab </p>
<script>
let Student1 = {
firstName: 'Ram',
lastName: 'Seth',
};
console.log("JavaScript Logical OR Assignment Operators ");
Student1.firstName ||= 'devid';
console.log(Student1);
console.log(Student1.firstName);
Student1.lastName ||= 'Seth';
console.log(Student1.lastName);
Student1.lastName ||= 'simple';
console.log(Student1.lastName);
</script>
</body>
</html>

Output

The image shows the " Logical OR assignment operator's data" as an output.

Example3:

The following example shows arrays for the "OR assignment operator" in javascript.

<!DOCTYPE html>
<html>
<head>
<title> JavaScript Logical Assignment Operators </title>
</head>
<body>
<h3> JavaScript Logical Assignment Operators </h3>
<p> JavaScript Logical OR Assignment Operator works with the Array values. </p>
<button type = "button" onclick = "clickHere();"> Click Here! </button>
<p id = "print_data"> </p>
<script>
function clickHere(){
let array_var = [4, "learn", null, "Good", undefined, []]
// Replace with arrays truthy values with input value (JavaTpoint)
array_var.forEach((item, index)=>{
array_var[index] ||= "JavaTpoint"
})
document.getElementById("print_data").innerText = array_var.toString();
}
</script>
</body>
</html>

Output

The image shows the " Logical OR assignment operator's data" as an output.

Nullish coalescing assignment operator (??=)

The ??= is a "Nullish coalescing assignment operator" between two values. The second value is assigned if the first value is undefined or null. It is graded from left to right.

Syntax

The following syntax shows the Logical nullish assignment operator with the two values.

Examples

The examples work with multiple values using the " Logical nullish assignment operator" in the javascript.

Example1:

The following example shows basic values for the "Logical nullish assignment" in javascript. Here, We can use simple numeric values.

<!DOCTYPE html>
<html>
<head>
<title> JavaScript Logical Assignment Operators </title>
</head>
<body>
<h3> JavaScript Logical Assignment Operators </h3>
<p> JavaScript Logical nullish Assignment Operator work with the basic values. </p>
<button type = "button" onclick = "clickHere();"> Click Here! </button>
<p id = "value1"> </p>
<p id = "value2"> </p>
<p id = "value3"> </p>
<script>
function clickHere(){
var value1 = 0;
var value2 =  50;
var value3 =  100;
var value4 =  983;
var add1 = value1 ??= value2;
document.getElementById('value1').innerHTML = add1;
var add2 = value4 ??= value1;
document.getElementById('value2').innerHTML = add2;
var add3 = value1 ??= value3;
document.getElementById('value3').innerHTML = add3;
}
</script>
</body>
</html>

Output

The image shows the "logical nullish assignment operator's data" as an output.

Example2:

The following example shows hash values for the "Logical nullish assignment" in javascript.

<!DOCTYPE html>
<html>
<head>
<title> JavaScript Logical Assignment Operators </title>
</head>
<body>
<h3> JavaScript Logical Assignment Operators </h3>
<p> JavaScript Logical Nullish Assignment Operator works with the hash values. </p>
<p id = "print_data"> Please See the console tab to output data </p>
<script>
let student = {
studentname: 'Devid'
};
student.username ??= 'undefined';
student.nickname ??= null;
student.studentname ??= null;
console.log("JavaScript Logical Nullish Assignment Operator")
console.log(student);
</script>
</body>
</html>

Output

The image shows the "logical nullish assignment operator's data" as an output.

Example3:

The following example shows array values for the "Logical nullish assignment" in javascript. The nullish operator uses the null and the "jtp" value to show functionality.

<!DOCTYPE html>
<html>
<head>
<title> JavaScript Logical Assignment Operators </title>
</head>
<body>
<h3> JavaScript Logical Assignment Operators </h3>
<p> JavaScript Logical Nullish Assignment Operator works with the Array values. </p>
<button type = "button" onclick = "clickHere();"> Click Here! </button>
<p id = "print_data"> </p>
<p id = "print_data1"> </p>
<script>
function clickHere(){
let array_var = [null, "learn", null, "Good", undefined, []]
// Replace with arrays truthy values with input value
array_var.forEach((item, index)=>{
array_var[index] ??= null
})
document.getElementById("print_data").innerText = array_var.toString();
array_var.forEach((items, indexs)=>{
array_var[indexs] ??= "jtp"
})
document.getElementById("print_data1").innerText = array_var.toString();
}
</script>
</body>
</html>

Output

The image shows the "logical nullish assignment operator's data" as an output.

Conclusion

The javascript logical assignment operators help to operate logical conditions between two inputs in all data formats. The "and", "or", and nullish logical operation works by these operators in the javascript language.

Next TopicJavaScript numerical separator

← prev next →