Non-blocking, callback and pomises on Javascript's event loop.

event-loop.js

/* X example - common non-blocking execution */

const x = 5 

console.log('hello X', x)

const plusOneX = (x) => {
  setTimeout(() => {
    // a bad reassign e.g.:
    x = x + 1 
    console.log('new X', x)
  }, 5000)
}

plusOneX(x)

console.log('bye X', x)

// results:
// hello X 5
// bye X 5
// new X 6


/* Y example - callback exection */

const y = 5 

console.log('hello Y', y)

const plusOneY = (y, cb) => {
  setTimeout(() => {
    const ny = y + 1 
    console.log('new Y', ny) 
    cb(ny)
  }, 5000)
}

plusOneY(y, (ny) => {
  console.log('bye Y', ny) 
})

// results:
// hello Y 5
// new Y 6
// bye Y 6


/* Z example - promise execution */

const z = 5 

console.log('hello Z', z)

const plusOneZ = (z) =>
  new Promise((resolve, reject) => {
    setTimeout(() => {
      const nz = z + 1
      console.log('new Z', nz)
      resolve(nz)
    }, 5000)
  })

plusOneZ(z).then((nz) => {
  console.log('bye Z', nz)
})

// results:
// hello Z 5
// new Z 6
// bye Z 6

example X:
Common non-blocking execution, x is only incremented after the timeout execution, but 'bye' is printed before it.

• real time visualization

example Y:
The callback function contains the print of 'bye', that was passed to the queue and returns to the stack after timeout execution.

• real time visualization

example Z:
As callback, 'bye' printed after the promise resolve.

• Unfortanlly it is not possible to see it working on the tool according this issue, but, in this link are some good explanations for promises on event loop.

Javascript's Event Loop Introduction:

• MDN - Introduction of some more explanations of event loop
• Philip Roberts: What the heck is the event loop anyway? | JSConf EU 2014