In this JavaScript tutorial, we’ll explore one of the most powerful features of JavaScript — functions in JavaScript. Functions allow us to organize code into reusable blocks, making programs cleaner, easier to debug, and more efficient.

By the end of this lesson, you’ll understand how to create functions, pass parameters, return values, and use different types of functions in JavaScript.

What are Functions in JavaScript?

A function in JavaScript is a block of code designed to perform a particular task. Functions are executed when they are called.

👉 Example:

function greet() {
  console.log("Hello, welcome to JavaScript!");
}

greet(); // Calling the function

function greet() {
  console.log("Hello, welcome to JavaScript!");
}

greet(); // Calling the function

👉 Output:

Hello, welcome to JavaScript!

Hello, welcome to JavaScript!

Functions make your program modular — meaning you can divide your code into small, logical parts.

Why Use Functions in JavaScript?

• ✅ Reusability → Write once, use multiple times.
• ✅ Clean Code → Break large code into smaller pieces.
• ✅ Debugging → Easier to test and maintain.
• ✅ Avoid Repetition → Saves time and effort.
• ✅ Scalability → Helps in building large applications.

Different Ways to Declare Functions in JavaScript

JavaScript offers multiple ways to create functions.

1. Function Declaration

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

console.log(add(5, 3)); // Output: 8

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

console.log(add(5, 3)); // Output: 8

2. Function Expression

const multiply = function (x, y) {
  return x * y;
};

console.log(multiply(4, 2)); // Output: 8

const multiply = function (x, y) {
  return x * y;
};

console.log(multiply(4, 2)); // Output: 8

3. Arrow Function (ES6)

const divide = (a, b) => a / b;

console.log(divide(10, 2)); // Output: 5

const divide = (a, b) => a / b;

console.log(divide(10, 2)); // Output: 5

👉 Difference:

• Function Declarations are hoisted (can be used before defining).
• Function Expressions & Arrow Functions are not hoisted.

Parameters and Arguments in JavaScript Functions

Parameters act like placeholders inside a function. Arguments are actual values you pass when calling the function.

function greetUser(name) {
  console.log("Hello, " + name + "!");
}

greetUser("Anand");
greetUser("John");

function greetUser(name) {
  console.log("Hello, " + name + "!");
}

greetUser("Anand");
greetUser("John");

👉 Output:

Hello, Anand!  
Hello, John!

Hello, Anand!  
Hello, John!

Default Parameters in JavaScript

You can set default values for parameters.

function sayHello(name = "Guest") {
  console.log("Hello, " + name);
}

sayHello();         // Output: Hello, Guest  
sayHello("Anand");  // Output: Hello, Anand

function sayHello(name = "Guest") {
  console.log("Hello, " + name);
}

sayHello();         // Output: Hello, Guest  
sayHello("Anand");  // Output: Hello, Anand

Returning Values from Functions

Functions can send back values using return.

function square(num) {
  return num * num;
}

let result = square(5);
console.log(result); // Output: 25

function square(num) {
  return num * num;
}

let result = square(5);
console.log(result); // Output: 25

Types of Functions in JavaScript

JavaScript supports many types of functions:

1. Named Function → Regular declared function.
2. Anonymous Function → A function without a name, often assigned to variables.
3. Arrow Function → Short syntax introduced in ES6.
4. Callback Function → A function passed into another function.
5. Higher-Order Function → A function that takes another function as argument or returns a function.

Example of Callback Function

function processUserInput(callback) {
  let name = "Anand";
  callback(name);
}

processUserInput(function(userName) {
  console.log("Hello, " + userName);
});

function processUserInput(callback) {
  let name = "Anand";
  callback(name);
}

processUserInput(function(userName) {
  console.log("Hello, " + userName);
});

👉 Output:

Hello, Anand

Hello, Anand

Real-Life Example of Functions in JavaScript

Imagine you are building a shopping website:

function calculateTotal(price, quantity) {
  return price * quantity;
}

console.log("Total: ₹" + calculateTotal(500, 3));

function calculateTotal(price, quantity) {
  return price * quantity;
}

console.log("Total: ₹" + calculateTotal(500, 3));

👉 Output:

Total: ₹1500

Total: ₹1500

Functions and Scope in JavaScript

Variables inside functions have local scope, while those outside have global scope.

let globalVar = "I am global";

function testScope() {
  let localVar = "I am local";
  console.log(globalVar); // Accessible
  console.log(localVar);  // Accessible
}

testScope();
console.log(globalVar);  // Accessible
// console.log(localVar); // Error: not defined

let globalVar = "I am global";

function testScope() {
  let localVar = "I am local";
  console.log(globalVar); // Accessible
  console.log(localVar);  // Accessible
}

testScope();
console.log(globalVar);  // Accessible
// console.log(localVar); // Error: not defined

Higher-Order Functions in JavaScript

Functions can take other functions as arguments or return functions.

function greetMessage(message) {
  return function(name) {
    console.log(message + ", " + name);
  };
}

const sayHi = greetMessage("Hi");
sayHi("Anand"); // Output: Hi, Anand

function greetMessage(message) {
  return function(name) {
    console.log(message + ", " + name);
  };
}

const sayHi = greetMessage("Hi");
sayHi("Anand"); // Output: Hi, Anand

This is very common in modern React.js and Node.js development.

Best Practices for Functions in JavaScript

• Use meaningful names (calculateTotal instead of calc).
• Keep functions short and focused on one task.
• Avoid modifying global variables inside functions.
• Use arrow functions for simple tasks.
• Reuse instead of duplicating logic.

Mini Practice Exercise

👉 Write a function that takes an array of numbers and returns the sum.

function sumArray(arr) {
  let total = 0;
  for (let num of arr) {
    total += num;
  }
  return total;
}

console.log(sumArray([1, 2, 3, 4, 5])); // Output: 15

function sumArray(arr) {
  let total = 0;
  for (let num of arr) {
    total += num;
  }
  return total;
}

console.log(sumArray([1, 2, 3, 4, 5])); // Output: 15

External Resource

👉 Read the official MDN Functions Documentation

Internal Resource

Check out Day 7: Loops in JavaScript since loops and functions often work together.

Quick Recap

• Functions = reusable blocks of code.
• Can be declared in multiple ways (declaration, expression, arrow).
• Parameters + arguments make them flexible.
• Functions can return values.
• Callback and higher-order functions are powerful concepts in modern JS.

What’s Next?

In this JavaScript tutorial series:

• ✅ Day 7 → Loops in JavaScript
• ✅ Day 8 → Functions in JavaScript
• 🔜 Day 9 → Arrays in JavaScript