Passing variables by reference in javascript - passing variables to external test in mocha

Question

I know that for primitive datatype passing by reference doesn't work in javascript, so a workaround is to wrap them in object. But consider a scenario where the initial state of the variable is null and then the variable is reassigned as an Object. Now if that varible is passed as an argument to an external function will it be passed as reference or will it end up being undefined inside the function.

For reference consider this usecase:

in a mocha test for Login endpoint

Method 1

describe('Login Endpoint Test', function(){
   let response = null;
   
   before('test pre-requisites', async function(){
      this.timeout(15000);
      response = await endpointCall(); //returns response Object
   });   

   it('simple endpoint test', function(){
      //response is availble here.
      response.should.have.status(200);
   });
  
   /*Importing an external testfile.*/
   require('./externalTest.spec.js')(response);
})

in externalTest.spec.js

module.exports = (response) => {
   it('external test', function(){
     console.log(response);  // null;
   })
}
   

If i wrap the response in an Object it works. Why is it so?

Method 2

If i wrap the response in an Object it works. Why is it so?

describe('Login Endpoint Test', function(){
   let data = {response: null};
   
   before('test pre-requisites', async function(){
      this.timeout(15000);
      data.response = await endpointCall(); //returns response Object
   });   

   it('simple endpoint test', function(){
      //response is availble here.
      data.response.should.have.status(200);
   });
  
   /*Importing an external testfile.*/
   require('./externalTest.spec.js')(data);
})

in externalTest.spec.js

module.exports = (data) => {
   it('external test', function(){
     console.log(data.response);  // response object;
   })
}
   

NOTE: Pls let me know if you find there is a lack of clarity. Thanks in advance.

Answer 1

The most immediate comparison I can make is PHP, which has some pretty huge differences from Javascript in this regard.

First of all, in PHP if you pass an array to a function, and change the array in the function, the original array doesn't actually change. The array is fully copied by value if you pass it in:

$arr = [];
func($arr);
var_dump($arr);

function func($arr) {
   $arr['key'] = 'value';
}

When you var_dump($arr) in PHP, you might expect it to have 'key' => 'value', but in PHP this isn't the case.

The same example in javascript looks like this:

let obj = {};
func(obj);
console.log(obj);

function func(obj) {
   obj['key'] = 'value';
}

And you can see, unlike PHP's array example, directly changing the object in Javascript changes it in both places.

So that brings us to the next big difference - PHP has a full pass-by-reference functionality, like so:

$arr = [];
func($arr);
var_dump($arr);

function func(&$arr) {
   $arr['key'] = 'value';
}

The & symbol in PHP means pass by reference, so in that example in PHP you would see key => value when you var_dump($arr).

However, this & symbol doesn't actually make PHP's behaviour with this variable identical to Javascripts behaviour. Because in PHP, it is a TRUE pass by reference, you can do this:

$arr = [];
func($arr);
var_dump($arr);

function func(&$arr) {
   $arr = 2;
}

So when you var_dump($arr), it would output 2, because the func is actually changing what $arr means at a fundamental level.

In comparison in Javascript, the func function cannot change what obj actually MEANS, all it can do is mutate what you sent it. So if you try to do the same in javascript:

let obj = {};
func(obj);
console.log(obj);

function func(obj) {
   obj = 2;
}

... then when you console.log(obj) you'll still get the empty object you started with. func cannot change what the outside world thinks obj refers to by using the = symbol.

Answer 2

Actually i think i have some idea on how this works.

Why method #1 failed ?

When the external function is required and invoked we pass the response variable to it. This response variable currently has the value null. And before function reassigns response variable to a new response Object it is actually not updated in the execution context of the exported function, since null is one of the scalar primitive values (Number, String, Boolean, undefined, null, Symbol). For scalar primitive values javascript use a stack memmory structure and on every reassignment we will add a new value on top of the stack and the varible is pointed to it. So the exported function doesnt know about the new value pushed to the stack but only a refernce to the old value.

Why method #2 succeeded

Now when we wrap the response as an object we effectievly uses two memory structure one is the stack and the other is a heap. The original value of response is stored on heap and a refernce to this is maintained in the stack. So when the before function updates the key of the data Object (response),it wont actualy push a new value on top of the stack rather it updates in the heap, therby keeping the same refernce. And thus when the it inside the exported function executes it can find the original data.

Hope this helps.

Answer 3

I've ran your code and the problem is pretty straight forward. I'll annotate it with which lines run first for you to see the order of events

1 describe('Login Endpoint Test', function(){ 
   2 let data = null;
   
   3 before('test pre-requisites', async function(){
      8 this.timeout(15000);
      9 data.response = await endpointCall(); //returns response Object
   });   

   4 it('simple endpoint test', function(){
      //response is availble here.
      10 data.response.should.have.status(200);
   });
  
   /*Importing an external testfile.*/
   5 require('./externalTest.spec.js')(data);
})

// different file
6 module.exports = (data) => {
   7 it('external test', function(){
     11 console.log(data.response);
   })
}

The important bits here are (2) and (5). You're saying data is null, and then require expternalTest.spec.js and pass it whatever data is (which is null).

So eternalTest.spec.js just gets data as null immediately, and it will never and can never have anything else. You've passed it null, so that's it, that's what it is.

In your second method, the execution order is exactly the same, but you haven't passed it null, you've passed it the object. So of course as the object changes (and the response property gets a value), what expternalTest.spec.js sees as data changes to, because data is that object!