从Javascript模块中的父作用域继承变量

Question

I'm working with Webpack modules to keep things organized in my projects, but something very annoying is having to explicitly specify all the variables that the module might need, instead of just having it search for them in the calling function's scope. Is there a better way to do it? Example:

main.js

import {logMonth} from "./helpers";

document.addEventListener("DOMContentLoaded", () => {
  let month = "September";
  logMonth();
});

helpers.js

let logMonth = () => {
  console.log(month)
}

This will produce an error since logMonth() doesn't have access to the month variable.

This is an extremely simplified example, but for functions that need many variables, it can get pretty ugly to pass all the required arguments that the function might need.

My question is: Is there a way to make modules have access to the variables of the calling scope instead of explicitly passing them?

Answer 1

You could, but why would you want to? Modules are designed to prevent this. Always prefer pure functions, it's way easier to debug once the app becomes complicated. Then you don't want to be searching multiple nested scopes from multiple modules for a bug, optimally you want to only be looking in the module that threw the error instead of every scope it has access to.

So logMonth = month => console.log( month ); and logMonth( 'September' ); is preferred.

You can use an object if you need to send multiple parameters to a function. That way you do not have to change the function call signature in all places, you just add another (optional) parameter to the object:

logMonths = ({ year, month, day}) => { ...do stuff... }

This will work both with logMonths({ month: 'september' }) as with logMonths({ month: 'september', year: '2019' }) , so you never have to change like logMonths( 'september' ) into logMonths( null, 'september' ) and logMonths( 2019, 'september' ) everywhere you used logMonths() before it had a year parameter.