Function in Javascript

What is function statement, function expression, high order function, the callback function, Different between arguments and parameters, function statement, and function declaration are same? what is an anonymous function 🤯

.....confusing know😵, This happened to me when I read some javascript articles while learning a new topic or trying to clear some doubts by reading some article but these statements confused me more.

Following this article, you will gain a better understanding of function statements if you have confusion about them

Function statement and Function declaration 🧒

function getValue(){
console.log(....)
}

console.log(getValue) //    getValue(){ console.log(hello) }
funciton getValue(){
console.log("hello")
}

• This way of creating the function is known as a function statement or we also can say that this is a function declaration
• This function can be hoisted, if we try to console log the function we will get the entire function

Function Expression

const getValue = function(){
console.log("hello world")
}
getValue() //  "hello world"

console.log(getvalue)   //  undefined
getvalue()  // reference error : getValue is not a funciton 

var getvalue = function(){
console.log("hello world")
}

creating the variable and initializing it with function is called function Expression

• function expression can not be hoisted, If we invoke the function Expression before declaring it will give a reference error: getValue is not a function
• if we call is as a variable before declaration we will get undefined in case of var for let and const we will get reference error: getValue is not defined
• function expression acts like a variable, all though we should invoke it like a function after the declaration

Anonymous function ⚠️

A function without a name is an anonymous function, for creating the function expression we can see that we use the anonymous function,

function (){
}

const getValue = document.querySelector("#id")
addEventListener("click" , function(){
........                      // anonymous function  
} )

• if we simply run the anonymous function js throws a syntax error: function statement requires the function name
• anonymous function used at a place where function used as a value,
• We can use the anonymous function in the callback function, EventListener, etc...

Arrow function ()=>{}

The arrow function is an alternative for a function expression

syntax `(parameter) => statement

function getValue(){
console.log("hello")}

//arrow function 
const getValue = ()=> {console.log("hello")}

• Arrow function()=>{} don't have their this keyword, this keyword based on the scope of an arrow function is defined within

know more about this keyword in detail

First class function 🔥

In javascript, the function is a first-class function cuz the definition of a first-class function is, in such a language, a function can be passed as an argument to other functions, can be returned by another function, and can be assigned as a value to a variable.

const getValue = function(){
console.log("hello")  // initialixing function to variable as a value
}

*function getvalue(y){   //  getting function as a parameter
return y     // return function as a result
}

funciton y(){
return "hello"
}
const value = getvalue(y)  //passing function as a argument
console.log(value()) // "hello"*

High order function 🎗️

the Function that can take a function as an argument or return a function as a result. It doesn't have to do both. Doing one or the other qualifies a function as a higher-order function. let's take an example

Without a higher order function, if I want to add one to each number in an array and display it in the console, I can do the following:

const numbers = [1, 2, 3, 4, 5];

function addOne(array) {
  for (let i = 0; i < array.length; i++) {
    console.log(array[i] + 1);
  }
}

addOne(numbers); The function addOne() accepts an array, adds one to each number in the array, and displays it in the console. The original values remain unchanged in the array, but the function is doing something for each value.

However, using what may be the most common higher-order function, forEach(), we can simplify this process:

const numbers = [1, 2, 3, 4, 5];

numbers.forEach((number) => console.log(number + 1));

immediate invoking function execution IIFE 🛸

An IIFE (Immediately Invoked Function Expression) is a JavaScript function that runs as > soon as it is defined

It is a design pattern that is also known as a Self-Executing Anonymous Function and contains two major parts:

The first is the anonymous function with lexical scope enclosed within the Grouping Operator (). This prevents accessing variables within the IIFE idiom as well as polluting the global scope. The second part creates the immediately invoked function expression () through which the JavaScript engine will directly interpret the function. (took reference from MDN for iife )

(function () {
  // …
})();

conclusion

• function statement and function declaration are normal functions, this function can be hoisted
• The anonymous function initialize as a value for a variable known as function expression, function expression is not hoisted, if we try to invoke the function expression before declaring it will give an error that says it is not a function.
• anonymous function don't have their identity, they can use a value
• A programming language is said to have First-class functions when functions in that language are treated like any other variable
• HOF: The Function that can take a function as an argument or return a function as a result