The JavaScript assignment operator assigns a value to a JavaScript variable.The value of a variable or an expression is assigned to another variable, the variable that receives the value is always on left hand side and expression whose value is assigned is on right hand side of the assignment operator.
Syntax
//Syntax
var <variable> = < variable or expression>;
//Example
var myNumber = 334.55;
var myExp = a + 3;The JavaScript assignment operation is evaluated from right-to-left.
There are many types of assignment in JavaScript which are:
- Simple assignment
- Chained assignment
- Complex or Self-assignment
- Destructuring assignment
We shall discuss each one of them one-by-one with suitable examples.
Simple Variable Assignment
You have already seen an example of simple assignment in the earlier section. In this method, you simply assign a value of constant, or a variable or an expression to the variable on the left-hand side of the assignment operator.
Consider the following example,
//variable declaration simple assignment
var A = 33; //assigned a constant
var B = C; //assigned a variable value
var F = 3 * 4; //assigned an expressionChained Assignment
The JavaScript programming allows multiple assignments at the same time that looks like a chained assignment. Each part of the chain is executed first from right and then followed by other assignment to the leftmost variable.
//variable declaration chained assignment
var A = B = C = 220;
//The above is same as
var A = 220;
var B = 220;
var C = 220;
var D = 220;The chained assignment starts with rightmost expression first and then move to the leftmost variable in the expression. The expression A = B = C is same as A = (B = C). The expression in the parenthesis is executed first and then the next pair (A = B).
Self-Assignment
The self-assignment is compound assignment where the left-hand variable is part of right-hand expression. Consider the following example.
//variable declaration self-assignemnt
var x += 10;
//It is same as
var x = x + 10;The expression involving left-hand side( x + 10) on the right side is of assignment operator is evaluated first, and then assigned back to the variable x. This is self-assignment.
Note that the expression x += 10 can also be written as x = x + 10;
Here is a list of all self-assignment types in JavaScript.
| Assignment Expression | Expression | Standard Form |
| addition | x += 1 | x = x + 1 |
| subtraction | x -= 1 | x = x – 1 |
| multiplication | x *= 1 | x = x * 1 |
| division | x /= 1 | x = x / 1 |
| remainder | x %= 1 | x = x % 1 |
| exponential | x **=1 | x = x ** 1 |
| right shift | x >>= 1 | x = x >> 1 |
| left shift | x <<= 1 | x = x << 1 |
| unsigned right shift | x >>>= 1 | x = x >>> 1 |
| logical AND | x &&=1 | x = x && 1 |
| logical OR | x ||= 1 | x = x || 1 |
| bitwise AND | x &= 1 | x = x &= 1 |
| bitwise OR | x |= 1 | x = x | 1 |
| bitwise XOR | x ^= 1 | x = x ^ 1 |
Destructuring Assignment
The destructuring allows to quickly assign the values of an array to variables. Consider the following example, where we accessed each element of the by its index and assigned it to another variables.
//array declaration
var fruits = ["oranges","apples","banana", "mangoes"];
//assigning values of array to variables
var item1 = fruits[0];
var item2 = fruits[1];
var item3 = fruits[2];
var item4 = fruits[3];The same can be does in few steps using destructuring. See the same example with destructuring below.
//array declaration
var fruits = ["oranges","apples","banana", "mangoes"];
//destructuring array
var [item1, item2, item3, item4] = fruits;
//output to console
console.log(item1);
console.log(item2);
console.log(item3);
console.log(item4);The output of the above program is given below.
You can clearly see how easily we were able to assign values of array to variables using destructuing assignment.
In the next post, we will discuss about arithmetic operators.
