Why does the table changes data some time after the promise has already been fulfilled?

Question

When i run the code:

async function test(){
    let table=[];
    setTimeout(() => {
      table[0]='resolved';    }, 300);
    return table;
}

let result;

test().then(res=>{
  result=res;
  console.log("first  -" + result);
});

setTimeout(() => {
     console.log("second -" + result)
    }, 4000);

i expect to get:

first  - []
second - []

but the result is:

first  - []
second - ['resolved']

why does this happen? Since the function test has already been fulfilled when it gets to the first console.log, why does the result changes?

You are not awaiting for the timeout to conclude in the test() function. Check this [thread](https://stackoverflow.com/a/51939030/6262162). Basically, you need to wrap your timeout in a Promise. — SakisTsalk, Feb 17 '22 at 14:26
@SakisTsalk yes but exactly because i am not wrapping the timeout in a Promise and not awaiting for it to resolve, shouldn't the result always be an empty [ ]? Because the function test returns the table empty since the timeout hasn't been executed yet. — Chris Tsironis, Feb 17 '22 at 18:02

score 0 · Answer 1 · answered Feb 17 '22 at 22:53

JavaScript passes and returns by value, but the array [] is an object, and returning the result or assigning it to a variable doesn't make a copy of that object. All three names—table, res, and result—all refer to that same array object, so when the code in setTimeout changes the array, then you see it in result later on.

// primitives like numbers and strings pass by value
let string1 = "abc";
let string2 = string1;
string2 = "def";
console.log(string1 + " / " + string2); // abc / def

let number1 = 123;
let number2 = number1;
number2 = 456;
console.log(number1 + " / " + number2); // 123 / 456

// if you replace the reference to the array, then they coexist
let array1 = [234];
let array2 = array1;
array2 = [567];
console.log(array1 + " / " + array2); // 234 / 567

// but if you modify it in place, then there's only one object
// so the modification shows in both places
let array3 = [345];
let array4 = array3;
array4.push(678);
console.log(array3 + " / " + array4); // 345,678 / 345,678

Your function test returns an array object, and that object is the object passed to then and saved in result. However, the browser (or other environment) still runs the setTimeout code, changing the contents of the array even after the reference to the array was saved to res and result.

For this reason, you have to be very careful when working with an array you've received as a variable: If you need to ensure it doesn't change unexpectedly, you might need to make your own copy of the array. Otherwise, the caller might change the array out from under you, exactly the way that your setTimeout does in test.

Why does the table changes data some time after the promise has already been fulfilled?

1 Answers1