Odtnhj

I was wondering if we can declare a variable in one IIFE and the return it but make it available for another specific IIFE? Here is an example!

So I have

const iife1 = (()=>
const x = 10;
return x
)()

const iife2 = (()=>/* MAKE X AVAILABLE ONLY IN THIS FUNCTION */)()
const iife3 = (()=>/* HERE X CANNOT BE CALLED */)()

Maybe you would say just not to pass the variable x in the iif3 as an argument, but I was wondering if there is a conditional way we can achieve it when returning the variable from iif1, so the iif1 will know for which functions it returns its properties or methods before actually has returned!

My goal is to create an IIFE which in it I will declare all the variables that I am going to use in my project. Then for each variable, I want to have a proper condition so that when the IIFE with the variables returns the function has already decided in which scope will sent the variables for use! I don't know if this approach makes sense but as is always being said I am trying not to populate the global scope.

Codepen

One of the (probaby dozen) ways to achieve that is by using a Proxy.
First IIFE would create a proxy object through which you'd access its properties. After calling the revoke(), you will no longer be able to access any of the proxy's props.

As people have stated in their comments, there are probably much easier ways for you to achieve the wanted result, but you haven't presented the actual problem clearly.

const proxy, revoke = (() => 
 const x = test: 'test' ;
 const revocable = Proxy.revocable(x, 
 get: (target, name) => name
 );

 return revocable;
)();

const test1 = (proxy => 
 console.log('TEST 1', proxy.test);
)(proxy);

revoke();

const test2 = (proxy => 
 console.log('TEST 2', proxy.test); // can't access
)(proxy);

Fiddle:
https://jsfiddle.net/ay92L1r6/6/

IIFEs can only use Global, Passed, or internal variables. You can't make something available to a function scope that isn't available to a second function in the same scope.

Passing variables is one way, but perhaps the more practical way in certain circumstances would be to just nest your IIFEs as needed

const iife2 = (() => 
 const iife1 = (() => 
 const x = 10;
 return x
 )()

 console.log(iife1);
/*iife2 scope*/
)()

const iife3 = (() => /* HERE X CANNOT BE CALLED */ )()

It is not necessary to use three IIFE, remember that as soon as your iife1 returns that value will be in the same scope of iife2 and iife3 thus you won't achieve your goal.

Your best bet is to declare iife2 and iife3 as normal functions and call them inside iife1 when some conditions are met and pass the variable that will create the scope of iife3 as argument.

this solution is more flexible and predictable than relying on the outer scope

const fn2 = function(x) /* MAKE X AVAILABLE ONLY IN THIS FUNCTION */;
const fn3 = function() /* HERE X CANNOT BE CALLED */;


(()=>
 const x = 10;

 //your logic

 fn2(x);

 fn3();

)()