Koren Leslie Cohen

  • About
  • Blog
  • Contact

3 comments

JavaScript

JavaScript Variables: Declaration, Initialization, Hoisting & Closures

August 21, 2014 by Koren Leslie Cohen

preloader
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

Share

Facebook Google+ Twitter Pinterest Email

Comments Cancel reply

Your email address will not be published. Required fields are marked *

*

code

  1. Jackrabbit says

    December 24, 2015 at 12:15 pm

    Excellent! Clear and simple explanation. Thank you!

    Reply

Back to Blog

Trackbacks

  1. Hoisting in JavaScript - Mihan وب هاست says:
    January 23, 2017 at 3:29 am

    […] Hoisting JavaScript Variables Declaration, Initialization, Hoisting Aug JavaScript variables are hoisted meaning that within a variable&#فقطs current scope the variable will be […]

    Reply
  2. Clarifying: Variable Declaration and Initialization – Ode to STEM says:
    August 25, 2017 at 12:48 am

    […] tutorialspoint korenlc stackoverflow […]

    Reply

  • GitHub
  • Instagram
  • LinkedIn
  • RSS
  • Twitter

Looking for something?

Copyright 2023 Koren Leslie Cohen