Post
Ask Question

Closure (Inner Function) in Javascript / jQuery

Closure :-
A closure is an inner function that has access to the outer (enclosing) function’s variables.
The closure has three scope chains:
• It has access to its own scope (variables defined between its curly brackets)
• It has access to the outer function’s variables
• It has access to the global variables.
The inner function has access not only to the outer function’s variables, but also to the outer function’s parameters. Note that the inner function cannot call the outer function’s arguments object, however, even though it can call the outer function’s parameters directly.
You create a closure by adding a function inside another function.
A Basic Example of Closures in JavaScript: 
  1. function showEmployeeName (empFirstName, empLastName) {  
  2.  var nameIntro = "Employee name is ";  
  3.  // this inner function has access to the outer function's variables, including the parameter  
  4.   function EmployeeFullName () {  
  5.    return nameIntro + empFirstName + " " + empLastName;  
  6.   }  
  7.  return EmployeeFullName ();  
  8. };  
showEmployeeName ("Bruce", "Wayne"); // Employee name is Bruce Wayne
 
A Classic jQuery Example of Closures:
  1. $(function() {  
  2.  var data = [];  
  3.  $(".start").click(function() { // this closure has access to the data variable  
  4.    data.push (this.prop("name")); // update the data variable in the outer function's scope  
  5.  });  
  6. });