The assignment operator in JavaScript stores and updates values. It helps you hold data in a variable and change it when needed.
Table of Content
Understand the Assignment Operator in JavaScript
An assignment operator sets a value inside a variable. It also updates that value later in your code.
JavaScript starts with the basic = but adds more types. You can add, subtract, or combine logic with assignments.
They reduce steps. You do more with fewer lines. They make your code faster to write and easier to read.
The assignment operator comes between a variable and a value.
let x = 5;This line puts the number 5 inside the variable x. The equal sign does not mean equality. It means the value on the right goes into the variable on the left.
You assign when you first declare a variable. You can also reassign after that.
let name = "Ali";
name = "Zee";First, name holds “Ali”. Then you change it to “Zee”. JavaScript lets you replace the old value at any time.
For example:
let a = 10;
let b = 5;
a = b;Here, a gets the value inside b. So a now holds 5.
You copy values from one variable into another. The right side always controls what happens.
We can categorize them into 4 types:
- Basic Assignment Operator
- Compound Assignment Operators
- Bitwise Assignment Operators
- Logical Assignment Operators (ES2021+)
Let’s take each one in-depth.
Basic Assignment Operator in JavaScript
You write the variable name first, then the =, then the value. JavaScript reads it right to left. It sets the variable on the left to the value on the right.
Here is a simple example:
let name = "John";
let age = 30;
let active = true;You can also store the outcome of an expression in a variable:
let total = 5 + 3; // total is 8In the next part, you will see how JavaScript combines this basic operator with math to form arithmetic assignment operators.
Compound Assignment Operators
Addition assignment ( += ) adds the right value to the left variable. It stores the result in the same variable.
let x = 5;
x += 3; // x is now 8This adds 3 to x. The result replaces the old value of x.
Subtraction assignment ( -= ) subtracts the right value from the left variable. It stores the result back in the same variable.
let x = 10;
x -= 4; // x is now 6This takes away 4 from x. The new value becomes 6.
Multiplication assignment ( *= ) multiplies the left variable by the right value. It updates the variable with the new product.
let x = 3;
x *= 5; // x is now 15This multiplies 3 by 5 and sets x to the result.
Division assignment ( /= ) divides the left variable by the right value.
Saves the result in the same variable.
let x = 20;
x /= 4; // x is now 5This divides 20 by 4 and stores 5 in x.
Remainder assignment ( %= ) finds the remainder after division.
Assigns that remainder to the variable.
let x = 10;
x %= 3; // x is now 1This divides 10 by 3. The leftover 1 becomes the new value of x.
Bitwise Assignment Operators
AND assignment ( &= ) compares each bit of both values. It keeps the bit if both are 1.
let x = 6; // 110
x &= 3; // 011 → x is now 2 (010)It compares bits of 6 and 3. Only the matching 1-bits stay.
OR assignment ( |= ) Compares each bit of both values. It makes the bit if at least one is 1.
let x = 6; // 110
x |= 3; // 011 → x is now 7 (111)It combines bits of 6 and 3. Any 1 stays, even if only in one.
XOR assignment ( ^= ) compares each bit of both values and keeps the bit if the bits are different.
let x = 6; // 110
x ^= 3; // 011 → x is now 5 (101)Bits that differ become 1. Matching bits become 0.
Left shift assignment ( <<= ) shifts bits to the left. It fills new bits with 0 on the right.
let x = 3; // 011
x <<= 2; // x is now 12 (1100)Each left shift multiplies by 2. Two shifts give 3 * 4 = 12.
Right shift assignment ( >>= ) shifts bits to the right and keeps the sign bit on the left.
let x = -8; // in binary: ...11111000
x >>= 2; // x is now -2It shifts right and keeps the sign. This works for negative numbers.
Unsigned right shift assignment ( >>>= ) shifts bits to the right.
Fills the left with 0, no sign bit.
let x = -8;
x >>>= 2; // x is now 1073741822This treats x as unsigned. It shifts and fills with 0 on the left.
Logical Assignment Operators (ES2021+)
Logical AND assignment ( &&=) Only assigns if the left side is true and used to update values that are already set.
let isAdmin = true;
isAdmin &&= 'full access'; // isAdmin is now 'full access'If isAdmin is true, it changes the value. If false, it stays as is.
Logical OR assignment ( ||=) Only assigns if the left side is false. It is used to set default values.
let userName = '';
userName ||= 'Guest'; // userName is now 'Guest'Since userName is empty, it gets the default value.
Nullish coalescing assignment ( ??= ) only assigns if the left side is null or undefined. It is useful when 0 or ” are valid values.
let score = 0;
score ??= 10; // score stays 0score is not null or undefined, so the value does not change.
Wrapping Up
In this article you learned how assignment operators store and update values, and how to use each type with clear examples. You also saw how they speed up logic and simplify code.
Here is a quick recap:
=puts a value in a variable+=,-=,*=,/=,%=change a number directly&=,|=,^=,<<=,>>=,>>>=use bit math&&=,||=,??=handle logic and fallback values- Each one saves time and avoids extra steps
Thank you for reading. To read more JavaScript tutorials, click here.
FAQs
What is the assignment operator in JavaScript?
What does += do in JavaScript?
When should I use logical assignment operators?
What is the use of ??=?
What is the difference between |= and ||=?
Similar Reads
Arrays often hold other arrays. This happens with API responses, form data, or nested objects. These layers add extra steps…
JavaScript Objects hold values as key and value pairs, and they help you store and access data. Understand the JavaScript…
JavaScript added Math.cbrt to solve cube roots. Before that, developers used custom code or Math.pow with 1/3. It works with…
JavaScript gives you several ways to round numbers, but not all of them round the same way. If you want…
JavaScript toReversed returns a new array with the reversed order of its elements. It does not change the original array…
Bitwise operators work with binary data at the bit level in JavaScript. They process numbers in binary form and return…
The Math.acos function finds the angle in radians from a cosine value in JavaScript. It gives a value between 0…
JavaScript moves fast, and new features come. Some browsers do not support these features and cause issues for users. Developers…
The JavaScript console is a tool in web browsers that helps you print the result to the web browser. It…
Arrow function gives you short code and keeps this in the right scope in JavaScript. Understand the Arrow Function in…