JavaScript IIFE

xholonWorkbook.xml

<?xml version="1.0" encoding="UTF-8"?>
<!--Xholon Workbook http://www.primordion.com/Xholon/gwt/ MIT License, Copyright (C) Ken Webb, Sat Dec 13 2025 13:03:33 GMT-0500 (Eastern Standard Time)-->
<XholonWorkbook>

<Notes><![CDATA[
Xholon
------
Title: JavaScript IIFE
Description: 
Url: http://www.primordion.com/Xholon/gwt/
InternalName: e0228dcfae729b723c9be0a352a88d6d
Keywords: 

My Notes
--------
2025 Dec 13

Playing around with JavaScript Immediately Invoked Function Expression (IIFE).
 - including nested IIFE

I can try these in Dev Tools:

The result of running this in DevTools, is 23
(
  (x) => x + 1
)
(
  17 + 5
)

((x) => x + 1)(17 + 5)
((x) => {console.log(x)})(17 + 5)

from wikipedia ref[0]:
let counter = (function () {
    let i = 0;

    return {
        get: function () {
            return i;
        },
        set: function (val) {
            i = val;
        },
        increment: function () {
            return ++i;
        }
    };
})();
// These calls access the function properties returned by "counter".
counter.get();       // 0
counter.set(3);
counter.increment(); // 4
counter.increment(); // 5

### References
(1) https://en.wikipedia.org/wiki/Immediately_invoked_function_expression
    An immediately invoked function expression (or IIFE, pronounced "iffy", IPA /ˈɪf.i/) is
    a programming language idiom which produces a lexical scope using function scoping.
    It was popular in JavaScript as a method of supporting modular programming before
    the introduction of more standardized solutions such as CommonJS and ES modules.
    
    Immediately invoked function expressions can be used to avoid variable hoisting from within blocks,
    protecting against polluting the global environment and simultaneously allowing public access to methods
    while retaining privacy for variables defined within the function.
    In other words, it wraps functions and variables, keeping them out of the global scope
    and giving them a local scope. 
    
() https://developer.mozilla.org/en-US/docs/Glossary/IIFE

() https://dev.to/onurhandtr/javascript-iife-a-complete-guide-to-immediately-invoked-function-expressions-3ghd
    some examples with explanations

]]></Notes>  

<_-.XholonClass>
  <PhysicalSystem/>
  
  <IIFE superClass="Script"/>
  
</_-.XholonClass>

<xholonClassDetails>
  <!--<Block>
    <port name="height" connector="Height"/>
  </Block>-->
  
  <IIFE><Color>orange</Color></IIFE>
  <Avatar><Color>red</Color></Avatar>
</xholonClassDetails>

<PhysicalSystem>
  <!--<Block>
    <Height>0.1 m</Height>
  </Block>
  <Brick multiplicity="2"/>-->
  
  <!-- this works! -->
  <IIFE roleName="a"><![CDATA[
var beh = {};
let counter = (function (ii) {
  //let i = 0;
  
  return {
    get: function () {
      return ii;
    },
    set: function (val) {
      ii = val;
    },
    increment: function () {
      return ++ii;
    }
  };
})(10);
// These calls access the function properties returned by "counter".
counter.get();       // 0
//counter.set(3);
counter.increment(); // 4
counter.increment(); // 5
this.println(`${this.name()} ${counter.get()}`);
//# sourceURL=IIFE_a.js
]]></IIFE>
  
  <!-- arrow function version -->
  <IIFE roleName="b"><![CDATA[
var beh = {};
let counter = (function (ii) {
  return {
    get: () => ii,
    set: (val) => ii = val,
    increment: () => ++ii
  };
})(11);

// These calls access the function properties returned by "counter".
counter.get();       // 0
//counter.set(3);
counter.increment(); // 4
counter.increment(); // 5
this.println(`${this.name()} ${counter.get()}`);
//# sourceURL=IIFE_b.js
]]></IIFE>
  
  <!-- in Dev Tools console:
var ava = xh.avatar();
var iife = ava.parent();
//console.log(iife.);
var resp = iife.tick(66);
console.log(resp);
-->
  <IIFE roleName="c"><![CDATA[
var me, counter, beh = {
postConfigure: function() {
  me = this.cnode;
  me.println(me.name() + " is starting ...");
  counter = (function (ii) {
    return {
      get: () => ii,
      set: (val) => ii = val,
      increment: () => ++ii
    };
  })(11);
  
  // These calls access the function properties returned by "counter".
  counter.get();       // 0
  //counter.set(3);
  counter.increment(); // 4
  counter.increment(); // 5
  me.println(`${me.name()} ${counter.get()}`);
},

act: function() {
  counter.increment();
  me.println(`${me.name()} ${counter.get()}`);
},

tick: function(thing) {
  console.log(thing);
  console.log(counter.get());
  return 888;
}
}
//# sourceURL=IIFE_c.js
]]></IIFE>
  
</PhysicalSystem>

<Blockbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
  var a = 123;
  var b = 456;
  var c = a * b;
  if (console) {
    console.log(c);
  }
  //# sourceURL=Blockbehavior.js
]]></Blockbehavior>

<Heightbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
  var myHeight, testing;
  var beh = {
    postConfigure: function() {
      testing = Math.floor(Math.random() * 10);
      myHeight = this.cnode.parent();
    },
    act: function() {
      myHeight.println(this.toString());
    },
    toString: function() {
      return "testing:" + testing;
    }
  }
  //# sourceURL=Heightbehavior.js
]]></Heightbehavior>

<Brickbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
  $wnd.xh.Brickbehavior = function Brickbehavior() {}

  $wnd.xh.Brickbehavior.prototype.postConfigure = function() {
    this.brick = this.cnode.parent();
    this.iam = " red brick";
  };

  $wnd.xh.Brickbehavior.prototype.act = function() {
    this.brick.println("I am a" + this.iam);
  };
  //# sourceURL=Brickbehavior.js
]]></Brickbehavior>

<Brickbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
  console.log("I'm another brick behavior");
]]></Brickbehavior>

<SvgClient><Attribute_String roleName="svgUri"><![CDATA[data:image/svg+xml,
<svg width="100" height="50" xmlns="http://www.w3.org/2000/svg">
  <g>
    <title>Block</title>
    <rect id="PhysicalSystem/Block" fill="#98FB98" height="50" width="50" x="25" y="0"/>
    <g>
      <title>Height</title>
      <rect id="PhysicalSystem/Block/Height" fill="#6AB06A" height="50" width="10" x="80" y="0"/>
    </g>
  </g>
</svg>
]]></Attribute_String><Attribute_String roleName="setup">${MODELNAME_DEFAULT},${SVGURI_DEFAULT}</Attribute_String></SvgClient>

</XholonWorkbook>