JavaScript object update behavior (weird ?)

Question

I am learning Javascript. Trying to understand code,

function foo (){
   var a = b = {name: 'Hai'};
   document.write(a.name +'<br>');
   document.write(b.name +'<br>');
    
   a.name = 'Hello';
     
   document.write(a.name +'<br>');
   document.write(b.name +'<br>');
}

The output is as follows,

Hai
Hai
Hello
Hello

While it is true that the assignment takes from Right to Left, the updates are impacting on both directions. Is this how it works? Can someone explain this?

in javascript, objects and arrays are passed by reference. – Dellirium Apr 12 '18 at 08:32 — Dellirium, Apr 12 '18 at 08:32

31piy · Accepted Answer · 2018-04-12T08:48:28.650

6

This is because a and b both refer to the same object {name: 'Hai'}. When you change one, the changes will be reflected in both the variables.

var a = b = {name: 'Hai'};

The above statement is essentially similar to this one (except what @NinaScholz pointed in her answer):

var b = {name: 'Hai'};
a = b;

This way, a and b both point to the same object in memory, and hence, update in one reflects to the other automatically.

Read more about how an object works in the documentation here. To read more about objects and references, refer to this link.

edited Apr 12 '18 at 08:48

answered Apr 12 '18 at 08:30

31piy

23,323
6
47
67

the order is a bit different, because `b` is assigned first and then `a`. this requires adeclared variable `b` or in non stric mode, the the variable becomes globally declared by use. – Nina Scholz Apr 12 '18 at 08:47

Nina Scholz · Answer 2 · 2018-04-12T08:42:34.453

It's a bad style (and does not work) to try to declare variables in one joint assingment, because the inner variable is declared in global scope, not as local variable.

function foo (){
   var a = b = {name: 'Hai'};
   document.write(a.name +'<br>');
   document.write(b.name +'<br>');
    
   a.name = 'Hello';
     
   document.write(a.name +'<br>');
   document.write(b.name +'<br>');
}

foo();
console.log(b);

In strict mode, you get an error, because you use a variable without declaring.

'use strict';

function foo (){
   var a = b = {name: 'Hai'};
   document.write(a.name +'<br>');
   document.write(b.name +'<br>');
    
   a.name = 'Hello';
     
   document.write(a.name +'<br>');
   document.write(b.name +'<br>');
}

foo();
console.log(b);

The real order of execution is

var a = (b = {name: 'Hai'});

first evaluate the inner expression and then the outer assingment

JavaScript object update behavior (weird ?)

2 Answers2