JavaScript Function Basics Functions(Must-Know)

Types of Functions:

1- Function Declarations:

A function defined using the function keyword.

function greet() {
  console.log("Hello!");
}

2- Function Expression:

A function stored in a variable

const greet = function () {
  console.log("Hello!");
};

3- Arrow Function:

A shorter syntax and does not have its own this.

const greet = () => {
  console.log("Hello!");
};

4- Anonymous Function:

A function with no name (commonly used in callbacks).

setTimeout(function () {
  console.log("Hi!");
}, 1000);

5- Named Function Expression:

A function expression with a name.

const greet = function sayHello(){
    console.log("Hello!")
}

6- IIFE Function (Immediately Invoked Function Expression) :

Executes immediately after it’s created.

(function(){
     console.log("Runs instantly!");
})()

7- Callback Function :

A function passed as an argument to another function.

// OR
// A callback function is a function that you pass into another function, and it gets called (used) later inside that function.

function createQuote(quote, callback){
  var myQuote = "Like I always say, " + quote;
  callback(myQuote);  // calling the callback!
}
function logQuote(quote){
  console.log(quote);
   /**
   * "logQuote" is the callback function
→    Because it’s passed into createQuote, and then called  inside it
  */
}
createQuote("eat your vegetables!", logQuote); // createQuote = higher order function
/**
 * "createQuote" is the higher-order function
→ Because it takes a function (callback) as an argument.
*/

8- Constructor Function:

Used to create objects; works with new.

function Person(name) {
  this.name = name;
}

9- Async Function:

Returns a Promise and uses await.

async function fetchData() {
  return await "data";
}

10- Method Function:

Functions inside objects.

const obj = {
  greet() {
    console.log("Hello!");
  }
};

11- Higher Order Function:

It takes a function (callback) as an argument, return a function as result or does both.

function High(data, callback) =>{
    console.log(data + callback)
}
const callbackFun = () =>{
    console.log("callback")
}
// callbackFun is a callback function because it pass into another function and it can called later inside that function.
const result = High("hello", callbackFun)   // result is higher order function because it take function as an argument.

12- Closure:

closure happens when an inner function remembers and can use variables from its outer (parent) function, even after the parent function has finished running.

function outer() {
  let count = 0;   // variable in outer function

  function inner() {
    count++;
    console.log(count);
  }

  return inner;   // return inner function
}

const myFunc = outer();  // outer() has finished running

myFunc(); // 1
myFunc(); // 2
myFunc(); // 3

/** Explanation:

1- outer() runs and creates count

2- outer() returns inner

3- Even though outer() is done,

4- inner() still remembers count

5- Each call updates the same count

**/

13- Lexical Scope:

The inner function has access to the outer function’s variables.

let x = 10;

function outer() {
  let y = 20;

  function inner() {
    console.log(x);
    console.log(y);
  }

  inner();
}

outer();  // 10 , // 20