Function Declaration vs Function Expression

In JavaScript, a function is a reusable block of code that performs a specific task.

Instead of writing the same code again and again, we create a function and call it whenever we need it.

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

console.log(add(2, 3)); // 5

In this example, we created the function add which accepts two parameters a and b and returns the sum of the two numbers which are given as the arguments.

Function Declaration

A Function Declaration defines a function using the function keyword with a name.

function functionName(parameters) {
  // code
}

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

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

Function Expression

A Function Expression stores a function inside a variable.

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

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

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

Declaration vs Expression

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

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

Both do the same job, but they behave differently during execution.

Hoisting (Simple Explanation)

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

// function declaration
sayHello();

function sayHello() {
  console.log("Hello!");
}
// this works fine because function declarations are hoisted.

// function expression
sayHello();

const sayHello = function() {
  console.log("Hello!");
};
// This throws an error because the variable sayHello is not initialized yet.

Conclusion

Both Function Declarations and Function Expressions allow us to define reusable logic in JavaScript.

The main difference lies in how JavaScript treats them during execution.

• Function declarations are hoisted

• Function expressions are not