Functions

Function Declarations

Basic Declaration

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

console.log(greet('John')); // "Hello, John!"

Function Expression

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

Named Function Expression

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

// greetFn is only accessible inside the function

Hoisting

// Declaration: hoisted
console.log(add(2, 3)); // 5
function add(a, b) {
  return a + b;
}

// Expression: NOT hoisted
console.log(multiply(2, 3)); // Error!
const multiply = function(a, b) {
  return a * b;
};

Default Parameters

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

greet();      // "Hello, Guest!"
greet('John'); // "Hello, John!"

Rest Parameters

function sum(...numbers) {
  return numbers.reduce((total, n) => total + n, 0);
}

sum(1, 2, 3);    // 6
sum(1, 2, 3, 4); // 10

Early Return

function process(user) {
  if (!user) return null;
  if (!user.active) return null;
  
  // Main logic here
  return user.name;
}

Parameters and Return

Multiple Parameters

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

add(1, 2, 3); // 6

Arguments Object

function sum() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}

sum(1, 2, 3); // 6

Returning Multiple Values

// Using object
function getUser() {
  return {
    name: 'John',
    age: 30,
    email: 'john@example.com'
  };
}

const { name, age } = getUser();

// Using array
function getCoordinates() {
  return [10, 20];
}

const [x, y] = getCoordinates();

Returning Functions

function createMultiplier(multiplier) {
  return function(number) {
    return number * multiplier;
  };
}

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

double(5);  // 10
triple(5);  // 15

Void Operator

// Use when you don't care about return value
void console.log('no return value');

Undefined Return

function doNothing() {
  // No return statement
}

console.log(doNothing()); // undefined

First-Class Functions

Functions in JavaScript are first-class citizens:

Assign to Variables

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

console.log(greet('John'));

Pass as Arguments

function doTwice(fn, value) {
  fn(value);
  fn(value);
}

doTwice(console.log, 'Hello');
// Hello
// Hello

Return from Functions

function createGreeter(greeting) {
  return function(name) {
    return `${greeting}, ${name}!`;
  };
}

const sayHello = createGreeter('Hello');
const sayHi = createGreeter('Hi');

sayHello('John'); // "Hello, John!"
sayHi('Jane');   // "Hi, Jane!"

Callbacks

// Array methods
const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map(function(n) {
  return n * 2;
});

// Event listeners
document.querySelector('button').addEventListener('click', function() {
  console.log('Clicked!');
});

// Async callbacks
setTimeout(function() {
  console.log('Done!');
}, 1000);

Higher-Order Functions

// Function that takes a function
function repeat(n, fn) {
  for (let i = 0; i < n; i++) {
    fn(i);
  }
}

repeat(3, console.log);
// 0
// 1
// 2

// Function that returns a function
function multiplyBy(factor) {
  return function(number) {
    return number * factor;
  };
}

const double = multiplyBy(2);
double(5); // 10

IIFE (Immediately Invoked Function Expression)

(function() {
  const private = 'I am private';
  console.log(private);
})();

// private is not accessible outside

Closures (Preview)

function createCounter() {
  let count = 0;
  return {
    increment: () => ++count,
    decrement: () => --count,
    getCount: () => count
  };
}

const counter = createCounter();
counter.increment(); // 1
counter.increment(); // 2
counter.getCount();  // 2