Closures vs Scope

closures_vs_scope_01.js

x = 1

// this is not the complete story of closure
// this is entirely lexical scope
const parentFunction = () => {
  y = 50
  console.log(x += 1)
  console.log(y += 1)

  const childFunction = () => {
    x += 1
    y += 1
    console.log(`childFunction x: ${x}`)
    console.log(`childFunction y: ${y}`)
  }
  childFunction()
}

parentFunction()

closures_vs_scope_02.js

x = 1

const parentFunction = () => {
  y = 50
  console.log(x += 1)
  console.log(y += 1)

  const childFunction = () => {
    x += 1
    y += 1
    console.log(`childFunction x: ${x}`)
    console.log(`childFunction y: ${y}`)
  }
  return childFunction
}

// this is a better demonstration
// x is global, when result is called
// x is incremented once
// y was set to 50, is not global but can be referenced
// the context was "enclosed" at creation time

const result = parentFunction()
x = 40
result()