Crazy simultaneous javascript array concat interferes with itself

Question

I spent way too much time finding this bug. So here is my code. Apparently when i use push, the array ends up being complete, but when i use concat there is a estimated 50% chance that i will not get all concatenated items since the concats seem to run at the same time. I did not believe this to be possible, so could anyone explain to me why VERSION 1 works but version 2 does not.

let employments: any[] = [];
let companyIds = ['Id1', 'Id2']
await Promise.all(
    companyIds.map( async ( companyId ) => {
        const companies = await getCompaniesWithId(companyId);
        // VERSION 1
        employments.push( ...(await mergeWithOtherSource( companies )) );
        
        // VERSION 2
        employments = employments.concat( await mergeWithOtherSource( companies ));
    } )
);
// VERSION 1 always returns 3 expected items as are in the databases
// VERSION 2 RANDOMLY returns between 1 and 3 items
return employments.length

Answer 1

This answer provide alternative (and imho simpler) way to do the same thing. (the possible reason is provided in my another answer)

let companyIds = ['Id1', 'Id2']

/// mix await and then (some people may dislike this)
let employments = [].concat(
   await Promise.all(companyIds.map(companyId =>
      getCompaniesWithId(companyId).then(mergeWithOtherSource)
   ))
)

/// with await
let employments = [].concat(
   await Promise.all(companyIds.map( async ( companyId ) => {
      const companies = await getCompaniesWithId(companyId)
      return mergeWithOtherSource( companies )
   }))
)

/// with 2-step
let companys = await Promise.all(companyIds.map(getCompaniesWithId)
let employments = [].concat(await Promise.all(companys.map(mergeWithOtherSource)))

// can also use flat instead of concat
let employments = (await Promise.all(...)).flat()

Answer 2

It's probably because the reference of this is fetched before the evaluation of it's parameter

like the following

// VERSION 1 step by step
// employments.push( ...(await mergeWithOtherSource( companies )) );
let O = employments
let task = mergeWithOtherSource( companies )
let items = await task;
O.push(...value) // no problem, it's always the same object
    
// VERSION 2 step by step
// employments = employments.concat( await mergeWithOtherSource( companies ));
let O = employments // multiple async thread may get the same object
let task = mergeWithOtherSource( companies )
let items = await task;
let temp = O.concat(value) // may use outdate employments
employments = temp

so two async function may execute in the way

// VERSION 2: possible execution order
// "thread" in the sense of javascript `async`, which only one run at the same time, and only yield when `await`.

let O = employments // 1st thread
let task = mergeWithOtherSource( companies ) // 1st thread
let items = await task // 1st thread, waiting

let O = employments // 2nd thread
let task = mergeWithOtherSource( companies ) // 2nd thread
let items = await task // 2nd thread, waiting

let temp = O.concat(items) // 1st thread
employments = temp // 1st thread

let temp = O.concat(items) // 2nd thread, now using outdated employments!
employments = temp // 2nd thread, overwrite the object from thread 1

---

it may be easier to see if consider the statement

GetEmployments().concat(GetSomething())

GetEmployments() would be evaluate only once, to produce the O in above example.

---

step by step of a function call (roughly)

// step by step `x.func(y)`
let V = x
let F = V.func
let Arguments = [y]
F.apply(V,Arguments)