JavaScript Functions - Complete Guide

Functions are the building blocks of JavaScript programs. They let you write code once and use it many times. Learning functions is essential - let's master them together!

What is a Function?

A function is a block of code that performs a specific task. You give it input, it does something, and optionally returns output.

Think of a function like a recipe:

Input - Ingredients (parameters)
Process - Cooking steps (function body)
Output - Finished dish (return value)

Function Declaration

The traditional way to create a function:

function greet() {
    console.log("Hello, World!");
}
 
greet();  // Call the function

Function with Parameters

Functions can take input values called parameters:

function greet(name) {
    console.log(`Hello, ${name}!`);
}
 
greet("John");  // Hello, John!
greet("Jane");  // Hello, Jane!

Function with Return Value

Functions can return values:

function add(a, b) {
    return a + b;
}
 
let result = add(5, 3);
console.log(result);  // 8

Multiple Parameters

function introduce(name, age, city) {
    return `Hi, I'm ${name}, ${age} years old, from ${city}`;
}
 
let intro = introduce("John", 25, "New York");
console.log(intro);

Function Expression

Assign a function to a variable:

const greet = function(name) {
    return `Hello, ${name}!`;
};
 
console.log(greet("John"));

Arrow Functions (Modern Way)

Arrow functions are shorter and cleaner:

// Traditional function
function add(a, b) {
    return a + b;
}
 
// Arrow function
const add = (a, b) => {
    return a + b;
};
 
// Shorter arrow function (single expression)
const add = (a, b) => a + b;

Arrow Function Examples

// No parameters
const sayHello = () => console.log("Hello!");
 
// One parameter (parentheses optional)
const greet = name => console.log(`Hello, ${name}!`);
 
// Multiple parameters
const add = (a, b) => a + b;
 
// Multiple lines
const process = (x, y) => {
    let sum = x + y;
    let product = x * y;
    return sum + product;
};

Default Parameters

Set default values for parameters:

function greet(name = "Guest") {
    return `Hello, ${name}!`;
}
 
console.log(greet());        // Hello, Guest!
console.log(greet("John"));  // Hello, John!

Rest Parameters

Accept any number of arguments:

function sum(...numbers) {
    let total = 0;
    for (let num of numbers) {
        total += num;
    }
    return total;
}
 
console.log(sum(1, 2, 3));        // 6
console.log(sum(1, 2, 3, 4, 5)); // 15

Higher-Order Functions

Functions that take other functions as arguments:

function operate(a, b, operation) {
    return operation(a, b);
}
 
function add(x, y) {
    return x + y;
}
 
function multiply(x, y) {
    return x * y;
}
 
console.log(operate(5, 3, add));       // 8
console.log(operate(5, 3, multiply));   // 15

Anonymous Functions

Functions without names:

// Immediately invoked
(function() {
    console.log("This runs immediately!");
})();
 
// As callback
setTimeout(function() {
    console.log("Runs after 1 second");
}, 1000);

Closures

Functions that remember variables from outer scope:

function outer() {
    let count = 0;
    
    return function inner() {
        count++;
        return count;
    };
}
 
const counter = outer();
console.log(counter());  // 1
console.log(counter());  // 2
console.log(counter());  // 3

Callback Functions

Functions passed as arguments:

function processData(data, callback) {
    // Process data
    let result = data * 2;
    // Call callback with result
    callback(result);
}
 
processData(5, function(result) {
    console.log("Result:", result);  // Result: 10
});

Visual Explanation: Function Flow

Here's how functions work:

Function Call Flow:
┌─────────────────────────────┐
│ main code                   │
│   │                         │
│   ├─► greet("John")        │
│   │     │                   │
│   │     ▼                   │
│   │   ┌──────────────┐     │
│   │   │ greet()     │     │
│   │   │ executes     │     │
│   │   │ returns      │     │
│   │   └──────┬───────┘     │
│   │         │              │
│   │         ▼              │
│   │   Returns control      │
│   │                         │
│   └─► Continue in main     │
└─────────────────────────────┘

Function Types Comparison

┌─────────────────┬─────────────────┐
│ Function        │ Arrow Function  │
├─────────────────┼─────────────────┤
│ function add()  │ const add = ()  │
│ { return ... }  │ => ...           │
│                 │                 │
│ Has 'this'      │ No 'this'       │
│ Can be hoisted  │ Not hoisted     │
│ More verbose    │ More concise    │
└─────────────────┴─────────────────┘

Frequently Asked Questions (FAQ)

Q1: What's the difference between function declaration and arrow function?

Function declaration - Hoisted, has this binding
Arrow function - Not hoisted, no this binding, shorter syntax

Use arrow functions for most cases, function declarations when you need this.

Q2: Can I call a function before declaring it?

A: With function declarations, yes (hoisting):

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

With arrow functions, no:

greet();  // Error!
 
const greet = () => console.log("Hello!");

Q3: What happens if I don't return anything?

A: Function returns undefined:

function doSomething() {
    console.log("Done");
    // No return statement
}
 
let result = doSomething();  // undefined

Q4: Can I have optional parameters?

A: Yes! Use default parameters:

function greet(name = "Guest") {
    return `Hello, ${name}!`;
}

Q5: What's a callback function?

A: A function passed as an argument to another function:

function process(callback) {
    callback("Done");
}
 
process(function(result) {
    console.log(result);
});

Q6: What's a closure?

A: A function that remembers variables from its outer scope:

function outer() {
    let x = 10;
    return function inner() {
        return x;  // Remembers x
    };
}

Q7: Can I return multiple values?

A: Return an object or array:

function getData() {
    return { name: "John", age: 25 };
    // Or: return ["John", 25];
}

Q8: What's the difference between parameters and arguments?

Parameters - Variables in function definition
Arguments - Values passed when calling function

function greet(name) {  // name is parameter
    return `Hello, ${name}!`;
}
 
greet("John");  // "John" is argument

Q9: Can I use arrow functions everywhere?

A: Almost! But not for:

Object methods (if you need this)
Event handlers (if you need this)
Constructors

For most cases, arrow functions are fine!

Q10: How do I handle errors in functions?

A: Use try-catch:

function riskyFunction() {
    try {
        // Risky code
    } catch (error) {
        console.error("Error:", error);
    }
}

Next Steps

Now that you understand functions, here's what to learn next:

Next: Learn about JavaScript Arrays - Work with lists of data
Explore JavaScript Objects - Store and organize data
Understand JavaScript DOM - Interact with web pages
Master JavaScript Events - Handle user interactions

Functions are essential in JavaScript. Practice writing different types of functions to get comfortable!