In this post, we will learn JavaScript’s variable scope and hoisting and all the idiosyncrasies of both.

We must understand how variable scope and variable hoisting work in JavaScript, if want to understand JavaScript well. These concepts may seem straightforward; they are not. Some important subtleties exist that we must understand, if we want to thrive and excel as JavaScript developers.

Variable Scope
A variable’s scope is the context in which the variable exists. The scope specifies from where you can access a variable and whether you have access to the variable in that context.

Variables have either a local scope or a global scope.

Local Variables (Function-level scope)
Unlike most programming languages, JavaScript does not have block-level scope (variables scoped to surrounding curly brackets); instead, JavaScript has function-level scope. Variables declared within a function are local variables and are only accessible within that function or by functions inside that function. See my post on Closures for more on accessing variables in outer functions from inner functions.

Demonstration of Function-Level Scope

No Block-Level Scope

• If You Don’t Declare Your Local Variables, Trouble is Nigh
  Always declare your local variables before you use them. In fact, you should use JSHint to check your code for syntax errors and style guides. Here is the trouble with not declaring local variables:
  



  	// If you don't declare your local variables with the var keyword, they are part of the global scope​
  	​var name = "Michael Jackson";
  	​
  	​function showCelebrityName () {
  	console.log (name);
  	}
  	​
  	​function showOrdinaryPersonName () {
  	name = "Johnny Evers";
  	console.log (name);
  	}
  	showCelebrityName (); // Michael Jackson​
  	​
  	​// name is not a local variable, it simply changes the global name variable​
  	showOrdinaryPersonName (); // Johnny Evers​
  	​
  	​// The global variable is now Johnny Evers, not the celebrity name anymore​
  	showCelebrityName (); // Johnny Evers​
  	​
  	​// The solution is to declare your local variable with the var keyword​
  	​function showOrdinaryPersonName () {
  	var name = "Johnny Evers"; // Now name is always a local variable and it will not overwrite the global variable​
  	console.log (name);
  	}

• Local Variables Have Priority Over Global Variables in Functions
  If you declare a global variable and a local variable with the same name, the local variable will have priority when you attempt to use the variable inside a function (local scope):

   

  	var name = "Paul";
  	​
  	​function users () {
  	// Here, the name variable is local and it takes precedence over the same name variable in the global scope​
  	​var name = "Jack";
  	​
  	​// The search for name starts right here inside the function before it attempts to look outside the function in the global scope​
  	console.log (name);
  	}
  	​
  	users (); // Jack

Global Variables
All variables declared outside a function are in the global scope. In the browser, which is what we are concerned with as front-end developers, the global context or scope is the window object (or the entire HTML document).

• Any variable declared or initialized outside a function is a global variable, and it is therefore available to the entire application. For example:

  	// To declare a global variable, you could do any of the following:​
  	​var myName = "Richard";
  	​
  	​// or even​
  	firstName = "Richard";
  	​
  	​// or ​
  	​var name; //​
  	name;
  	​</pre>

• If a variable is initialized (assigned a value) without first being declared with the var keyword, it is automatically added to the global context and it is thus a global variable:

  	function showAge () {
  	// Age is a global variable because it was not declared with the var keyword inside this function​
  	age = 90;
  	console.log(age);// ​
  	}
  	​
  	showAge (); // 90​
  	​
  	​// Age is in the global context, so it is available here, too​
  	console.log(age); // 90

  Demonstration of variables that are in the Global scope even as they seem otherwise:

  	// Both firstName variables are in the global scope, even though the second one is surrounded by a block {}. ​
  	​var firstName = "Richard";
  	{
  	​var firstName = "Bob";
  	}
  	​
  	​// To reiterate: JavaScript does not have block-level scope​
  	​
  	​// The second declaration of firstName simply re-declares and overwrites the first one​
  	console.log (firstName); // Bob

  Another example

  	for (var i = 1; i <= 10; i++) {
  	console.log (i); // outputs 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;​
  	};
  	​
  	​// The variable i is a global variable and it is accessible in the following function with the last value it was assigned above ​
  	​function aNumber () {
  	console.log(i);
  	}
  	​
  	​// The variable i in the aNumber function below is the global variable i that was changed in the for loop above. Its last value was 11, set just before the for loop exited:​
  	aNumber (); // 11​
  	​

• setTimeout Variables are Executed in the Global Scope
  Note that all functions in setTimeout are executed in the global scope. This is a tricky bit; consider this:

   

  	// The use of the "this" object inside the setTimeout function refers to the Window object, not to myObj​
  	​
  	​var highValue = 200;
  	​var constantVal = 2;
  	​var myObj = {
  	highValue: 20,
  	constantVal: 5,
  	calculateIt: function () {
  	setTimeout (function () {
  	console.log(this.constantVal * this.highValue);
  	}, 2000);
  	}
  	}
  	​
  	​// The "this" object in the setTimeout function used the global highValue and constantVal variables, because the reference to "this" in the setTimeout function refers to the global window object, not to the myObj object as we might expect.​
  	​
  	myObj.calculateIt(); // 400​
  	​// This is an important point to remember.

• Do not Pollute the Global Scope
  If you want to become a JavaScript master, which you certainly want to do (otherwise you will be watching Honey Boo Boo right now), you have to know that it is important to avoid creating many variables in the global scope, such as this:

   

  	// These two variables are in the global scope and they shouldn't be here​
  	​var firstName, lastName;
  	​
  	​function fullName () {
  	console.log ("Full Name: " + firstName + " " + lastName );
  	}

  This is the improved code and the proper way to avoid polluting the global scope

  	// Declare the variables inside the function where they are local variables​
  	​
  	​function fullName () {
  	var firstName = "Michael", lastName = "Jackson";
  	​
  	console.log ("Full Name: " + firstName + " " + lastName );
  	}

  In this last example, the function fullName is also in the global scope.

Variable Hoisting
All variable declarations are hoisted (lifted and declared) to the top of the function, if defined in a function, or the top of the global context, if outside a function.

It is important to know that only variable declarations are hoisted to the top, not variable initialization or assignments (when the variable is assigned a value).

Variable Hoisting Example:

Function Declaration Overrides Variable Declaration When Hoisted
Both function declaration and variable declarations are hoisted to the top of the containing scope. And function declaration takes precedence over variable declarations (but not over variable assignment). As is noted above, variable assignment is not hoisted, and neither is function assignment. As a reminder, this is a function assignment: var myFunction = function () {}.
Here is a basic example to demonstrate:

It is important to note that function expressions, such as the example below, are not hoisted.

In strict mode, an error will occur if you assign a variable a value without first declaring the variable. Always declare your variables.

Be good. Sleep well. And enjoy coding.

~~~~~~~~~~~~~~~~~~~~~~~

Understand JavaScript Closures With Ease

function showName (firstName, lastName) {

var nameIntro = "Your name is ";
    // this inner function has access to the outer function's variables, including the parameter
function makeFullName () {
        
return nameIntro + firstName + " " + lastName;
    
}

return makeFullName ();

}


showName ("Michael", "Jackson"); // Your name is Michael Jackson


$(function() {

var selections = []; 
$(".niners").click(function() { // this closure has access to the selections variable
selections.push (this.prop("name")); // update the selections variable in the outer function's scope
});

});

//Note that the item in the click method's parameter is a function, not a variable.
//The item is a callback function
$("#btn_1").click(function() {
  alert("Btn 1 Clicked");
});

var friends = ["Mike", "Stacy", "Andy", "Rick"];

friends.forEach(function (eachName, index){
console.log(index + 1 + ". " + eachName); // 1. Mike, 2. Stacy, 3. Andy, 4. Rick
});

//The anonymous function is not being executed there in the parameter. 
//The item is a callback function
$("#btn_1").click(function() {
  alert("Btn 1 Clicked");
});


// global variable
var allUserData = [];

// generic logStuff function that prints to console
function logStuff (userData) {
    if ( typeof userData === "string")
    {
        console.log(userData);
    }
    else if ( typeof userData === "object")
    {
        for (var item in userData) {
            console.log(item + ": " + userData[item]);
        }

    }

}

// A function that takes two parameters, the last one a callback function
function getInput (options, callback) {
    allUserData.push (options);
    callback (options);

}

// When we call the getInput function, we pass logStuff as a parameter.
// So logStuff will be the function that will called back (or executed) inside the getInput function
getInput ({name:"Rich", speciality:"JavaScript"}, logStuff);
//  name: Rich
// speciality: JavaScript

//Global variable
var generalLastName = "Clinton";

function getInput (options, callback) {
    allUserData.push (options);
// Pass the global variable generalLastName to the callback function
    callback (generalLastName, options);
}

function getInput(options, callback) {
    allUserData.push(options);

    // Make sure the callback is a function
    if (typeof callback === "function") {
    // Call it, since we have confirmed it is callable
        callback(options);
    }
}

// Define an object with some properties and a method
// We will later pass the method as a callback function to another function
var clientData = {
    id: 094545,
    fullName: "Not Set",
    // setUserName is a method on the clientData object
    setUserName: function (firstName, lastName)  {
        // this refers to the fullName property in this object
      this.fullName = firstName + " " + lastName;
    }
}

function getUserInput(firstName, lastName, callback)  {
    // Do other stuff to validate firstName/lastName here

    // Now save the names
    callback (firstName, lastName);
}

getUserInput ("Barack", "Obama", clientData.setUserName);

console.log (clientData.fullName);// Not Set

// The fullName property was initialized on the window object
console.log (window.fullName); // Barack Obama

//Note that we have added an extra parameter for the callback object, called "callbackObj"
function getUserInput(firstName, lastName, callback, callbackObj)  {
    // Do other stuff to validate name here

    // The use of the Apply function below will set the this object to be callbackObj
    callback.apply (callbackObj, [firstName, lastName]);
}

// We pass the clientData.setUserName method and the clientData object as parameters. The clientData object will be used by the Apply function to set the this object

getUserInput ("Barack", "Obama", clientData.setUserName, clientData);

// the fullName property on the clientData was correctly set
console.log (clientData.fullName); // Barack Obama

function successCallback() {
    // Do stuff before send
}

function successCallback() {
    // Do stuff if success message received
}

function completeCallback() {
    // Do stuff upon completion
}

function errorCallback() {
    // Do stuff if error received
}

$.ajax({
    url:"http://fiddle.jshell.net/favicon.png",
    success:successCallback,
    complete:completeCallback,
    error:errorCallback

});

var p_client = new Db('integration_tests_20', new Server("127.0.0.1", 27017, {}), {'pk':CustomPKFactory});
p_client.open(function(err, p_client) {
    p_client.dropDatabase(function(err, done) {
        p_client.createCollection('test_custom_key', function(err, collection) {
            collection.insert({'a':1}, function(err, docs) {
                collection.find({'_id':new ObjectID("aaaaaaaaaaaa")}, function(err, cursor) {
                    cursor.toArray(function(err, items) {
                        test.assertEquals(1, items.length);

                        // Let's close the db
                        p_client.close();
                    });
                });
            });
        });
    });
});

// First, setup the generic poem creator function; it will be the callback function in the getUserInput function below.
function genericPoemMaker(name, gender) {
    console.log(name + " is finer than fine wine.");
    console.log("Altruistic and noble for the modern time.");
    console.log("Always admirably adorned with the latest style.");
    console.log("A " + gender + " of unfortunate tragedies who still manages a perpetual smile");
}

//The callback, which is the last item in the parameter, will be our genericPoemMaker function we defined above.
function getUserInput(firstName, lastName, gender, callback) {
    var fullName = firstName + " " + lastName;

    // Make sure the callback is a function
    if (typeof callback === "function") {
    // Execute the callback function and pass the parameters to it
    callback(fullName, gender);
    }
}

getUserInput("Michael", "Fassbender", "Man", genericPoemMaker);
// Output
/* Michael Fassbender is finer than fine wine.
Altruistic and noble for the modern time.
Always admirably adorned with the latest style.
A Man of unfortunate tragedies who still manages a perpetual smile.
*/

function greetUser(customerName, sex)  {
   var salutation  = sex && sex === "Man" ? "Mr." : "Ms.";
  console.log("Hello, " + salutation + " " + customerName);
}

// Pass the greetUser function as a callback to getUserInput
getUserInput("Bill", "Gates", "Man", greetUser);

// And this is the output
Hello, Mr. Bill Gates