Declaration vs. Initialization

In JavaScript, variables can be both declared and initialized, as follows:

Declaration:   

  var x;

Initialization: 

  x = 5;

This concept becomes important in the context of the next topic, hoisting.

Hoisting

JavaScript variables are hoisted, meaning that within a variable’s current scope, the variable will be hoisted to the top regardless of its placement. If the variable is initialized, when it is hoisted to the top it will initially be set to undefined. This is best explained through a series of examples:

var myName = "Koren";
console.log(myName); // Koren

In the above example, it’s easy to understand that console.log(myName) will display Koren. The same will happen in the following example:

var myName = "Koren";

(function() { 
  console.log(myName); // Koren 
})();

However, things get a little tricky in the following example, due to hoisting:

var myName = "Koren";

(function() { 
  console.log(myName); // undefined 
  var myName = "Koren Cohen";
})();

In the above example, myName  was undefined because, although myName was initialized outside of the function and inside the function’s scope, the variable myName was hoisted to the top of the scope and declared there, behind the scenes, as follows:

var myName = "Koren";

(function() { 
  var myName; // variable hoisted and declared prior to initialization
  console.log(myName); // undefined 
  var myName = "Koren Cohen";
})();

Closures

Closures are inner functions that have access to the outer function’s variables, also known as a scope chain. Included in a closure’s scope chain are the closure’s own variables, the outer function’s variables, and any global variables. The inner function also has access to the outer functions parameters.

JavaScript Closure

function greetMe(firstName, lastName) {
  var greeting = "Hello";

  // this function can access outer function's variables
  // can also access the parameters
  function fullName() {
    console.log(greeting + ", " + firstName + " " + lastName);
  }

  fullName();
}

greetMe("Koren", "Cohen"); // Hello, Koren Cohen

In the above example, the closure, or inner function, has access to the outer function’s variable, greeting, as well as its parameters, firstName and lastName. The closure cannot call the outer function’s argument object directly though.

jQuery Closure

$(function() {

  var myArray = []; 

  // this closure has access to variable, myArray
  $("h1").click(function() { 

    // can update myArray in outer function's scope
    myArray.push("title");
    console.log(myArray); // ["title"]

  });

});

Closures have access to the outer function’s variables even after the outer function returns. It’s important to remember that closures do not store the outer function’s variable value. Rather, the closure stores a reference to the outer function’s variable.

• About
• Latest Posts

Connect

Koren Leslie Cohen

Product manager at Facebook. Former senior product manager at Dollar Shave Club in Los Angeles and software engineer at J.Crew / Madewell in New York City. Recovering trial lawyer.

Connect

Latest posts by Koren Leslie Cohen (see all)

• PM Career Story - April 28, 2022
• How to Transition into Product Management - December 26, 2017
• What I’ve Learned in My First Few Months as a Product Manager - October 14, 2015

Related Posts

Page Preloader with CSS and JavaScript

Traversing the DOM with jQuery