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

Functions are the most fundamental part of any programming language, which makes code resuable, readable and modular.

Imagine a phone that doesn’t have a contacts list.

Every time you want to call a friend, you must remember and type the full phone number If you call the same person 10 times, you still have to type the entire number each time. This becomes slow and error-prone.

To solve this phones provide contacts.

• You save the number once with a name like “Rahul”.

• Next time you just tap Rahul to call.

Functions works in same way let's understand about them in details.

---

What is Function?

A function is a block of reusable code written to perform a specific task. it consists of a set of statements but executes as a single unit.

Browser already have built-in functions like alert(), prompt(), and confirm() But we can also create our own functions in JavaScript.

A function has 2 part function definition and calling, After defining a function we can call it as many time we want in any part of the program.

Example:

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

console.log(add(2, 3)) // 5
console.log(add(4, 8)) // 12
console.log(add(5, 10)) // 15

As code suggest we declare a simple add() function which adds 2 numbers, Now we can call it as many times we want.

Why we need functions

• It makes code more readable and organized

• it avoid code repetition

• function can be used in different parts of the program as many time we want

---

Function declaration syntax

For declaring a function is very simple for that we have to use function keyword with functionName followed by parentheses () and curly brases {} block in which we write the actual code.

function sayHello() {
    console.log("Hello world"); 
}

sayHello()

Remember after function declaration we have call() it otherwise it will do nothing.

---

Function expression syntax

A function expression is another notation for defining a function, In terms of syntax it is similar to the function declaration. but in this we assign the function to a variable and call function using that variable.

There are two syntax of function expression.

• With function name

• Without function name

With function name

with function name syntax we give function a name.

const greet = function greetFun(){
    console.log("hello")
}

greet()

Without function name

In this syntax function keyword creates a function value that can be assigned to a variable when it is used as an expression.

const greet = function(){
    console.log("hello")
}

greet()

In both syntax to invoke the function, we call it using the variable name which serves as the new function name.

---

Function Declaration vs Expression

Feature	Function Declaration	Function Expression
Definition	Function defined with function keyword and a name	Function assigned to a variable
Hoisting	Fully hoisted can be called before it is defined	Not hoisted (only variable is hoisted)
Calling before definition	Allowed	Not allowed
Name	Must have a function name	Can be anonymous or named
Common usage	when you need hoisting or reusable general functions.	when you need inline functions, callbacks, or closures.

---

What is Hoisting?

Hoisting is JavaScript’s behavior where declarations are moved to the top of their scope before execution.

let's understand with a simple analogy:

Imagine a football match

Before the game starts the referee prepares the field, players list, and rules. All important things are set up first, even before the match begins.

So when the game starts, everything is already available.

Example:

sayHello();

function sayHello() {
  console.log("Hello ji");
}

In this code example function is called even before declaration but still works fine How? It is hoisted.

Before the interpreter executes the whole code, it first hoists means declared function will place on the top of the scope whether it can be global scope or local scope.

But this only works in function declaration in function expression it works different.

sayHello(); // Error
const sayHello= function() {
  console.log("Hello ji");
};

It throws error because in function expression only the variable is hoisted, not the function itself.

---

Assignments

1. Write a simple function declaration that multiplies two numbers return the result.

2. Write the same logic using function expression in which declare the function and assign in variable.

3. Now call both function and see the result

4. Now most interesting part call both function before declaration and observe the result.

Conclusion

In any programming language functions are very important for reusing code and logic. This follows the DRY (Don’t Repeat Yourself) principle a key rule in programming. Without functions, we would have to repeat code, which violates this principle.

Hoisting is also one of the trickiest parts of JavaScript, and understanding it is essential for using function declarations and expressions correctly.

We have covered all of these topics in this article.

Hope you like it❤️