There is a good difference between these 2 ways of calling a function

1) The hoisted function can be called for anywhere in the code, it sits on top of the stack JS engine will make sure they are executed first and so can be refered anywhere

2) The function decleration must have a name.

On the other hand

The function expression follows the following rules

1) They can only be accessed after they are declared they are not hoisted

2) They can or cannot have a name for calling them.

---

How to call a function, I mean what many ways are there?

We can call the function with calling it and without calling it.

functionName()

This will execute the function, This returns whatever the function’s return value is specified. If a function has no return value it will return undefined.

• when we are performing the actions defined within the function’s code block.

• Getting the result of the function’s calculations or perations.

function greet(name) {
  return "Hello, " + name;
}

const greeting = greet("Charlie"); // Calling the function

console.log(greeting); // Output: Hello, Charlie (the return value)

functionName

This will not exectue the function, it just refers to the function object itself, You are treating the function as a value, like a variable.

This return the function object, does not execute the code.

• When passing a function as an arguement to another function (eg. as a callback)

• Storing a function as an objects property.

function greet(name) {
  return "Hello, " + name;
}

const myFunctionReference = greet; // Assigning the function object

console.log(myFunctionReference); // Output: function greet(name) { ... } (the function object)

const result = myFunctionReference("Alice"); // Calling the function through the reference
console.log(result); // Output: Hello, Alice

function callFunction(func, arg) {
    return func(arg); // Calling the passed function
}

console.log(callFunction(greet, "Bob")); // Passing function as argument, then calling it. Output: Hello, Bob.

---

A very unique behaviou of JS methods.

When there is a case where we are expecting a call back function we can simply put the name of the function and the data will be passed in it implicitly without needing to write the content in it.

1) Event Listeners

When we attach a listener to DOM element we can just call the function name insted of passing the arguments, it will automatically take the values

function handleClick(event) {
  console.log("Button clikced", event);
}

const myButton = document.getElementById("myBtn");
myButton.addEventListener("click", (event) => {
  console.log(event);
});
// myButton.addEventListener('click', handleClick)
// the above commented way is also an way of passing the values in an callback function

2) Array prototype forEach

These array methods accept a callback function as an argumet. They automatically calls the callback function for each element in the array.

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

function printNumber(number, index, array) {
  console.log(`Number: ${number}, Index: ${index}, Array: ${array}`);
}

numbers.forEach(printNumber); // Passing the function name

3) setTimeout() and setInterval()

These functions allow you to schedule the execution of a function, you can pass function name directly, and without any arguments.

function sayHello(name) {
  console.log(`Hello, ${name}!`);
}

setTimeout(sayHello, 1000, "John"); // Passing the function name and an argument

4) Using BIND

The bind() methods creats a new function ,when called its this keyword provide a value with a given sequence of arguments.

function greet(greeting, name) {
  console.log(`${greeting}, ${name}!`);
}

const sayHiToAlice = greet.bind(null, "Hi", "Alice"); // Pre-set arguments

sayHiToAlice(); // Calling the bound function