JavaScript, Deconstructed: Assignment Operator (=)

What are operators in JavaScript?

The main purpose of operators in JavaScript is to perform operations of various kinds on variables and their respective values by allocating and combining data with specific instructions.

This article explores the different ways in which the assignment operator can be used to perform different kinds of operations and also how the JavaScript engine( V8 from Google) handles such operations.

In JavaScript, variables can also refer to object properties.

//Variable
let redCard 
//Object property 
myBanana.colour

Both redCard and myBanana.colour are essentially the same.

Primary Use

The assignment operator is mainly used to assign values to variables.

Const randomNumber = 23

Here, the number on the right also known as the right operand is assigned to the left operand variable randomNumber after the variable is declared.

However, the simple act of declaring a variable, doesn't include the use of the assignment operator.

//This declares myVan without initializing it
let myVan;
//This will output undefined since no value has been assigned to myVan
console.log(myVan)
//This assigns the string "Stolen" to myVan
myVan = "Stolen"
//This will output "Stolen" since myVan now has a value
console.log(myVan)

How V8 handles assignment operator in memory

Any time you initialize a variable(for example const randonNumber = 23 )the following actions take place in memory:

Declaration: The JavaScript engine has been programmed to recognize const randomNumber as a declaration(const being the identifier) and so when it does, it will allocate some space in memory for the variable randomNumber .
Initialization: Because const requires an initial value, the number 23 is immediately stored in the memory space allocated to randomNumber since a const variable cannot be declared without being initialized.
```
 //This will throw an error
 const randomNumber;
```
Storage: Since the value 23 is a primitive number it is stored directly in memory. An object however will have its reference stored in memory and it's contents stored elsewhere.

**Compound assignment operators(+=,-=,*=,/=)**

Apart from assigning values to variables, the assignment operator can also be used together with other operators(-+*/) to perform an operation on a variable, then assign the result of said operation back to a variable.

Compound assignment operators allow programmers to express a binary operation together with the assignment operator, in a compact syntax.

Addition assignment(+=): This operator performs an addition operation on a variable and then assigns the result back to that same variable.
```
 //Assigns 2 to smallNumber
 let smallNumber = 2
 //Adds 3 to smallNumber and assigns the result to smallNumber
 smallNumber += 3
 //This outputs 5
 console.log(smallNumber)
```
From the above example smallNumber += 3 is the same as smallNumber = smallNumber + 3
Subtraction assignment(-=): This operator performs a subtraction operation on a variable and then assigns the result to the same variable.
```
 //Assigns 7 to smallNumberTwo
 let smallNumberTwo = 7

 /* Subtracts 3 from smallNumberTwo and 
 assigns the result to smallNumberTwo*/
 smallNumberTwo -= 3

 //This outputs 4
 console.log(smallNumberTwo)
```
From the above example smallNumberTwo -= 3 is the same as smallNumberTwo = smallNumberTwo - 3
Multiplication Assignment(*=): This operator performs a multiplication operation on a variable and then assigns the result to the same variable.
```
 //Assigns 5 to smallNumberThree
 let smallNumberThree = 5

 /* Multiplies smallNumberThree by 4 and 
 assigns the result to smallNumberThree*/
 smallNumberThree *= 4

 //This outputs 20
 console.log(smallNumberThree)
```
From the above example smallNumberThree *= 4 is the same as smallNumberThree = smallNumberThree * 4

Division Assignment (/=): This operator performs a division operation on a variable and then assigns the result to the same variable.

 //Assigns 9 to smallNumberFour
 let smallNumberFour = 9

 /* Divides smallNumberFour by 3 and 
 assigns the result to smallNumberFour*/
 smallNumberFour /= 3

 //This outputs 3
 console.log(smallNumberFour)

How V8 performs compound assignment operations in memory

The following steps show what happens in memory when we perform compound assignment operations. The following code is used to explain the steps.

Let shoeSize = 9
shoeSize += 3

Addition Step: When the operation is performed(shoeSize + 3), V8 first retrieves the value of shoeSize from memory, then adds 3 to it. This operation does not change the original value of shoeSize in memory; instead, it creates a new value in a temporary location in memory.
Assignment Step: The assignment operation will then store the result back into the original memory location associated with shoeSize by updating it, provided it was previously declared with let or var .

Declaring a variable using const means shoeSize cannot be reassigned which is what happens during compound assignment operations (a new value is assigned after the compound assignment operation has taken place)

If you're familiar with big O notation and time complexity keep reading if you're not I suggest you save this section for later.

Time complexity of assignment operations

The time complexity of assignment operations, is O(1) which means if you’re assigning one value to a variable, one element in an array, or one property in an object, the operation completes in one single step. The time it takes does not increase with the size of the data type. The same applies to compound assignment operations involving primitive data types.

However the time complexity of assigning a variable to more than one element in an array and an object has a time complexity of O(n) since the time it takes to run the algorithm grows linearly with the size of the input.

//This has a time complexity of O(1)
let aNumber = 1 
//This has a time complexity of O(1)
let anotherNumber =3488577383772
//This has a time complexity of O(n)
let array = [1,2,3,4,5,6]

In conclusion

JavaScript assignment operators play a crucial role when it comes to data storage and manipulation in web development and so are an essential tool for the software engineer.

JavaScript engine is a program that reads and executes JavaScript code in the browser and sometimes in the backend by translating JavaScript code into machine code. Nodejs runs JavaScript code in the backend with the help of Google's V8 engine.

Mozilla Firefox uses its own engine called SpiderMonkey.

Ofoe Nelson's Blog