JavaScript functions are one of the most important building blocks in programming. Whether you're building a simple script or a full web application, functions help organize and reuse code efficiently.

In this article, we’ll explore:

• What functions are and why we need them

• Function declaration syntax

• Function expression syntax

• The key differences between them

• A simple explanation of hoisting

• When you should use each approach

Let’s start with the basics.

What Are Functions in JavaScript?

A function is a reusable block of code designed to perform a specific task.

Instead of writing the same code again and again, we can place that code inside a function and call it whenever we need it.

Think of a function like a recipe.
Once the recipe is written, you can follow it anytime to get the same result.

For example, imagine we want to add two numbers multiple times:

console.log(2 + 3);
console.log(4 + 6);
console.log(7 + 8);

This works, but it quickly becomes repetitive.

Instead, we can create a function that performs the addition for us.

Functions make code:

• More organized

• Easier to reuse

• Easier to maintain

Now let's look at the first way to create a function in JavaScript.

Function Declaration Syntax

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

Syntax

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

Example

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

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

Output:

5

How it works

1. The function is declared using the function keyword.

2. The function name is add.

3. The parameters a and b receive input values.

4. The function returns the result of adding the two numbers.

Function declarations are straightforward and easy to read, which makes them popular for defining reusable logic.

Function Expression Syntax

A function expression is when a function is assigned to a variable.

Instead of defining the function directly, we store it inside a variable.

Syntax

const functionName = function(parameters) {
  // code to execute
};

Example

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

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

Output:

9

How it works

• A variable named add is created.

• A function is assigned to that variable.

• We can call the function using the variable name.

Function expressions are commonly used in modern JavaScript, especially when working with callbacks and functional programming patterns.

Function Declaration vs Function Expression

Both approaches create functions, but they behave slightly differently.

Feature	Function Declaration	Function Expression
Syntax	Defined using function name()	Function stored inside a variable
Hoisting	Fully hoisted	Not fully hoisted
Calling before definition	Works	Causes an error
Common use	Defining reusable logic	Callbacks, dynamic functions

Example Comparison

Function Declaration:

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

Function Expression:

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

Both functions do the same thing, but their behavior differs when it comes to hoisting.

A Quick Look at Hoisting

Hoisting is a JavaScript behavior where function and variable declarations are moved to the top of their scope during execution.

You don't need to understand execution context in depth yet. Just remember how it affects function types.

Function Declaration and Hoisting

Function declarations are fully hoisted, meaning they can be called before they appear in the code.

Example:

sayHello();

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

This works because JavaScript loads the function declaration before running the code.

Function Expression and Hoisting

Function expressions are not hoisted the same way.

Example:

sayHello();

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

This will cause an error:

ReferenceError: Cannot access 'sayHello' before initialization

Because the variable exists but the function has not been assigned yet.

When Should You Use Each?

Both function declarations and function expressions are useful depending on the situation.

Use Function Declarations When:

• You want clearly defined reusable functions

• You want to call the function anywhere in the file

• You're writing simple utility functions

Example:

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

Use Function Expressions When:

• Assigning functions to variables

• Working with callbacks

• Creating functions conditionally

• Using modern JavaScript patterns

Example:

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

In modern JavaScript, function expressions are often replaced with arrow functions, but the concept is still important to understand.

Hands-On Example

Let’s implement the same logic using both approaches.

Function Declaration

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

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

Output:

12

Function Expression

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

console.log(multiplyNumbers(3, 4));

Output:

12

Both functions perform the same task, but their definition style and hoisting behavior differ.

You can also experiment by calling the functions before defining them to see how JavaScript handles each case.

Final Thoughts

Functions are a core part of JavaScript and help make code reusable and organized.

In this article, we learned:

• Functions are reusable blocks of code

• JavaScript provides multiple ways to define functions

• Function declarations are hoisted and can be called before they appear in code

• Function expressions are assigned to variables and cannot be called before initialization

Understanding the difference between these two approaches will help you write clearer and more predictable JavaScript code.

As you continue learning JavaScript, you'll also encounter arrow functions, which are a more modern way of writing function expressions.

But mastering the fundamentals first will make everything else much easier.