Function Declaration vs Function Expression

Before moving to title of this blog, first understand what function exactly means, even why it exist? and then further we continue.

Why function Exist ?

Suppose we are writing program to build a calculator with many operation like addition, subtraction, multiplication, dividision and many more. the problem is when user click to + button must be addition code is execute and reuse addition code as well as many times we required.

similarly for solving a problem we divided into sub problem , and sub problem that already solve we can reuse it. so thats were function comes in for solving the problem like

• reuse the code snippet

• Avoid repetation

• To break big problem into small parts

• easily find the bug

What is function -

Function is block of code or series of steps , that run or execute when we call called as function.

We can write function in four ways -

• Take noting return nothing

• Take something return nothing

• Take nothing return something

• Take something return something

javascript has so many way to writing a function but there are two widely used as function defination & function declaration.

Function Declaration -

If we create or declared any function with some name called as function declration or named function.

The function body in between curly brackets { }, and call by using their function name.

Syntax

// function defination
function functionName ( argument ) {
    // body of function
}

// calling methode
functionName();

Example

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

let res = add(4, 7, 9)
console.log(res); // 20

Function Expression -

Function Expression is like function without name, called function expression. so now one thing come in our mind okey so how to called those methode, because for calling methode function name is required.

so what we do we assign the refrence of function body is assign to variable and call by using refrence.

Syntax

const variable_name = function (argument){
 // function body
}

Example

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

console.log(mult(3, 6)); // 9

Concept of Hoisting-

Hoisting is a key concept in JavaScript that can cause unexpected behavior in the code that we never predict, this behaviour often not hear in other language like C, C++, Java..etc

JavaScript Hoisting refers to the process whereby the interpreter appears to move the declaration of functions, variables or classes to the top of their scope, prior to execution of the code. - MDN

Let's understand the function Hoisting .

Function Hoisting

Hoisting is javascript behaviour, in which the function declartion is move to top of the block, that means it does't matter where to write function body in block we can call from anywhere. even before the function body.

// function Defination
sayHello();

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

it will print "Hello learning Hoisting". because it is function decration so support hoisting.

// function Expression
sayHello();

let sayHello = function () {
  console.log("Hello learning Hoisting");
};

in this case Uncaught ReferenceError: sayHello is not defined. so it will also support hoisting but intially variable intilized with undefined so it does't call .

When to use Each type

Use Function Declaration When:

• You want a reusable function

• The function should be available anywhere in the file

• You prefer clearer structure

Use Function Expression When:

• Assigning functions to variables

• Using functions as arguments

• Writing callbacks

• Controlling when the function is created

Difference between Function Declaration and Function Expression

Conclusion

Both function declarations and function expressions allow us to create reusable functions in JavaScript. The main difference lies in how they are defined and how hoisting works. Function declarations are hoisted and can be called before they appear in the code, while function expressions must be defined before use. Understanding these differences helps you choose the right approach when writing clean and predictable JavaScript code.