test JS lexical scope (`fat arrow` vs `function scope`)

lexical-scope-in-js.md

Definition

Lexical Scoping defines how variable names are resolved in nested functions: inner functions contain the scope of parent functions even if the parent function has returned.

test function:

function testScope () {
  'use strict'
  console.log('outer [scope]', this)
  
  return function () {
    console.log('inner_fn [scope]', this)
    
    return () => {
      console.log('inner_fat_arrow [scope]', this)
    }
  }
}

global setup:

let foo = { id: 'foo' }
let bar = { id: 'bar' }
foo.test = testScope

test driver:

bar.test = foo.test()
bar.test()
bar.test()()

Conclusion:

1. fat arrow function auto bind the lexical scope where it's declared
2. lexical scope resolves to the direct parent where it's declared. (the first inner function in this case)