How assignment works in JavaScript?

Question

I was asked what happens when we assign a value to a variable?

Meaning, let's say we have a variable data and we assign some value to it,

var data = 5

What actually happens in the background? What is the initial value of data and what happens, how value is assigned?

I tried to google articles for it, but I couldn't find anything related to working, may be I was not using correct keywords. If anyone have any article that I could follow or provide me some explanation that would be really great.

Answer 1

Because you are using var, the variable named data is first created by the interpreter at the start of the containing function block and its initial value at that point is undefined. This concept of moving the declaration to the start of the function block is called variable hoisting. This data variable will be a piece of memory internal to the interpreter. It will probably be allocated within a stack frame object.

A reference on hoisting:

Hoisting on MDN

Basics of hoisting in Javascript

Note also that functions declared like this:

function x() {
    // code here
}

Are also hoisted so two functions in the same scope can call each other without worrying about declaration order.

When the interpreter gets to the point of executing the code where the declaration/assignment line is located, it will assign the value of 4 to the variable.

So, if your code was like this:

function myFunction() {
    var sum = 3 * 4;
    console.log(sum * 3);
    var data = 5;
    console.log(sum * data);
}

myFunction();

Then, what the interpreter actually does internally is this:

function myFunction() {
    var sum = undefined, data = undefined;
    sum = 3 * 4;
    console.log(sum * 3);
    data = 5;
    console.log(sum * data);
}

myFunction();

In fact, you can even write this (somewhat ugly) code:

function myFunction() {
    var sum = 3 * 4;
    data = 6;               // this will not be an error
    console.log(data);
    console.log(sum * 3);
    var data = 5;           // the declaration of data is hoisted
    console.log(sum * data);
}

myFunction();

because, this is how the interpreter handles that:

function myFunction() {
    var sum = undefined, data = undefined;
    sum = 3 * 4;
    data = 6;               // this will not be an error
    console.log(data);
    console.log(sum * 3);
    data = 5;
    console.log(sum * data);
}

myFunction();

---

Note that let and const are block-scoped, not function-scoped and, if you try to reference them before their declaration, it is an error whereas var lets you do that. var is somewhat legacy and there is rarely (if ever) a reason to use var any more. It is safer to code with let and const instead. If you want function scope, you can still put your let or const at the top level of your function. But, you should generally declare your variables within the block that they are used/needed (restrict the scope to only what is needed).