Posted on Nov 17, 2023

Understanding Javascript Functions in Depth

Functions in JS are first-class objects or also known as first-class citizens.

A First-Class Citizen in a programming language is an entity that can be dynamically created, destroyed, passed to a function, returned as a value, and have all the rights as other variables in the programming language have. In Javascript developer, Functions are just like objects. The only difference is functions are invocable but objects are not.

*Example:
*

**Callback Functions:
**A callback function (B) is a function that is passed as a parameter to another function (A).

And the function (A) calls the parameterized function (B) at some particular state of its execution.

Now two questions are here,

Question 1: Why pass a function as a parameter, if we can just call the function B from inside another function A.

Answer 1: Because many times both the functions are not written at the same time, from the same developer, for example, setTimeout() function is already there in the javascript but the callback function we pass into it varies for every problem. But we don’t just go every time and change the internal structure of the setTimeout function.

Another example is the sort() function, we can pass a callback to it in order to tell how to sort an array of objects etc (which key to use to order the objects in the array).

Question:2 If the parameterized Function (B) is to be called at the end of the function (A) then why not call function B right after the calling of function (A), instead of passing function B as a parameter.

Answer2: Okay you sound logical, but what if the function A is an asynchronous function and also will be used to perform various tasks in different scenarios upon completing its execution. In this case, you will need to pass the callback function because of two reasons,

You do not know prior to defining the function (A) that what the function (A)’s the user wants to run on completing its execution so function (B) would not be the same every time. (dynamically changing the after effect of function A.)
You cannot call function (B) right after function (A)’s calling because function (A) is async.

*Functions as Objects
*
In javascript, functions can also have properties just like objects.

By adding a property to a function, we can preserve the previous output the function generated, and many other things. We can also easily implement memorization by using this.

*3. Immediately invoked functional Expressions (IIFE)
*

A function definition inside parentheses makes it immediately invokable, and we can invoke them by ().

In the above example, we are passing an argument Const to the function.

And the main purpose of IIFE is modularization.

The main goal of IIFE is to avoid polluting the Global Scope.

Polluting the global namespace can be problematic because there is a chance of overriding variables and functions declared in different files.

And you also have to keep track of every variable declared in the Global Scope.

Arrow Functions: also called ( ‘=>’ Fat arrow Operator)
Arrow functions are just the syntactic sugar from ES6, to make the code shorter and more succinct.

For example: to sort array we wrote

But using the arrow function we could write it in a much shorter way.

Remember when we use curly braces, we need to use the return statement, else as in above case if we don’t use curly braces then we don’t need and cannot use return statements.