Science Knowings: JavaScript Course For Social Media

Closure

Closure

Closure

Summary of Previous topic

Hello everyone! Welcome to today's session on closures in JavaScript. Before diving into today's topic, let's quickly recap what we covered in our previous session. We discussed the Device Orientation API, which allows us to access information about a device's physical orientation in space. We learned how to use this API to create interactive applications that respond to changes in orientation, such as rotating images or adjusting screen layouts.

What is Closure?

A closure is a function that has access to the variables in the scope in which it was created, even after the function has closed.

In JavaScript, closures are created when a function is defined inside another function. The inner function has access to the variables in the outer function's scope, even after the outer function has returned.

Why Use Closures?

Closures can be used to achieve a variety of effects, such as:

  • Encapsulating data
  • Creating private variables
  • Implementing iterators
  • Creating curried functions
  • Simulating object-oriented programming

Benefits of Closures

Closures offer a number of benefits, including:

  • Improved code organization
  • Increased code reusability
  • Reduced memory usage
  • Enhanced performance

Creating Closures

To create a closure, simply define a function inside another function.

function outerFunction() {
  var x = 10;

  function innerFunction() {
    console.log(x);
  }

  return innerFunction;
}

var closure = outerFunction();
closure(); // 10

The 'this' Keyword in Closures

The this keyword in a closure refers to the value of this in the scope in which the closure was created.

function outerFunction() {
  var that = this;

  function innerFunction() {
    console.log(that); // refers to the outer function's 'this' value
  }

  return innerFunction;
}

var closure = outerFunction();
closure(); // refers to the global 'this' value

capturing variables in closures

Use Cases of Closures

capturing variables:

One of the most common uses of closures is to capture variables from the outer scope. This can be useful for creating private variables or for implementing iterators.

function createCounter() {
  var count = 0;

  return function() {
    return count++;
  };
}

var counter = createCounter();
counter(); // 0
counter(); // 1
counter(); // 2

use case of closures in Event Handling

Event Handling:

Closures can also be used to handle events. This can be useful for ensuring that the correct context is used when an event is fired.

var button = document.getElementById('button');

button.addEventListener('click', function() {
  console.log(this); // refers to the button element
});

use case of closures in Modules

Modules:

Closures can be used to create modules. This can be useful for organizing code and for preventing global variables from polluting the global namespace.

var module = (function() {
  var privateVariable = 10;

  function privateFunction() {
    console.log(privateVariable);
  }

  return {
    publicVariable: 20,
    publicFunction: function() {
      privateFunction();
    }
  };
})();

module.publicFunction(); // 10

use case of closures in currying

Currying:

Closures can be used to create curried functions. This can be useful for creating functions that can be partially applied.

function curry(fn) {
  return function(a) {
    return function(b) {
      return fn(a, b);
    };
  };
}

var add = curry(function(a, b) {
  return a + b;
});

var add10 = add(10);

use case of closures in Data Hiding

Data Hiding:

Closures can be used to implement data hiding. This can be useful for protecting sensitive data from being accessed by other parts of the program.

var Person = (function() {
  var privateData = {};

  function privateMethod() {
    // ...
  }

  return {
    publicMethod: function() {
      privateMethod();
    }
  };
})();

Higher-Order Functions

Next Up: Higher-Order Functions

What are Higher-Order Functions?

Higher-order functions are functions that can take other functions as arguments or return functions as their result.

Why Learn Higher-Order Functions?

  • Improve code readability
  • Increase code reusability
  • Write more expressive code

Follow us to learn more about higher-order functions and how to use them to write better JavaScript code!