Page Content

Tutorials

What are JavaScript Assignment Operators with Example?

JavaScript Assignment Operators

Assignment operators are among the basic types of operators. These operators are specifically used to provide a variable or an object’s attribute a value. Assignment operators enable us to save or modify the values contained in variables, which are special fields with names. Often called a lvalue, the operand on the left side of an assignment operator is an expression that is permitted to occur on the left side of an assignment. This lvalue needs to be a variable, object attribute, or array element that has the ability to store values. An arbitrary value or a more complex expression can be the operand on the right.

The simple assignment operator (=) is the most fundamental assignment operator. It transfers the value to the left-hand operand (the target variable) from the right-hand operand. For instance, the new variable an is assigned the value 3 with the phrase var a = 3;. The value that was allocated to the left operand is the value of the assignment operation itself, which is likewise an expression. One of the main types of expression statements, or expressions with side effects, are assignment expressions. Changing the value of the variable or property on the left is a side effect of assignment.

JavaScript offers compound assignment operators in addition to the basic assignment operator. These operators offer a shortcut method of performing an operation on the current value of a variable and then updating the variable with the outcome by combining an assignment and an arithmetic (or bitwise) operation. The compound assignment expression an op= b is equal to the longer expression a = an op b for the majority of operators op. As a result, the code is shorter and possibly more effective.

The following are typical compound assignment operators that are developed from arithmetic operators:

  • Addition assignment (+=): In addition assignment (+=), the right operand’s value is added to the left operand’s current value and returned to the left operand. For instance, x = x + 5 and x += 5 are equivalent. String concatenation is another use for the += operator.
  • Subtraction assignment (-=): In this operator, the right operand’s value is subtracted from the left operand’s current value and assigned back. For example, x = x – 2 is the same as x -= 2.
  • Multiplication assignment (*=): This operator multiplies the left operand by the right and returns the result. x = x * 6 is equivalent to x *= 6.
  • Division assignment (/=) divided the left operand’s value by the right operand’s value returns the result. x = x / 3 is the same as x /= 3.
  • Module assignment (%=): This operator returns the remainder of dividing the left operand’s value by the right operand’s value. x = x % 3 is equivalent to x %= 3.
  • Exponentiation assignment (**=): This operator multiplies the left operand’s value by the right operand’s and returns the result. For instance, x = x ** 2 is the same as x **= 2. Later on, JavaScript introduced this operator.

In comparison to the majority of other operators, assignment operators have a comparatively low precedence. They are also associative from right to left. This indicates that evaluation occurs from right to left in expressions that contain multiple assignment operators. Because of its low precedence, brackets ((…)) are frequently required if you wish to use the value of an assignment expression inside a bigger expression.

The following code exemplifies assignment operators:

// 1. Basic Assignment Operator (=)
// Used to assign an initial value or update a variable’s value.

let initialValue = 10; // Assigning a number literal
console.log(“Initial value:”, initialValue); // Output: 10

let updatedValue; // Declaring a variable
updatedValue = 50; // Assigning a value later
console.log(“Updated value after assignment:”, updatedValue); // Output: 50

// Assigning the value of one variable to another
initialValue = updatedValue;
console.log(“Initial value after assigning updatedValue:”, initialValue); // Output: 50

// Assignment can be used on object properties (lvalues)
let myObject = { score: 0 };
myObject.score = 100;
console.log(“Assigned value to object property:”, myObject.score); // Output: 100

// Assignment can be used on array elements (lvalues)
let myArray =[ ] ;
myArray[0] = 20;
console.log(“Assigned value to array element:”, myArray[0]); // Output: 20

// 2. Chaining Assignments (=)
// Assigning the same value to multiple variables
// Evaluates from right to left

let a, b, c;
a = b = c = 75;
console.log(“\nChained assignment (a = b = c = 75):”);
console.log(“a:”, a, “b:”, b, “c:”, c); // Output: a: 75 b: 75 c: 75

// 3. Compound Assignment Operators
// Combine an arithmetic operation and assignment
// Provide shorthand for operations like x = x + value

let total = 200;
console.log(“\nInitial total:”, total); // Output: 200

total += 50; // Equivalent to: total = total + 50
console.log(“After total += 50 (add and assign):”, total); // Output: 250

total -= 25; // Equivalent to: total = total – 25
console.log(“After total -= 25 (subtract and assign):”, total); // Output: 225

total *= 2; // Equivalent to: total = total * 2
console.log(“After total *= 2 (multiply and assign):”, total); // Output: 450

total /= 10; // Equivalent to: total = total / 10
console.log(“After total /= 10 (divide and assign):”, total); // Output: 45

total %= 7; // Equivalent to: total = total % 7
console.log(“After total %= 7 (modulus and assign):”, total); // Output: 3 (remainder of 45 / 7)

let powerBase = 4;
powerBase **= 3; // Equivalent to: powerBase = powerBase ** 3
console.log(“After powerBase **= 3 (exponentiate and assign: 4^3):”, powerBase); // Output: 64

// Compound assignment works for string concatenation with +=
let greeting = “Good”;
greeting += ” Morning”; // Equivalent to: greeting = greeting + ” Morning”
console.log(“String concatenation with +=:”, greeting); // Output: “Good Morning”

In conclusion, JavaScript relies on assignment operators to update variable and property values. To perform an operation and assign the result in one step, compound assignment operators like +=, -=, *=, /=, %=, and **= are used. Writing powerful JavaScript code requires understanding these operators and their side effects.