How to Avoid Any Global Variables in JavaScript

In JavaScript, objects and functions, are also variables. And any variable declared outside a function has global scope. You probably heard that because JavaScript is a dynamically type language global variables are bad and that they easily become source of confusion and bugs. So how can we avoid of creating any global variable, but still have our code executed?

There is such technic, it's called Immediately Invoked Function Expression (IIFE).

Suppose we have this JavaScript code:

var func = function(){
  
  console.log("entering func");
  
  var counter = 0;
  
  var innerFunc1 = function(){
    counter += 1;
    console.log("innerFunc1: " + counter);
  }
  
  var innerFunc2 = function(){
    counter += 1;
    console.log("innerFunc2: " + counter);
  }
  
  return {
    inner1: innerFunc1,
    inner2: innerFunc2,
  };
}

var f = func();
f.inner1();
f.inner2();

So here we have two global variables - func and f.

Now I'll show how to run this code without creating ANY global variable by applying IIFE.

WPF Customized ComboBox with Non Existing Value

How do you show a non existing value inside a WPF ComboBox? Good question! And the sad truth is that you just cannot do it! WPF ComboBox shows only the values that are in its ItemSource. 

But don't worry, today I'll show you a workaround to this problem. In this particular example inside a ComboBox will be shown a phantom value and when user clicks on it and choose another value from the list he will be prompted to confirm in order to give him a chance not to loose this phantom value in case if he clicked on the ComboBox by mistake.

The trick is that I create additional custom ComboBox with TextBlock, binding it to the original one and overlaying it.