04 Function Declaration vs Function Expression

Hey! readers in this blog we are going to go throught with the functions in javaScript, basic syntax , declaration , expression etc.

First question that comes in our mind is - what exactly is function?

• In simpler terms it is something which to maintain dry (don't repeat yourself) principal , means it is that block of code which we have to use again and again in our codebase

still not clear? just look at this example:

Suppose we want to add two numbers a & b then how we are going to write the code it will be something like this :

but what if i told you again i have to add two numbers whose value is 70 and 80 , and i want to add these two numbers then it will be like this :

Have you observed something? ain't we repeating the same block of code again to get the desired output? Yes, we are now what will happens if i told to to again add two numbers whose value is 90 and 100 , then again you have to create 2 variables and again strore the result into another variable and then print the required output. So yes, we are repeating same code again and again , hence to overcome this problem concept of functions came into the existance.

Same problem using functions :

Now look at the above example, how function made our task very easy we just have to call that function and pass the arguments in it and done, we got out ans. So this is why we required functions.

---

Function Declaration

• it has a function name right there , we simply have to call that bame

function add(x, y){
    return x + y;
}

let ans1 = add(4,5);
console.log(ans1); // output : 9

Function Expression

• it basically means we are creating a function but storing that function in a seprate variable

  const add = function(x,y){
      return x + y;
  }
  
  let ans = add(10,20);
  console.log(ans); // output 30
  
  // here add becomes the function's name which is used for calling
  // that function
  

---

Difference between the Declaration and Expression

Feature	Function Declaration	Function Expression
Definition	A function defined with the function keyword and a name.	A function stored inside a variable.
Syntax	function add(a, b) { return a + b; }	const add = function(a, b) { return a + b; };
Hoisting	Fully hoisted — can be called before it is defined.	Not hoisted in the same way — cannot be called before definition.
Name Requirement	Must have a function name.	Can be anonymous (no name).

---

Basic Idea of hoisting :

Hoisting refers to the behavior where JavaScript moves the declarations of the variables and functions to the top of their scope during the compilation phase.

Key point -

• Function declaration can generally be used before they apper in the code

  const ans = addNums(2,3,4);
  console.log(ans); // output : 9
  
  function addNums(x,y,z){
      return x + y + z;
  }
  

• Function expression usually can't be used before they are defined

  const ans = addNums(2,3,4);
  console.log(ans); // error
  
  const addNums = function (x,y,z){
      return x + y + z;
  }
  

  

When to use each type ?

1. Function declaration : when we want a simple named function, or when we want to call it anywhere, even above the definition of the function or when we are writing normal "utility" functions like add subtract multiply etc.

   function addNums(x,y,z){
       return x + y + z;
   }
   

2. Function Expression : when we want to store the function in a variable or when we want to pass it somewhere.

   const  addNums = function(x,y,z){
       return x + y + z;
   }
   

---

Try it yourself :

here are some simple tasks that you can perform :

1. Write a function declaration that multiplies two numbers

2. Write the same logic using function expression

3. Call both functions and print results

4. Try calling them before defining and observe behavior

---

Conclusion

Functions are the building blocks of reusable, maintainable JavaScript. They let you follow the DRY principle by encapsulating logic you need to run multiple times.

• just keep one thing in mind (hoisting)

  • Declaration : works before the definition

  • Expression : throws an error.

---

Hope you enjoyed reading❤️