Java Script Functions

Question

I was near the end of the Java Script course for beginners by freeCodeCamp on YouTube, and I am really confused because the guy in the video stored a function inside the variable "half" like following:

const stats = {
  max: 56.78,
  standard_deviation: 4.34,
  median: 34.54,
  mode: 23.87,
  min: -0.75,
  average: 35.85
};
const half = (function () {

  return function half({ max, min }) {
    return (max + min) / 2.0;
  };

})();
console.log(stats);
console.log(half(stats));

my question is, why would we complicate it and store function inside of a variable and then return another function inside of it, when we can just type

function half({ max, min }) {
  return (max + min) / 2.0;
};

are there benefits to his method in this particular situation?

Answer 1

you need to understand the power of a function in js

--- to answer your question there are many benefits, just like art, it gives programmers - it gives us the flexibility to do things the way we want them to be.

---- you will get to use them soon enough as you write more code. don't worry too much for now just understand them.

functions are first-class objects which means they can be:

• stored in a variable, object, or array.
• passed as an argument to a function.
• returned from a function.

two of these happened in the above code - it was:

• stored in a variable.
• returned from a function.

this brought us to three types/class of functions

1. functions stored in variables without a name are called anonymous functions.

An anonymous function is a function without a name.

example:

let show = function () {
    console.log('Anonymous function');
};

show();

or the no-name enclosed function inside half variable in your code above

2. another part is half variable being an Immediately-invoked Function Expression or self-invoking expression

A self-invoking expression is invoked (started) automatically, without being called.

Function expressions will execute automatically if the expression is followed by ().

e.g

(function () {
  var x = "Hello!!";  // I will invoke myself
})();

or the no-name enclosed function inside half variable in your code above is a self-invoking function.

putting the two together --- half variable above is an anonymous self-invoking expression that means it contains an anonymous self-invoking function

3. one last thing --- closure and higher-order function.

A closure is a function having access to the parent scope, even after the parent function has closed/called.

that function half can be deemed as a closure. in case there is a variable inside the anonymous self-invoking function pitted to half variable, it will have access to the variable even after half expression has been called.

A higher-order function is a function that takes another function as an input, or returns a function, or does both.

the anonymous self-invoking function can be called an anonymous higher-order function because it return another function.

read more here https://www.freecodecamp.org/news/discover-the-power-of-first-class-functions-fd0d7b599b69/

https://www.w3schools.com/js/js_function_closures.asp

https://www.freecodecamp.org/news/a-quick-intro-to-higher-order-functions-in-javascript-1a014f89c6b/

Answer 2

In the particular example above there is no reason, but sometimes you may want to capture some sort of state in a scope local to that function and creating a function in that way lets you encapsulate some scope. Take for example this function:

const someFunction = (function() {
  let someState = 0;
  return function() {
    return someState++;
  }
})();
someFunction(); // returns 0
someFunction(); // returns 1
someFunction(); // returns 2