JavaScript Assignment Operators Tutorial

In this section, we will learn what the assignment operators are and how to use them in JavaScript.

Note: we’re assuming you’re familiar with JavaScript operators in general.

What Is Assignment Operator in JavaScript?

The assignment operators are used to store a value into a variable.

For example, the Assignment `=` operator will take an operand on its right side and stores that to the left operand (which should be a variable that points to a memory location that could be used to store a value).

List of assignment operators in JavaScript

In the table below, you can see the list of assignment operators:

Operator Symbol
Assignment operator =
Addition and Assignment operator +=
Subtraction and Assignment operator -=
Multiplication and Assignment operator *=
Division and Assignment operator /=
Exponentiation and Assignment Operator **=

Alright, now let’s see how each of these operators works:

JavaScript Assignment `=` Operator:

As mentioned at the beginning of this section, this operator is used to assign a value to a variable. The important note to remember is that this operator will replace the current content of the variable (if any) with the new value.

Assignment `=` Operator Syntax:

LeftOperand = RightOperand

Assignment `=` Operator Example:

Example:

let dVar = 2.033;

dVar = 1000.32;

Here first the value `2.033` is assigned to the `dVar` variable and after that, the current value was replaced by the value `1000.32` in the next statement.

Shorthand operators (AKA Compound operators):

The JavaScript shorthand operators, also known as compound operators, are basically a combination of two operators.

For example, we have an operator called (addition and assignment) `+=` operator. As the name of this operator suggests, it is a combination of addition `+` operator and the assignment `=` operator.

What these combination operators do is that they take a variable (as their left-hand operand) and a value (as their right-hand operand) and then assign this right-hand operand to the target variable without replacing the value that is currently in the target variable.

Basically, compound operators allow us to run an operation on the value of a variable in a shorter and quicker way.

For example, if you have a variable with a value in it and then use the assignment operator to assign a value there, the assignment `=` operator will completely replace that current value in the variable with the new value!

But using the compound operators, that current value in the variable will be involved in an operation and then the result of the operation will be sent to the target variable.

JavaScript Addition and Assignment `+=` Operator:

This operator means, add the current value in the target variable to the incoming value (on the right side of the operator). Basically, this is an addition as well as an assignment operator. So the current value of the target variable will be added to the new value.

Addition and Assignment `+=` Operator Syntax:

LeftOperand += RightOperand

Addition and Assignment `+=` Operator Example:

let vry = 100;

vry += 200;

Here, the current value of the variable `vry` is 100. But in the next statement, we’ve applied the `+=` operator on the `vry` variable and assigned the value 200. So the final value that will be in the `vry` variable is: 100 + 200 = 300;

Note: the example above could be rewritten as this:

let vry = 100;

vry = vry + 200;

Note: When using the `+=` operator, if the current value that is stored in the target variable is of type `String` and the value that we want to assign is of non-String type:

  1. The execution engine will coerce the new value into String by running the `ToString` operation on it. Note: please check the ToString operation section to learn how it works.
  2. After that, the result will be appended to the end of the current value in the variable.

Example: JavaScript addition operator and string value

const obj = {
  toString(){
    return " World!";
  }
}
let content = "Hello";
content += obj;
console.log(content);

Output:

Hello World!

Also, if we’re using one of the operators mentioned above and the value of the target variable is a value of type `Number` but the input is a non-Number type value:

Example: JavaScript addition operator and non-number value

const obj = {
  toString(){
    return " World!";
  }, 
  valueOf(){
    return 100;
  }
}
let content = 200;
content += obj;
console.log(content);

Output: 300

JavaScript Subtract and Assignment `-=` Operator:

When we want to subtract the current value of a variable from another value and assign the result to the variable itself, this operator can be used.

Subtract and Assignment `-=` Operator Syntax:

LeftOperand -= RightOperand

Subtract and Assignment `-=` Operator Example:

let vary = 50;

vary -= 30;

Here, we basically subtract the current value of the `vary` variable, which is 50 from the value 30. After that, the result is stored in the variable itself. So the final value becoems 20.

The example above could be rewritten like this:

let vary = 50;

vary = vary - 30;

The final value stored in the `vary` variable for both of the examples above is 20.

JavaScript Multiplication and Assignment `*=` Operator:

If the purpose of an operation is to multiply the current value of a variable to another value and then assign the result to the variable itself, this operator can be really useful.

Multiplication and Assignment `*=` Operator Syntax:

LeftOperand *= RightOperand

Multiplication and Assignment `*=` Operator Example:

let multiply = 10;

multiply *= 20;

The final value that will be stored in the `multiply` variable is 200. This is because the current value of the `multiply` variable is multiplied by the value `20` and the result stored to the variable itself.

The example above could be rewritten like this:

let multiply = 10;

multiply = multiply *20;

The result of this example is also 200.

JavaScript Division and Assignment `/=` Operator:

If we want to quickly divide the value of a variable by another value and assign the result to the variable itself, the `/=` operator is the perfect candidate.

Division and Assignment `/=` Operator Syntax:

LeftOperand /= RightOperand

Division and Assignment `/=` Operator Example:

let division = 100;

division /= 20;

The final value that will be stored in the `division` variable is 5.

What happened is that via `/=` operator, we divided the value stored in the `division` variable, which is 100 by the number 20 and assigned the result to the `division` variable.

The example above could be rewritten like this:

let division = 100;

division = division /20;

The result of this example is also 5.

Exponentiation and Assignment `**=` Operator:

The JavaScript exponentiation and assignment operator are used to raise the current value of a variable to the power of the value we set on the right side of this operator and then assign the result in the variable itself.

Exponentiation and Assignment `**=` Operator Syntax:

LeftOperand **= RightOperand

Exponentiation and Assignment `**=` Operator Example:

let val = 8;

val **=2;

console.log(val);

Output:

64

Leave a Reply