JavaScript Functions

JavaScript Functions (Declaration vs Expression)

Functions are one of the most important concepts in JavaScript. They allow us to write reusable code instead of repeating the same logic again and again.

In this article, we will learn:

• What functions are

• Function declaration

• Function expression

• Differences between them

• Basic idea of hoisting

• When to use each type

1.What is a Function?

A function is a reusable block of code that performs a specific task.

Instead of writing the same code multiple times, we can write it once inside a function and reuse it whenever needed.

Example (Without Function)

let result1 = 5 + 3;
console.log(result1);

let result2 = 10 + 4;
console.log(result2);

Here we repeat the same logic.

Example (Using Function)

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

console.log(add(5, 3));
console.log(add(10, 4));

Now the code is clean, reusable, and easier to manage.

2.Function Declaration

A function declaration defines a function using the function keyword followed by a name.

Syntax

function functionName(parameters) {
  // code to execute
}

Example

function addNumbers(a, b) {
  return a + b;
}

let result = addNumbers(5, 3);
console.log(result); // 8

Here:

• addNumbers → function name

• a, b → parameters

• return → sends result back

3.Function Expression

A function expression stores a function inside a variable.

Syntax

const variableName = function(parameters) {
  // code
}

Example

const addNumbers = function(a, b) {
  return a + b;
};

let result = addNumbers(5, 3);
console.log(result); // 8

Here the function does not have to be named because it is stored in a variable.

---

Function Declaration vs Function Expression

Feature	Function Declaration	Function Expression
Definition	Defined using function keyword	Function stored in a variable
Name	Must have a function name	Can be anonymous
Hoisting	Fully hoisted	Not fully hoisted
Usage	Can be called before definition	Must be defined before calling

4.Hoisting

Hoisting means JavaScript moves certain declarations to the top of their scope during execution.

Function Declaration Example

greet();

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

This works because function declarations are hoisted.

Function Expression Example

greet();

const greet = function() {
  console.log("Hello!");
};

This will cause an error because the variable is not ready before execution.

So the rule is:

Function Declarations → can be called before definition

Function Expressions → cannot be called before definition

5.When Should You Use Each?

Use Function Declaration When:

• You want reusable utility functions

• The function should be accessible throughout the file

• Simpler code structure is preferred

Example:

function calculateTotal(price, tax) {
  return price + tax;
}

Use Function Expression When:

• You want to assign functions to variables

• You are passing functions as arguments

• Working with callbacks or event handlers

Example:

const greetUser = function(name) {
  console.log("Hello " + name);
};

---

#Assignment

Try this yourself.

1️⃣ Function Declaration

Write a function that multiplies two numbers.

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

console.log(multiply(4, 5));

2️⃣ Function Expression

Write the same logic using function expression.

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

console.log(multiply(4, 5));

3️⃣ Experiment with Hoisting

Try calling both before defining them.

Example:

console.log(multiply(4,5));

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

Now try the same with function expression and observe what happens.

Simple Execution Flow

Program Starts
      ↓
Function Defined
      ↓
Function Called
      ↓
Code Inside Function Runs
      ↓
Result Returned

---

Final Thoughts

Functions are the foundation of JavaScript programming. Understanding the difference between function declarations and function expressions helps you write better and more predictable code.

Key Takeaways:

• Functions help create reusable code

• Function declarations are hoisted

• Function expressions are not hoisted

• Both can perform the same task but behave differently during execution