JavaScript Functions

Functions are reusable blocks of code that perform a task or compute a value. JavaScript treats functions as "first-class citizens," meaning they can be assigned to variables, passed as arguments, and returned from other functions — this flexibility underlies much of the language's power, from callbacks to modern array methods.

JavaScript offers three main ways to define a function: function declarations, function expressions, and arrow functions. Each has different rules around hoisting, the this keyword, and syntax, so choosing the right form matters as much as knowing the syntax itself.

Why it matters

Functions are the unit of reuse in JavaScript, and they are also values: they are passed to event listeners, array methods and promises all the time. The three ways of writing them behave differently in small but important ways, and arrow functions in particular are in almost every line of modern code.

Function Declarations

A function declaration uses the function keyword followed by a name: function add(a, b) { return a + b; }. Function declarations are fully hoisted, meaning they can be called earlier in the code than where they are written, because the entire function definition (not just the name) is made available at the top of its scope.

Function Expressions

A function expression assigns a function to a variable: const add = function(a, b) { return a + b; };. Unlike declarations, function expressions are not hoisted with their definition — only the variable declaration is hoisted (following var/let/const rules), so calling the function before this line fails.

Arrow Functions

Arrow functions use a shorter syntax: const add = (a, b) => a + b;. Beyond brevity, arrow functions do not bind their own this — they inherit this from the surrounding (lexical) scope, which makes them especially useful inside callbacks and array methods where a regular function's this would otherwise be reassigned unexpectedly. Arrow functions also cannot be used as constructors and have no arguments object of their own.

Default and Rest Parameters

Default parameters let you specify a fallback value used when an argument is omitted or explicitly undefined: function greet(name = "friend") { ... }. Rest parameters collect any remaining arguments into a real array using ...: function sum(...numbers) { ... } lets sum(1, 2, 3) receive numbers as [1, 2, 3], replacing the older, array-like arguments object with an actual array that supports methods like map and reduce.

Examples

console.log(declared(2, 3)); // works: declarations are hoisted

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

const expressed = function (a, b) {
  return a * b;
};

const arrowed = (a, b) => a - b;

console.log(expressed(4, 5));
console.log(arrowed(10, 4));

5
20
6

function buildOrder(item = "widget", ...extras) {
  return `Order: ${item} with extras [${extras.join(", ")}]`;
}

console.log(buildOrder());
console.log(buildOrder("gadget", "warranty", "gift wrap"));

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

console.log(sumAll(1, 2, 3, 4));

Order: widget with extras []
Order: gadget with extras [warranty, gift wrap]
10

Exercise

Write an arrow function greet whose name parameter defaults to friend, and a function sum that accepts any number of arguments and returns their total.

Expected output: Hello, friend!, Hello, Asha!, 6 (one per line)

// TODO: arrow function greet with a default parameter

// TODO: function sum using a rest parameter

console.log(greet());
console.log(greet("Asha"));
console.log(sum(1, 2, 3));

const greet = (name = "friend") => "Hello, " + name + "!";

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

console.log(greet());
console.log(greet("Asha"));
console.log(sum(1, 2, 3));

Quick quiz

Interview questions