Function Declaration vs Function Expression: What’s the Difference?

What are Functions?

Think of a function as a reusable recipe. Instead of writing out the same 10 steps every time you want to make a sandwich, you create a "MakeSandwich" function and just call it whenever you're hungry.
Why we need them

• Reusability: Write code once, use it everywhere.

• Organization: Breaks complex problems into smaller, manageable chunks.

• Maintainability: If you need to fix a bug, you only have to fix it in one place.

Function declaration syntax

This is the normal or you can say general way to define a function. It is hoisted, means you can call the function even before it appears in your code { don't worry I have explained what is hoisting in this article later } . basically it is a statement that declares a named function with a specified set of parameters. {in below example the parameters are a , b }

function add(a,b) {    // declaring the function with its name i.e. add
  return a+b ;
}

add(9,5); //calling a function

Function expression syntax

In this version, you create a function and assign it to a variable. The function itself can be anonymous (nameless).

var addition = function(a,b) {
  return a+b ;
};

here what we did is we assigned the function value to a variable whose name is addition .
Also there is not a compulsion of naming the function here as you can see above it is nameless function .

Key differences between declaration and expression

The main difference between function declaration and function expression is that function declarations are hoisted to the top of their scope, whereas function expressions are not.

This means that you can call a function with a function declaration before it is defined in the code, but you cannot do the same with a function expression. For example:

console.log(addN(2, 3)); // Output: 5 // calling and printing the answer to console

function add(a, b) {      // declaration of the function
  return a + b;
}

see here you can see I wrote the calling of the function above the declaration of the function and it worked !! the function add is hoisted to the top of the code, so it can be called before it is defined.

But this cannot be done in function expression , if you try it you will get error !! . For eg

console.log(add(2, 3)); // Output: Uncaught ReferenceError: add is not defined

var addition = function(a, b) {    // function expression 
  return a + b;
};

need one more example here it is !

// 1. Calling the declaration BEFORE it is written (Works!)
console.log("Declaration Result:", multiply(5, 4));

function multiply(a, b) {
  return a * b;
}

// 2. Calling the expression BEFORE it is written (Will throw an error!)
// console.log(multiplyExpr(5, 4)); 

const multiplyExpression = function(a, b) {
  return a * b;
};

// 3. Calling the expression AFTER it is written (Works!)
console.log("Expression Result:", multiplyExpression(5, 4));

Basic idea of hoisting

Imagine your code is a story that the computer reads from top to bottom. Normally, the computer can’t talk about a character until that character is introduced. Hoisting is like a special rule where the computer searches in the story first to see who the main characters are.

• FUNCTION HOISTING

If you define a function using the word function, the computer recognizes it instantly, no matter where it is.

The Rule: You can call the function at the very top of your page, even if the actual instructions are at the very bottom.
Think of it like: Knowing the character Mickey Mouse before you even start that cartoon.
For example :

greeet(); // It works ! the output is hello! , computer searches the function and finds it . 

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

In short: Hoisting is the computer's way of pre-reading your code so it isn't surprised by the names you use! You can do this with the variables [var] too.

Which one should you choose?

1. Function Declaration

Think of this as "Always Ready." You can use these functions anywhere in your code even above the line where you actually wrote the function. JavaScript "hoists" them as we have seen above . So use this when you want a simple, reliable function that you can call from anywhere in your file without worrying about the order.

2. Function Expression

Think of this as "Order Matters." You must define the function first before you can use it. If you try to call it before the line where it's written, the code will break. So use this when you want to keep your code very organized.

Don't worry when you practice it you will automatically get to know when to use what .........

THANK YOU!!