How to compile lexical environments into objects in JavaScript compiler?

I am working on a custom language and want to now support lexical environments (closures). I am asking for help in how this would look in JavaScript to keep it easier and more applicable to others.

Basically, say you have this in a file.

let a = 10
let b = 20

function doFoo() {
  let x = 300
  let y = 400
  let z = doBar(x, y)
  return a * z + b * z

  function doBar(m, n) {
    return m * a + n * b
  }
}

Keeping it simple (not thinking about how compilers can optimize away or remove simple expressions), what do the objects look like for lexical environments (like in JSON), and how do the lexical environments get used at runtime generally?

It seems to me that you would end up like this:

let a = {
  vars: [
    {
      varname: 'a',
      value: 10
    },
    {
      varname: 'b',
      value: 20
    }
  ],
  funcs: ['doFoo']
}
let b = {
  parent: a,
  vars: [
    {
      varname: 'x',
      value: 300
    },
    {
      varname: 'y',
      value: 400
    },
    {
      varname: 'z',
      value: undefined
    }
  ],
  funcs: ['doBar']
}
let c = {
  parent: b,
  vars: [
    {
      varname: 'm',
      value: undefined
    },
    {
      varname: 'n',
      value: undefined
    }
  ]
}
let environments = [a, b, c, /* and tons more */]

Then when you actually invoke the function doFoo, it would serialize the data at that instant or something like that.

run(script)

// 1. link a = 10, b = 20
// 2. call doFoo
//   3. create a new object, link it to the lexical environment.
//   4. repeat

This "create a new object" part is where I'm lost. We must create a new "scope" or "context" for every invocation of the function correct? And how does it relate to that environments array I created?

It seems that a scope is an instance of an environment, where the variables of the environment are filled in right before they are used. Then an environment just says what variables there are.

But this seems like a performance problem, creating a new scope with potentially dozens of variables to serialize all at once. So they must update the scopes as the variables change. How does this generally look or work? What objects do we have, how are they linked together, and when/how do they get updated?

from How to compile lexical environments into objects in JavaScript compiler?