JavaScript Assignment Operators

JavaScript assignment operators are used to assign values to variables. The assignment operator = is the most commonly used operator, but JavaScript also provides compound assignment operators such as +=, -=, *=, /=, and %= to perform mathematical operations and update variable values in a shorter way.

In this tutorial, you will learn how JavaScript assignment operators work, how to use each operator with examples, and when to use them in your programs.

What Are Assignment Operators in JavaScript?

Assignment operators assign a value to a variable or update the value that a variable already contains.

For example, you can use the assignment operator = to store a number in a variable.

let number = 10;

console.log(number);

Output:

10

In this example, the assignment operator = assigns the value 10 to the variable number.

You can also update the variable using a compound assignment operator.

let number = 10;

number += 5;

console.log(number);

Output:

15

Here, number += 5 adds 5 to the existing value of number and assigns the result back to the same variable.

Types of JavaScript Assignment Operators

JavaScript supports several assignment operators. The following table explains the basic assignment operator and the compound assignment operators covered in this tutorial.

Operator	Example	Equivalent expression
=	x = 10	Assigns 10 to x
+=	x += 5	x = x + 5
-=	x -= 5	x = x - 5
*=	x *= 5	x = x * 5
/=	x /= 5	x = x / 5
%=	x %= 5	x = x % 5

Let’s understand each assignment operator with practical examples.

The Assignment Operator (=)

The assignment operator = assigns a value to a variable. It can also assign the result of an expression to a variable.

Example of the Assignment Operator

let name = "Karim";
let age = 22;
let price = 150;

console.log(name);
console.log(age);
console.log(price);

Output:

Karim
22
150

In this example, the assignment operator stores a string in name, an integer in age, and a number in price.

Assigning an Expression to a Variable

You can also use = to assign the result of a mathematical expression.

let a = 10;
let b = 20;
let total = a + b;

console.log(total);

Output:

30

JavaScript evaluates a + b first and assigns the result, 30, to total.

Important: The assignment operator = is different from the equality operator == and the strict equality operator ===. The = operator assigns a value, while == and === compare values.

The Addition Assignment Operator (+=)

The addition assignment operator += adds a value to the current value of a variable and assigns the result back to that variable.

It is equivalent to writing variable = variable + value.

Example of the Addition Assignment Operator

let number = 10;

number += 5;

console.log(number);

Output:

15

The statement number += 5 is equivalent to:

number = number + 5;

JavaScript adds 5 to the existing value of number, which is 10. The result, 15, is then assigned to number.

Using += with Strings

The += operator can also concatenate strings.

let message = "Hello";

message += " World!";

console.log(message);

Output:

Hello World!

In this example, JavaScript appends " World!" to the existing string.

The += operator is useful when you want to increase a numeric value or build a string gradually.

The Subtraction Assignment Operator (-=)

The subtraction assignment operator -= subtracts a specified value from the current value of a variable and assigns the result back to it.

It is equivalent to writing variable = variable - value.

Example of the Subtraction Assignment Operator

let balance = 1000;

balance -= 250;

console.log(balance);

Output:

750

Here, the initial balance is 1000. The statement balance -= 250 subtracts 250 from the balance and stores the result, 750, in the same variable.

Practical Example

Suppose a shopping application tracks the number of products available in stock.

let stock = 50;

stock -= 8;

console.log(stock);

Output:

42

The stock decreases from 50 to 42 after eight products are removed.

The -= operator is commonly used when reducing a balance, decreasing a counter, or updating a quantity.

The Multiplication Assignment Operator (*=)

The multiplication assignment operator *= multiplies the current value of a variable by a specified value and assigns the result back to the variable.

It is equivalent to writing variable = variable * value.

Example of the Multiplication Assignment Operator

let number = 6;

number *= 4;

console.log(number);

Output:

24

In this example, JavaScript multiplies 6 by 4 and assigns the result, 24, to number.

The statement:

number *= 4;

is equivalent to:

number = number * 4;

Practical Example

Suppose you want to calculate the total cost of several identical products.

let price = 200;

price *= 3;

console.log(price);

Output:

600

The original price is 200. Multiplying it by 3 gives a total of 600.

The *= operator is useful for multiplication-based calculations, scaling values, and updating numeric variables.

The Division Assignment Operator (/=)

The division assignment operator /= divides the current value of a variable by a specified value and assigns the result back to the variable.

It is equivalent to writing variable = variable / value.

Example of the Division Assignment Operator

let number = 100;

number /= 4;

console.log(number);

Output:

25

Here, JavaScript divides 100 by 4 and assigns the result, 25, to number.

Division with Decimal Results

JavaScript numbers can contain decimal values. Therefore, division does not always produce a whole number.

let total = 25;

total /= 2;

console.log(total);

Output:

12.5

In this example, dividing 25 by 2 produces 12.5.

Note: Dividing a JavaScript number by zero using /= produces Infinity for a positive nonzero number or -Infinity for a negative nonzero number. It does not automatically throw a division-by-zero error.

The /= operator is useful for splitting expenses, calculating averages, and dividing numeric values.

The Modulus Assignment Operator (%=)

The modulus assignment operator %= calculates the remainder after dividing the current value of a variable by a specified value. It then assigns that remainder back to the variable.

It is equivalent to writing variable = variable % value.

Example of the Modulus Assignment Operator

let number = 17;

number %= 5;

console.log(number);

Output:

2

In this example, 17 divided by 5 gives a quotient of 3 and a remainder of 2. The remainder is assigned to number.

The statement:

number %= 5;

is equivalent to:

number = number % 5;

Checking Even and Odd Numbers

The modulus operator is often used to determine whether a number is even or odd. The following example demonstrates the same remainder calculation using %=.

let number = 14;

number %= 2;

if (number === 0) {
    console.log("Even number");
} else {
    console.log("Odd number");
}

Output:

Even number

The expression number %= 2 stores the remainder of 14 / 2, which is 0. The condition then identifies the number as even.

Important: The %= operator updates the original variable. If you need to preserve the original number, store the remainder in a separate variable instead.

Difference Between Assignment and Compound Assignment Operators

The basic assignment operator = assigns a value directly. Compound assignment operators perform an operation and assign the result back to the variable.

Consider the following examples.

let a = 10;

a = a + 5;

console.log(a);

Output:

15

You can achieve the same result with the addition assignment operator.

let a = 10;

a += 5;

console.log(a);

Output:

15

Both examples produce the same result. However, += provides a shorter way to update the existing value.

The same principle applies to -=, *=, /=, and %=.

JavaScript Assignment Operators Example

The following program demonstrates all six assignment operators in one example.

let number = 20;

console.log("Initial value:", number);

number += 10;
console.log("After +=:", number);

number -= 5;
console.log("After -=:", number);

number *= 2;
console.log("After *=:", number);

number /= 5;
console.log("After /=:", number);

number %= 3;
console.log("After %=:", number);

Output:

Initial value: 20
After +=: 30
After -=: 25
After *=: 50
After /=: 10
After %=: 1

How the Program Works

• Initially, number is assigned the value 20.
• number += 10 adds 10, producing 30.
• number -= 5 subtracts 5, producing 25.
• number *= 2 multiplies the current value by 2, producing 50.
• number /= 5 divides the current value by 5, producing 10.
• number %= 3 stores the remainder of 10 / 3, which is 1.

Each operation uses the result of the previous operation because all the statements update the same variable.

Common Mistakes When Using Assignment Operators

Understanding a few common mistakes will help you write more reliable JavaScript code.

Confusing = with == and ===

The assignment operator = assigns a value, whereas == and === compare values.

let number = 10;

console.log(number === 10);

Output:

true

Use = when assigning a value and === when comparing values for strict equality.

Forgetting That the Variable Changes

Compound assignment operators modify the original variable.

let number = 10;

number += 5;

console.log(number);

The output is 15, not 10, because number has been updated.

If you need the original value later, save it in another variable before modifying it.

Expecting Modulus to Return the Quotient

The % operator returns the remainder, not the quotient.

let number = 17;

number %= 5;

console.log(number);

The output is 2, because 17 divided by 5 leaves a remainder of 2.

Using an Uninitialized Variable

Declaring a variable with let without assigning a value gives it the value undefined.

let number;

number += 5;

console.log(number);

Output:

NaN

The operation attempts to add 5 to undefined, producing NaN (Not-a-Number).

Initialize the variable with a suitable numeric value before using arithmetic assignment operators.

Frequently Asked Questions

What are assignment operators in JavaScript?

Assignment operators assign values to variables or update existing variable values. Examples include =, +=, -=, *=, /=, and %=.

What is the difference between = and += in JavaScript?

The = operator assigns a value directly to a variable. The += operator adds a value to the existing variable value and assigns the result back to that variable.

For example, number = 5 assigns 5, whereas number += 5 increases the existing value by 5.

What does the -= operator do in JavaScript?

The -= operator subtracts a specified value from a variable’s current value and stores the result in the same variable.

For example, if number is 20, then number -= 5 changes its value to 15.

What is the difference between *= and /=?

The *= operator multiplies the current value by another value, while /= divides the current value by another value. Both operators assign the result back to the original variable.

What does the %= operator return?

The %= operator assigns the remainder of a division to the original variable. For example, number = 17; number %= 5; leaves number with the value 2.

Can assignment operators be used with strings?

Yes. The += operator can append strings together.

For example, let message = "Hello"; message += " World"; produces "Hello World".

Are compound assignment operators shorter than regular assignments?

Yes. Compound assignment operators provide a shorter way to perform an operation and assign the result to the same variable. For example, number *= 2 is equivalent to number = number * 2 for an ordinary numeric variable.

Which assignment operator is used to assign a value?

The = operator is used to assign a value to a variable. For example, let age = 22; declares the variable age and assigns it the value 22.