JavaScript Functions - Complete Guide

// Function declaration
function greet(name) {
  return `Hello, ${name}!`;
}

// Calling the function
console.log(greet('Alice')); // Output: Hello, Alice!
console.log(greet('Bob'));   // Output: Hello, Bob!

Function declarations start with the `function` keyword, followed by the function name, parameters in parentheses, and the function body in curly braces.

// Function with multiple parameters
function calculateArea(width, height) {
  return width * height;
}

const area = calculateArea(5, 10);
console.log(area); // Output: 50

Functions can accept multiple parameters. The `return` statement sends a value back to the caller.

// Function expression
const greet = function(name) {
  return `Hello, ${name}!`;
};

console.log(greet('Charlie')); // Output: Hello, Charlie!

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

console.log(multiply(3, 4)); // Output: 12

Function expressions are useful when you want to assign functions to variables or pass them as arguments.

// Arrow function syntax
const greet = (name) => {
  return `Hello, ${name}!`;
};

// Shorter syntax (single expression)
const greet = (name) => `Hello, ${name}!`;

// Even shorter (single parameter, no parentheses needed)
const greet = name => `Hello, ${name}!`;

// Multiple parameters
const add = (a, b) => a + b;

// No parameters
const sayHello = () => 'Hello, World!';

console.log(greet('David')); // Output: Hello, David!
console.log(add(5, 3));       // Output: 8
console.log(sayHello());      // Output: Hello, World!

Arrow functions use `=>` syntax. If the function body is a single expression, you can omit the curly braces and return statement.

// Parameters with default values
function greet(name = 'Guest', greeting = 'Hello') {
  return `${greeting}, ${name}!`;
}

console.log(greet());              // Output: Hello, Guest!
console.log(greet('Alice'));       // Output: Hello, Alice!
console.log(greet('Bob', 'Hi'));    // Output: Hi, Bob!

// Rest parameters (collect remaining arguments)
function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3));        // Output: 6
console.log(sum(1, 2, 3, 4, 5));  // Output: 15

Default parameters allow you to provide fallback values. Rest parameters (`...`) collect multiple arguments into an array.

// Function with return value
function multiply(a, b) {
  return a * b;
}

const result = multiply(4, 5);
console.log(result); // Output: 20

// Function without return (returns undefined)
function logMessage(message) {
  console.log(message);
  // No return statement
}

const value = logMessage('Hello');
console.log(value); // Output: undefined

// Early return
function checkAge(age) {
  if (age < 18) {
    return 'Minor';
  }
  return 'Adult';
}

console.log(checkAge(15)); // Output: Minor
console.log(checkAge(25)); // Output: Adult

The `return` statement exits the function and sends a value back. You can use early returns to exit functions conditionally.

const globalVar = 'I am global';

function myFunction() {
  const localVar = 'I am local';
  console.log(globalVar); // Can access global
  console.log(localVar);  // Can access local
}

myFunction();
// console.log(localVar); // Error: localVar is not defined

// Variables declared with var are function-scoped
function example() {
  if (true) {
    var functionScoped = 'I am function scoped';
    let blockScoped = 'I am block scoped';
  }
  console.log(functionScoped); // Works
  // console.log(blockScoped); // Error: blockScoped is not defined
}

Variables declared with `const` and `let` are block-scoped, while `var` is function-scoped. Function parameters are also local to the function.

// Function that takes another function as argument
function operate(a, b, operation) {
  return operation(a, b);
}

const add = (x, y) => x + y;
const multiply = (x, y) => x * y;

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

// Function that returns another function
function createMultiplier(factor) {
  return function(number) {
    return number * factor;
  };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);

console.log(double(5));  // Output: 10
console.log(triple(5));  // Output: 15

Higher-order functions enable powerful patterns like function composition and creating specialized functions dynamically.

// Calculator functions
const add = (a, b) => a + b;
const subtract = (a, b) => a - b;
const multiply = (a, b) => a * b;
const divide = (a, b) => {
  if (b === 0) {
    return 'Error: Division by zero';
  }
  return a / b;
};

// Main calculator function
function calculate(operation, a, b) {
  const operations = {
    '+': add,
    '-': subtract,
    '*': multiply,
    '/': divide
  };
  
  const operationFunc = operations[operation];
  if (!operationFunc) {
    return 'Error: Invalid operation';
  }
  
  return operationFunc(a, b);
}

// Usage
console.log(calculate('+', 10, 5));  // Output: 15
console.log(calculate('-', 10, 5)); // Output: 5
console.log(calculate('*', 10, 5)); // Output: 50
console.log(calculate('/', 10, 5)); // Output: 2
console.log(calculate('/', 10, 0)); // Output: Error: Division by zero

This calculator demonstrates how to use functions to organize code, handle errors, and create a clean, maintainable structure.

// Callback function
function processArray(arr, callback) {
  const result = [];
  for (let item of arr) {
    result.push(callback(item));
  }
  return result;
}

const numbers = [1, 2, 3, 4, 5];
const doubled = processArray(numbers, (num) => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8, 10]

Callbacks are functions passed as arguments to be executed later. They're commonly used in array methods and event handlers.

// IIFE - runs immediately
(function() {
  console.log('This runs immediately!');
})();

// IIFE with parameters
(function(name) {
  console.log(`Hello, ${name}!`);
})('World');

IIFEs are functions that execute immediately after being defined. They're useful for creating isolated scopes.