Javascript cypress test runtime behavior

I think this is a common Javascript question, rather than cypress test, yet I am not sure.

So I have a a UI in web, which will show a text message like found 3234 matches, I would like to use cypress to extract the number 3234, then on next page, I will input 3234 in another input box.

My code is like

const MATCHING_MESSAGE = '[data-cy=matchingMessages]';

let count = 0;
cy.get(MATCHING_MESSAGE)
  .invoke('text')
  .then((text) => {
    const pattern = /[0-9]+/g;
    count = text.match(pattern).pop();
    console.log({count1: count});
  })

// move to next page

console.log({count2: count});
if (count > 0) {
  // input count
} else {
  // input a min number like 5
}

However, when I execute this. the browser console is like

log: count2: 0
log: count1: 3234

Then the next page is always behaving like count is 0

1. I know this is execution order issue, but why log count2: 0 execute so fast like this get logged even before I moved to the second page.
2. Also, what knowledge I am missing for JS, to get more of this execution order and promise issue.
3. Is there a way I can enforce the execution order?

many thanks

You can use a cy.then() command as a wrapper around the code that uses count.

This will make sure the value has been evaluated before using it.

const MATCHING_MESSAGE = '[data-cy=matchingMessages]';

let count = null;    // null is not a valid value, so it's obvious if the
                     // evaluation is 0 or 3243 - or not actually happened

// this block is Cypress queue code, so it will evaluate later when the queue runs
cy.get(MATCHING_MESSAGE)
  .invoke('text')
  .then((text) => {
    const pattern = /[0-9]+/g;
    count = text.match(pattern).pop()
    console.log({count1: count});
  })

// move to next page

cy.then(() => {

  // inside then(): this block of code also runs on the Cypress queue
  // so now you get the correct ordering of execution

  console.log({count2: count});

  // parseInt since you do a numeric compare
  if (parseInt(count) > 0) {
    // input count
  } else {
    // input a min number like 5
  }
})

Page refresh

The part that does // move to next page may refresh the browser. If so the count variable will be erased altogether.

If you find that is the case, add the count to the Cypress environment instead.

const MATCHING_MESSAGE = '[data-cy=matchingMessages]';

cy.get(MATCHING_MESSAGE)
  .invoke('text')
  .then((text) => {
    const pattern = /[0-9]+/g;
    count = text.match(pattern).pop()
    console.log({count1: count});
    Cypress.env('count', count)         // save to environment store
  })

// move to next page

cy.then(() => {

  // inside then(): this block of code also runs on the Cypress queue
  // so now you get the correct ordering of execution

  cont count = Cypress.env('count')   // restore the value

  console.log({count2: count});

  // parseInt since you do a numeric compare
  if (parseInt(count) > 0) {
    // input count
  } else {
    // input a min number like 5
  }
})