No announcement
 

Anonymous Functions, Arrow Functions and Closures

Anonymous Functions

Anonymous functions are functions without a name. They are often used when a function is used only once or as a parameter to another function. Anonymous functions are defined using function expressions.

Example:

anonymous_function.html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Anonymous Function Example</title>
</head>
<body>

<h2>JavaScript Anonymous Function:</h2>
<script>
// Anonymous Function as a Parameter
let numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(num) {
  console.log(num * 2);
});
</script>

</body>
</html>

Output
2 4 6 8 10

In this example, we used an anonymous function as a parameter to the forEach method. The anonymous function takes a parameter num and logs its double to the console. The forEach method calls this anonymous function for each element in the numbers array.

Arrow Functions

Arrow functions are a concise way to write functions in JavaScript. They have a shorter syntax compared to regular function expressions and automatically bind this to the surrounding context.

Example:

arrow_function.html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Arrow Function Example</title>
</head>
<body>

<h2>JavaScript Arrow Function:</h2>
<script>
// Arrow Function
const addNumbers = (a, b) => a + b;

let result = addNumbers(5, 10);
console.log("Sum:", result); // Output: Sum: 15
</script>

</body>
</html>

Output
Sum: 15

In this example, we used an arrow function named addNumbers, which takes two parameters a and b and returns their sum. Arrow functions have a concise syntax and do not require explicit return statements for single expressions.

Closures

Closures are functions that remember the variables from the environment in which they were created. They have access to variables in their outer scope even after the outer function has finished executing.

Example:

closures.html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Closures Example</title>
</head>
<body>

<h2>JavaScript Closures:</h2>
<script>
function outerFunction() {
  let outerVariable = "I'm from the outer function!";
  
  function innerFunction() {
    console.log(outerVariable);
  }
  
  return innerFunction;
}

let closureFunction = outerFunction();
closureFunction(); // Output: I'm from the outer function!
</script>

</body>
</html>

Output
I'm from the outer function!

In this example, we have an outer function named outerFunction, which defines an outerVariable. Inside the outerFunction, we have another function named innerFunction, which has access to the outerVariable. When we call outerFunction and store the returned value in closureFunction, it captures the outerVariable due to closures. Then, when we call closureFunction, it logs the value of outerVariable, which is "I'm from the outer function!".

Closures are powerful and allow for the creation of functions that have persistent access to their lexical environments, making them useful for encapsulation and data privacy in JavaScript.