JavaScript Functions: The Building Blocks of Programming

Functions are one of the most fundamental concepts in JavaScript. They help in organizing code, making it reusable, and improving readability. In this article, we will explore functions in detail, including their creation, usage, parameters, return values, and best practices.

What is a Function?

A function is a block of code designed to perform a particular task. Instead of writing the same code multiple times, we define a function once and call it whenever needed.

Function Declaration

To declare a function, we use the function keyword, followed by the function name and parameters.

function showMessage() {
    alert('Hello everyone!');
}
showMessage();
    

Local and Global Variables

Local Variables

A variable declared inside a function is local and can only be accessed within that function.

function showMessage() {
    let message = "Hello, I'm JavaScript!";
    alert(message);
}
showMessage();
alert(message); // Error!
    

Global Variables

Functions can access variables declared outside them, called global variables.

let userName = 'John';

function showMessage() {
    alert('Hello, ' + userName);
}
showMessage();
    

Function Parameters

Functions can receive parameters to pass data.

function showMessage(from, text) {
    alert(from + ': ' + text);
}
showMessage('Ann', 'Hello!');
    

Default Parameters

If a function is called without an argument, the missing parameter becomes undefined. We can provide a default value.

function showMessage(from, text = "no text given") {
    alert(from + ": " + text);
}
showMessage("Ann");
    

Returning a Value

A function can return a result using the return statement.

function sum(a, b) {
    return a + b;
}
let result = sum(1, 2);
alert(result); // 3
    

Best Practices for Function Naming

• Use meaningful names – function names should describe their purpose.
• One function = one action – keep functions focused on a single task.
• Use common prefixes:
  • getAge() – returns a value.
  • calcSum() – performs a calculation.
  • checkPermission() – checks a condition.

Example: Good vs Bad Function Naming

❌ Bad Example:

function getAgeAndShowMessage() {
    let age = prompt("Enter your age:");
    alert("Your age is " + age);
}
    

✅ Better Approach:

function getAge() {
    return prompt("Enter your age:");
}

function showMessage(age) {
    alert("Your age is " + age);
}

let age = getAge();
showMessage(age);
    

Functions Improve Readability

❌ Without Helper Function:

function showPrimes(n) {
    nextPrime: for (let i = 2; i < n; i++) {
        for (let j = 2; j < i; j++) {
            if (i % j == 0) continue nextPrime;
        }
        alert(i);
    }
}
    

✅ With Helper Function:

function isPrime(n) {
    for (let i = 2; i < n; i++) {
        if (n % i == 0) return false;
    }
    return true;
}

function showPrimes(n) {
    for (let i = 2; i < n; i++) {
        if (!isPrime(i)) continue;
        alert(i);
    }
}
    

Summary

• Functions allow code reuse and improve structure.
• They can have parameters to receive data.
• They can return values for further use.
• Local variables exist only inside the function.
• Global variables can be accessed by any function but should be used carefully.
• Function names should clearly describe their action.
• A function should do one task only.

By mastering functions, you can write cleaner, reusable, and more efficient JavaScript code! 🚀