• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
JavaScriptSource

JavaScriptSource

Search 5,000+ Free JavaScript Snippets

  • Home
  • Browse Snippets
    • Addon
    • Ajax
    • Buttons
    • Cookies
    • CSS
    • Featured
    • Forms
    • Games
    • Generators
    • Image Effects
    • Math Related
    • Miscellaneous
    • Multimedia
    • Navigation
    • Page Details
    • Passwords
    • Text Effects
    • Time & Date
    • User Details
Home / Basics / What JavaScript Closures Are and How They Work

What JavaScript Closures Are and How They Work

What JavaScript Closures Are and How They Work

JavaScript closures are a fundamental concept in the JavaScript programming language. A closure is a function that has access to the variables in the scope in which it was created, even after the function has executed and the scope in which it was created no longer exists.

Here’s an example of a closure:

function outerFunction(x) {
  return function innerFunction(y) {
    return x + y;
  }
}

let add5 = outerFunction(5);
console.log(add5(3)); // 8

In this example, the outerFunction returns the innerFunction, which has access to the x variable. Even though the outerFunction has finished executing, the innerFunction still has access to the x variable and can use it in its own execution.

In the last line, the outerFunction is called with an argument of 5, which is passed to x, so the returned innerFunction has access to x as 5. Then we store the returned innerFunction in a variable called add5 and call it with an argument 3 which is passed to y, and return the value of x+y which is 8.

Here’s another example that shows how closures can be used to create private variables in JavaScript:

function createCounter() {
  let count = 0;
  return {
    increment: function() {
      count++;
    },
    decrement: function() {
      count--;
    },
    getCount: function() {
      return count;
    }
  }
}

let counter = createCounter();
console.log(counter.getCount()); // 0
counter.increment();
console.log(counter.getCount()); // 1
counter.decrement();
console.log(counter.getCount()); // 0

In this example, the createCounter function creates an object with three methods: increment, decrement, and getCount. The count variable is defined within the scope of the createCounter function, but is still accessible to the methods because they are closures. The methods can access and modify the count variable, but it is not directly accessible from outside the createCounter function.

Basics, Miscellaneous

Related Snippets:

  • Copy text to the clipboard
  • Fire an event listener only once
  • Merge two or more arrays together
  • Perform a shallow merge of two or more objects

Primary Sidebar

FREE UPDATES!

Get the latest updates in your inbox for FREE!

Popular Posts

Story Generator

IP Grabber – get a users IP address with JavaScript

Simple Calendar

Remove Ads

Astrological Calculator

Copyright © 2023 JavaScriptSource.com

  • About
  • Privacy Policy
  • Submit
  • FAQ
  • Jobs For Developers
  • Contact Us