The chaotic collision of concurrent JavaScript array concatenations causes confusion

Question

The chaotic collision of concurrent JavaScript array concatenations causes confusion

After spending an excessive amount of time tracking down a bug, I am sharing my code with you all. Interestingly enough, I discovered that when using the push method, the array is complete. However, when using concat, there is a 50% chance that not all concatenated items will be received, as the concats appear to run simultaneously. I initially thought this was impossible. Can someone please explain 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 consistently returns 3 expected items as found in the databases
// VERSION 2 RANDOMLY returns between 1 and 3 items
return employments.length

javascript async-await

Answer 1

Answer №1

This response offers an alternative (and in my opinion, simpler) approach to achieve the same outcome. For further explanation, refer to my other response.

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

/// Combination of await and then (some individuals may find this unfavorable)
let employments = [].concat(
   await Promise.all(companyIds.map(companyId =>
      getCompaniesWithId(companyId).then(mergeWithOtherSource)
   ))
)

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

/// Implemented in two steps
let companys = await Promise.all(companyIds.map(getCompaniesWithId)
let employments = [].concat(await Promise.all(companys.map(mergeWithOtherSource)))

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

Answer 2

This response offers an alternative (and in my opinion, simpler) approach to achieve the same outcome. For further explanation, refer to my other response.

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

/// Combination of await and then (some individuals may find this unfavorable)
let employments = [].concat(
   await Promise.all(companyIds.map(companyId =>
      getCompaniesWithId(companyId).then(mergeWithOtherSource)
   ))
)

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

/// Implemented in two steps
let companys = await Promise.all(companyIds.map(getCompaniesWithId)
let employments = [].concat(await Promise.all(companys.map(mergeWithOtherSource)))

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

Answer 3

Answer №2

The reason for this behavior is likely due to the reference of this being retrieved before its parameter is evaluated.

For example, consider 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

This means that two asynchronous functions can be executed as follows:

// 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

To better understand this concept, consider the statement:

GetEmployments().concat(GetSomething())

GetEmployments() is evaluated only once to produce the O mentioned in the example above.

A rough breakdown of a function call:

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

Answer 4

The reason for this behavior is likely due to the reference of this being retrieved before its parameter is evaluated.

For example, consider 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

This means that two asynchronous functions can be executed as follows:

// 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

To better understand this concept, consider the statement:

GetEmployments().concat(GetSomething())

GetEmployments() is evaluated only once to produce the O mentioned in the example above.

A rough breakdown of a function call:

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

The chaotic collision of concurrent JavaScript array concatenations causes confusion

Answer №1

Answer №2

Similar questions

Guide on implementing short-circuit evaluation in Vue method?

Tips for avoiding automatically redirecting to the definition of a symbol for specific file types

Conceal the iframe if the source is http:// and there is no associated

Error with importing images detected on the React/Next.js website

Utilize jQuery to send and load double values efficiently

Can a WordPress post category be active without being displayed on the website?

Angular minimum JavaScript file is showing an error with the message "RangeError: Maximum call stack size exceeded"

empty responseText from GET request using AJAX

Using jQuery, you can enclose a string of text with HTML tags easily

I'm looking to find the Angular version of "event.target.value" - can you help me out?

Exploring Angular's capabilities with filtering and handling $http promises

Encountering issues while trying to establish a connection to MongoDB through JavaScript

Transforming a JSON structure into a tree model for use with the angular-tree-control component

Steps for generating a div, link, and image that links to another image using Javascript

Encrypting data using JavaScript and then decrypting it with Ruby

Where should the JQuery hashchange event be added for optimal placement?

CSS Gallery Indicator: Enhancing Your Website's Visual Appeal

Sometimes, React doesn't cooperate properly in the callback function of a setState operation

Angular form not sending data when using $http.post

Using jQuery, we can replace all `<span>` elements with `<img>` elements and then verify if the images have been successfully loaded