Understanding JavaScript Functions

When writing programs, we often repeat the same logic multiple times. For example, imagine you need to add two numbers in several parts of your program. Writing the same code again and again would make your program messy and harder to maintain.

This is where functions come in.

A function is simply a reusable block of code that performs a specific task. Instead of rewriting the same logic repeatedly, you can place it inside a function and call it whenever you need it.

Think of a function like a small machine.
You give it some input, it processes the input, and it produces an output.

Why Do We Need Functions?

Functions help us write better and cleaner code. Some benefits include:

• Reusability – write code once and use it many times

• Better organization – break large programs into smaller pieces

• Readability – easier for others (and your future self) to understand

• Maintainability – fix logic in one place instead of everywhere

For example, instead of repeatedly adding numbers like this:

console.log(5 + 3)
console.log(10 + 2)
console.log(7 + 4)

We can create a function.

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

Function Declaration

The most common way to create a function is a function declaration.

Syntax

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

Example

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

console.log(addNumbers(5, 3)) //8
console.log(addNumbers(10, 2)) //12

Here:

• addNumbers is the function name

• a and b are parameters

• return sends the result back

Whenever we call addNumbers(), the function executes.

Function Expression

Another way to create a function is using a function expression.

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

Syntax

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

Example

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

console.log(addNumbers(5, 3))

Even though the syntax is different, the behavior is mostly the same — the function still performs the same task.

Declaration vs Expression

Let’s compare them side by side.

Function Declaration	Function Expression
Defined using function name()	Stored inside a variable
Can be used before it is defined	Cannot be used before definition
Common for reusable logic	Often used in callbacks or dynamic situations

Example:

// Function Declaration
function greet() {
  console.log("Hello")
}

// Function Expression
const greetUser = function() {
  console.log("Hello")
}

Both work, but they behave slightly differently because of something called hoisting.

Hoisting

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

This affects function declarations and function expressions differently.

Function Declaration Example

greet()

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

This works because function declarations are hoisted. JavaScript already knows about the function before reaching its definition.

Function Expression Example

sayHello()

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

This will cause an error.

Why?

Because the variable sayHello exists, but the function is not assigned yet when we try to call it.

When Should You Use Each?

In practice, both are useful.

Use Function Declarations when:

• writing reusable utilities

• creating main program logic

• you want hoisting behavior

Use Function Expressions when:

• assigning functions to variables

• passing functions as arguments

• working with callbacks

In modern JavaScript, you’ll often see function expressions and arrow functions, especially in frameworks like React.

Practice Assignment

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 a function expression.

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

console.log(multiplyNumbers(4, 5))

3. Experiment with Hoisting

console.log(multiply(4, 5))

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

//Output==>20

console.log(multiplyNumbers(4, 5))

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

//Output==>
//console.log(multiplyNumbers(4, 5));
            ^

//ReferenceError: Cannot access 'multiplyNumbers' before initialization
//    at Object.<anonymous> (D:\Cohort Material\nodejs-internals\testing.js:1:13)
//    at Module._compile (node:internal/modules/cjs/loader:1730:14)
//    at Object..js (node:internal/modules/cjs/loader:1895:10)
//    at Module.load (node:internal/modules/cjs/loader:1465:32)
//at Function._load (node:internal/modules/cjs/loader:1282:12)
//    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
//    at wrapModuleLoad (node:internal/modules/cjs/loader:235:24)
//    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:171:5)
//    at node:internal/main/run_main_module:36:49

// Node.js v22.16.0