Function Declaration vs Expression: The Rich Kid vs The Intern

While writing blog on Arrow Functions , I keep seeing two terms everywhere Function Declaration and Function Expression. That made me pause and ask What are these and why they do matter ? In this blog we will cover all of this.

Blog on Arrow Function 👇

Why JavaScript Developers Are Obsessed With Arrow Functions

Kunal ・ Mar 5

#javascript #beginners #discuss #computerscience

Topics to Cover

1. What functions are and why we need them
2. Function declaration syntax
3. Function expression syntax
4. Key differences between declaration and expression
5. When to use each type

---

Functions

Functions are fundamental building block in JavaScript , These are the reusable block of code designed to perform specific tasks.

A function consist of :

• Parameter : Parameters are the variables defined in the function definition.

function add(a , b) -> a , b are the parameters 

• Arguments : Arguments are the actual value that are passed when calling the function

add(5,10) -> 5 , 10 are the arguments 

Why we need Functions ?

• They promote code reusability
• Make your programs cleaner and easier to manage
• They are easy to maintain
• They are modular

But there are several methods in which we can define our functions

---

Function Declaration : The Rich Kid

Function declaration is like a rich kid they have the power before doing anything.
In JavaScript this privilege is called Hoisting means you can call a function declaration before its actual definition in the code.

Another important things is that function declarations are always named.

add(5 , 10) //calling the function before it define

function add(a , b){
  return a + b
 }

They are the normal function with a power of Hoisting.Thats it!

---

Function Expression : The Intern

Function Expression is like a intern that cannot start working until HR assigns them a job.
Similarly , a function expression cannot run until the variable get the function assigned.

const greet = function add( a , b ) {
  return a + b
}

greet(5 , 10)

Function expression are anonymous because they don’t have their own name instead, they are assigned to a variable

Many developers used function declarations for a long time but function expression gradually taking over. Lets now see the key diffrence between them what to use when

---

Key differences between declaration and expression

Feature	Function Declaration	Function Expression
Definition	Defined using the function keyword directly	Function is assigned to a variable
Hoisting	Fully hoisted (can be called before defined)	Not fully hoisted (cannot call before assign)
Name	Always has a function name	Often anonymous (no function name)
Usage	Traditional way of writing functions	Used when assigning functions to variables
Example idea	function add(a,b) { ... }	const add = function(a,b) { ... }

---

When to use each type

Function Declaration : Use this when you want a reusable function that can be called anywhere in the code even before it is define

Function Expression : Use this when you want to assign a function to a variable or pass it as a callback ( like in array , events etc.)

---

Thanks for reading ! if enjoyed this blog , you can read more on this 👇

Kunal Follow

My tokens expired idk how to write bio. 😪🫠