How variable memory allocation takes place inside function object in javascript?

Question

How are the variables scoped, initialized and used outside and inside javascript functions? I have written following code:

<div id="output">
</div>

<script>
var calculator = function()
{
        var x = 5;
        getx = function(){
           return x;
        }
        return { x:x, getx };
}();
document.getElementById("output").innerHTML = calculator.x;
calculator.x=10;
document.getElementById("output").innerHTML += " "+ calculator.x + " "+calculator.getx();
</script>

I read that in JS execution, code is first scanned for all the variables declaration and then functions are executed.

var x defined inside calculator object is value type as its integer.

getx being nested function and as per closure will have access to variable "x" even after return of getx is executed.

First output for calculator.x is as expected=5;

Second output for calculator.x is as expected=10; (as x is modified)

Third output for calculator.getx() is =5; (I am not able to understand this)

"x" being value type, it should have modified value inside function scope too and third output should be=10. What am I missing here?

What is expected result?

guest271314
– guest271314

2017-08-13 19:06:22 +00:00
Commented Aug 13, 2017 at 19:06 — guest271314
– guest271314, Commented Aug 13, 2017 at 19:06
10 as i have mentioned at last

Sahil Sharma
– Sahil Sharma

2017-08-13 19:07:01 +00:00
Commented Aug 13, 2017 at 19:07 — Sahil Sharma
– Sahil Sharma, Commented Aug 13, 2017 at 19:07
x is 5 within calculator immediately invoked function

guest271314
– guest271314

2017-08-13 19:08:18 +00:00
Commented Aug 13, 2017 at 19:08 — guest271314
– guest271314, Commented Aug 13, 2017 at 19:08

marvel308 · Accepted Answer · 2017-08-13 19:40:41Z

1

calculator.x = 10

adds x to the property of the function
calculator now refers to the object { x:x, getx } and the value you are changing is not the variable x but the property x of calculator
to access the change in property you will need to output this.x

<div id="output">
</div>

<script>
var calculator = function()
{
        var x = 5;
        getx = function(){
           return this.x;
        }
        return { x:x, getx };
}();
document.getElementById("output").innerHTML = calculator.x;
calculator.x=10;
document.getElementById("output").innerHTML += " "+ calculator.x + " "+calculator.getx();
</script>

To prove it look at the below code, clearly the variable x was not being changed, instead the property was being change which getx could not access

<div id="output">
</div>

<script>
var calculator = function()
{
        var x = 5;
        getx = function(){
           return x;
        }
        setx = function(a){
          x = a;
        }
        return { x:x, getx, setx };
}();
document.getElementById("output").innerHTML = calculator.x;
calculator.setx(10);
document.getElementById("output").innerHTML += " "+ calculator.x + " "+calculator.getx();
</script>

edited Aug 13, 2017 at 19:40

answered Aug 13, 2017 at 19:08

marvel308

10.5k3 gold badges24 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Sahil Sharma Over a year ago

probably this is something I am looking for, but didn't get how return x differs from return this.x?

marvel308 Over a year ago

x was being added to the property of calculator, but the x which getx() was accessing was the variable defined inside, you were changing the property but the variable remained unchanged

Sahil Sharma Over a year ago

I get the 2nd example where you are using set, but still not got the reason how its working in 1st example with this keyword.. how does this.x enables it to return back added property (i.e. x) value??

marvel308 Over a year ago

check ideone.com/q7DR5E, this shows the x that you were referring was actually the property of the object calculator and not the variable inside

marvel308 Over a year ago

return { x:x, getx } makes a property x for calculator since you are now referring to the object that is { x:x, getx }, the variable inside remains unchanged hence when you access it, it returns 5 but when you specifically set it to 10 using setx() in the 2nd example, then it changes

|

Collectives™ on Stack Overflow

How variable memory allocation takes place inside function object in javascript?

1 Answer 1

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related