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 table below illustrates the distinction between the fundamental 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 &&= operator is known as the "Logical AND assignment operator" and is used to combine two variables. If the first value evaluates to true, the second value is assigned. Evaluation occurs from left to right.
Syntax
The syntax below demonstrates the Logical AND assignment operator using two values.
Value1 &&= Value2
Examples
These illustrations demonstrate the utilization of various values with the "Logical AND assignment operator" in JavaScript.
Example1:
Below is a demonstration illustrating fundamental values associated with the "AND assignment operator" in the JavaScript programming language.
<!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 displays the result of the "logical AND assignment operator's data".
Example2:
An illustration below demonstrates the usage of the "AND assignment operator" symbol 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 displayed output illustrates the data resulting from the logical and assignment operators.
Example3:
Below is a demonstration of an array illustrating the "AND assignment operator" in the JavaScript language.
<!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 (C# Tutorial)
array_var.forEach((item, index)=>{
array_var[index] &&= "Example"
})
document.getElementById("print_data").innerText = array_var.toString();
}
</script>
</body>
</html>
Output
The image displays the resulting data of the logical and assignment operator.
Logical OR assignment operator (||=)
The ||= operator is known as the "logical OR assignment operator" and is used to assign a value to a variable based on certain conditions. When the initial value is considered falsy, the operator assigns the second value. Evaluation takes place from left to right.
Syntax
Below is the syntax demonstrating the Logical OR assignment operator using two values.
Value1 ||= Value2
Examples
The provided code snippets demonstrate the utilization of the "Logical OR assignment operator" in JavaScript to handle multiple values.
Example1:
The illustration below demonstrates fundamental values for the "Logical OR assignment" in JavaScript. In this case, plain numerical values are utilized.
<!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 displays the result of the "logical OR assignment operator's data".
Example2:
Below is an illustration demonstrating the usage of 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 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 displays the result of the "Logical OR assignment operator's data."
Example3:
The upcoming illustration demonstrates 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 (C# Tutorial)
array_var.forEach((item, index)=>{
array_var[index] ||= "Example"
})
document.getElementById("print_data").innerText = array_var.toString();
}
</script>
</body>
</html>
Output
The image displays the result of the "Logical OR assignment operator" on data.
Nullish coalescing assignment operator (??=)
The ??= operator, known as the "Nullish coalescing assignment operator," is used to assign the second value if the first value is either undefined or null. Evaluation of this operator occurs from left to right.
Syntax
Below is an example demonstrating the Logical nullish assignment operator using two values.
Value1 ??= Value2
Examples
The instances demonstrate the utilization of the "Logical nullish assignment operator" in JavaScript with various values.
Example1:
Displayed below is an illustration demonstrating fundamental values for the "Logical nullish assignment" feature in JavaScript. In this case, basic numerical values are utilized.
<!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 displays the output of the "logical nullish assignment operator's data."
Example2:
The illustration below displays hash codes representing the concept of "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 visual representation displays the result of the "logical nullish assignment operator data".
Example3:
An instance below displays the array elements for the "Logical nullish assignment" feature in JavaScript. The nullish operator leverages the null and the "jtp" value to demonstrate its 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 displays the result of the "logical nullish assignment operator's data".
Conclusion
JavaScript logical assignment operators are essential for handling logical conditions between two values across various data types. These operators, including "and," "or," and nullish logical operations, are utilized in JavaScript to perform logical operations efficiently.