title: functional DOM and closures, defer until document ready
body: <h3>Background</h3>
  
  <p>I am experimenting a bit with functional programming and DOM manipulation. My objective is to toggle certain style of a DOM element between two values. I have all the required pieces in place, and they work in isolation. Here are the first version of the functions used:</p>
  
  <pre><code>const toggleBetween = (...args) =&gt; {
      let index=0;
      const ln = args.length;
      return () =&gt; {
          const val = args[index];
          index = (index +1)% ln;
          return val;
      }
  }
  
  export const toggleStyle = (domNode, name: string, value: any) =&gt; {
      const toggleValue = toggleBetween(domNode.style[name], value);
      return () =&gt; {
          domNode.style[name] = toggleValue();
      }
  }
  </code></pre>
  
  <p>Both functions are very simple. The first one will return a function that will return the next value on the list each time it is called, and the second one returns a function that will toggle the given style property between the current value and the provided one. So far so good. </p>
  
  <p>I also have a couple of functions that grab the required DOM elements:</p>
  
  <pre><code>const pickDomA = () =&gt; {/* Code that picks and caches DomNode A*/}
  const pickDomB = () =&gt; {/* Code that picks and caches DomNode B*/}
  </code></pre>
  
  <p>Then they can be used like this</p>
  
  <pre><code>const toggleThing = toggleStyle(pickDomA(), 'display', '');
  </code></pre>
  
  <h3>The problem</h3>
  
  <p>The problem arises when I want to initialize a module containing these functions: the document is not ready, trying to fetch the DOM nodes will return null and everything will fail.</p>
  
  <p>The problem is just with startup, the execution will be just fine because those functions are triggered by UI elements that will only be available after document is ready.</p>
  
  <h3>Question</h3>
  
  <p>Is there an elegant yet functional way of deferring DOM node picking until the document is ready?</p>
  
  <h3>Solution I am not happy with</h3>
  
  <p>The best I got so far is encapsulating every argument access in a function that checks if the argument is a function, and if so it executes it and returns the value. Then all I have to do is pass the values encapsulated as functions. </p>
  
  <p>Although that works, I find it a bit fragile and also a bit twisted. If it wasn't because the document initialization everything will be just simpler.</p>
  
  <p>It looks like this:</p>
  
  <pre><code> const getValue = (val) =&gt; {    
      if (typeof val === 'function') {
          return val();
      }
      return val;
  }
  
  const toggleBetween = (...args) =&gt; {
      let index=0;
      const ln = args.length;
      return () =&gt; { 
          const val = args[index];
          index = (index +1)% ln;
          return getValue(val);
      }
  }
  
  export const toggleStyle = (domNode, name: string, value: any) =&gt; {
      const originalValue = memoize(()=&gt; getValue(domNode).style[name]);
      const toggleValue = toggleBetween(originalValue , value);
      return () =&gt; {
          getValue(domNode).style[name] = toggleValue();
      }
  }
  </code></pre>
  
  <p>As you can see, now every function can take a function instead of a value and execute it to get the value, so DOM picking is deferred until first execution. The reason for the <code>memoize</code> is because I only want the first extracted value, this means the original DOM node value.</p>
  
  <p>Then all that I have to do is remove the <code>()</code> of the DOM picking functions and everything will be just fine:</p>
  
  <pre><code>const toggleThing = toggleStyle(pickDomA, 'display', '');
  </code></pre>
  
  <p>But again, I am not happy with this solution. Is there anything simpler?</p>