Assignment Operators(JavaScript)

05/06/2023

Japanese version.

Assignment operators are used not only to assign a value to a variable, but also to compute a new value based on the current value of the variable. For example, the addition assignment operator += adds another value to the value of a variable and assigns the result to the variable. Similarly, the subtraction assignment operator -= subtracts another value from the value of a variable and assigns the result to the variable.

How to use

= Assignment

The = operator is the most basic assignment operator, and is used to assign the value on the right-hand side to the variable on the left-hand side.

let x = 1;
console.log(x); // 1

x = 2;
console.log(x); // 2

In this example, we use the = operator to assign the value 1 to the variable x. We then assign the value 2 to x and print its value to the console using the console.log function.

The assignment operator can not only assign a value to a variable, but it can also calculate a new value based on the current value of the variable. For example, you can add 1 to the current value of a variable x and assign the result back to x using the following code:

let x = 1;
x = x + 1;

console.log(x); // 2

In this example, the expression x + 1 adds 1 to the current value of x, and the result is assigned back to x using the = assignment operator.

You can also use the = assignment operator to assign the same value to multiple variables. For example, you can use the following code to assign the value 1 to the variables x, y, and z:

let x, y, z;
x = y = z = 1;

console.log(x); // 1
console.log(y); // 1
console.log(z); // 1

In this example, the = operator is used to assign the value 1 to the variables x, y, and z in a single statement.

+= Addition assignment

The += operator in JavaScript is a compound assignment operator that adds the value on the right-hand side to the value of the variable on the left-hand side, and then assigns the result back to the variable on the left-hand side.

Here's an example of using the += operator:

let x = 5;
x += 2; // equivalent to x = x + 2

console.log(x); // 7

In this example, we first assign the value 5 to the variable x. We then use the += operator to add 2 to the current value of x. Finally, we print the value of x to the console using the console.log function. In this case, the output value will be 7.

The += operator can also be used with strings. When used with strings, the += operator concatenates the string on the right-hand side with the string value of the variable on the left-hand side.

let greeting = "Hello, ";
greeting += "world!";

console.log(greeting); // "Hello, world!"

In this example, we first assign the string "Hello, " to the variable greeting. We then use the += operator to concatenate the string "world!" to the current value of greeting. Finally, we print the value of greeting to the console using the console.log function. In this case, the output value will be "Hello, world!".

-= Subtraction assignment

The -= operator in JavaScript is a compound assignment operator that subtracts the value on the right-hand side from the value of the variable on the left-hand side, and then assigns the result back to the variable on the left-hand side.

Here's an example of using the -= operator:

let x = 10;
x -= 3; // equivalent to x = x - 3

console.log(x); // 7

In this example, we first assign the value 10 to the variable x. We then use the -= operator to subtract 3 from the current value of x. Finally, we print the value of x to the console using the console.log function. In this case, the output value will be 7.

The -= operator, like other compound assignment operators, can be used with not only numbers but also strings. However, when used with strings, an error will occur.

let str = "Hello, ";
str -= "world!";

console.log(str); // NaN

In this example, we first assign the string "Hello, " to the variable str. We then use the -= operator to subtract the string "world!" from the current value of str. However, you cannot subtract one string from another string, so the result will be NaN (Not a Number).

Therefore, the -= operator should be used with numbers only.

*= Multiplication assignment

The *= operator in JavaScript is a compound assignment operator that multiplies the value of the variable on the left-hand side by the value on the right-hand side, and then assigns the result back to the variable on the left-hand side.

Here's an example of using the *= operator:

let x = 5;
x *= 3; // equivalent to x = x * 3

console.log(x); // 15

In this example, we first assign the value 5 to the variable x. We then use the *= operator to multiply the current value of x by 3. Finally, we print the value of x to the console using the console.log function. In this case, the output value will be 15.

The *= operator, like other compound assignment operators, can be used with not only numbers but also strings. However, when used with strings, an error will occur.

let str = "Hello, ";
str *= 3;

console.log(str); // NaN

In this example, we first assign the string "Hello, " to the variable str. We then use the *= operator to repeat the string "Hello, " three times. However, you cannot multiply a string by a number, so the result will be NaN (Not a Number).

Therefore, the *= operator should be used with numbers only.

/= Division assignment

The /= operator in JavaScript is a compound assignment operator that divides the value of the variable on the left-hand side by the value on the right-hand side, and then assigns the result back to the variable on the left-hand side.

Here's an example of using the /= operator:

let x = 10;
x /= 2; // equivalent to x = x / 2

console.log(x); // 5

In this example, we first assign the value 10 to the variable x. We then use the /= operator to divide the current value of x by 2. Finally, we print the value of x to the console using the console.log function. In this case, the output value will be 5.

The /= operator, like other compound assignment operators, can be used with not only numbers but also strings. However, when used with strings, an error will occur.

let str = "Hello, ";
str /= 2;

console.log(str); // NaN

In this example, we first assign the string "Hello, " to the variable str. We then use the /= operator to divide the string by 2. However, you cannot divide a string by a number, so the result will be NaN (Not a Number).

Therefore, the /= operator should be used with numbers only.

%= Remainder assignment

The %= operator in JavaScript is a compound assignment operator that finds the remainder of dividing the value of the variable on the left-hand side by the value on the right-hand side, and then assigns the result back to the variable on the left-hand side.

Here's an example of using the %= operator:

let x = 10;
x %= 3; // equivalent to x = x % 3

console.log(x); // 1

In this example, we first assign the value 10 to the variable x. We then use the %= operator to find the remainder of dividing the current value of x by 3. Finally, we print the value of x to the console using the console.log function. In this case, the output value will be 1.

The %= operator, like other compound assignment operators, can be used with not only numbers but also strings. However, when used with strings, an error will occur.

let str = "Hello";
str %= 3;

console.log(str); // NaN

In this example, we first assign the string "Hello" to the variable str. We then use the %= operator to find the remainder of dividing the string by 3. However, you cannot divide a string by a number, so the result will be NaN (Not a Number).

Therefore, the %= operator should be used with numbers only.

**= Exponentiation assignment

The **= operator in JavaScript is a compound assignment operator that raises the value of the variable on the left-hand side to the power of the value on the right-hand side, and then assigns the result back to the variable on the left-hand side.

Here's an example of using the **= operator:

let x = 2;
x **= 3; // equivalent to x = x ** 3

console.log(x); // 8

In this example, we first assign the value 2 to the variable x. We then use the **= operator to raise the current value of x to the power of 3. Finally, we print the value of x to the console using the console.log function. In this case, the output value will be 8.

The **= operator is a relatively new operator introduced in ES2016 and may not be supported in all browsers. Therefore, it's important to check for browser compatibility before using it.

In some cases, the **= operator may not be available in certain browsers, in which case you can use the Math.pow() method as a replacement.

let y = 2;
y = Math.pow(y, 3); // equivalent to y **= 3

console.log(y); // 8

In this example, we first assign the value 2 to the variable y. We then use the Math.pow() method to raise the current value of y to the power of 3. Finally, we print the value of y to the console using the console.log function. In this case, the output value will be 8.

Therefore, the **= operator is a relatively new operator, so it's important to be aware of browser compatibility issues and to have a fallback plan in case it's not supported.

<<= Left shift assignment

The <<= operator in JavaScript is a compound assignment operator that shifts the value of the variable on the left-hand side to the left by the number of bits specified on the right-hand side, and then assigns the result back to the variable on the left-hand side.

Here's an example of using the <<= operator:

let x = 5;
x <<= 2; // equivalent to x = x << 2

console.log(x); // 20

In this example, we first assign the value 5 to the variable x. We then use the <<= operator to shift the current value of x to the left by 2 bits. Finally, we print the value of x to the console using the console.log function. In this case, the output value will be 20.

>>= Right shift assignment

The >>= operator in JavaScript is a compound assignment operator that shifts the value of the variable on the left-hand side to the right by the number of bits specified on the right-hand side, and then assigns the result back to the variable on the left-hand side.

Here's an example of using the >>= operator:

let x = 20;
x >>= 2; // equivalent to x = x >> 2

console.log(x); // 5

In this example, we first assign the value 20 to the variable x. We then use the >>= operator to shift the current value of x to the right by 2 bits. Finally, we print the value of x to the console using the console.log function. In this case, the output value will be 5.

---

Links

JavaScript Articles