Functions in JavaScript

Functions are the building blocks of JavaScript programs. They let you write code once and reuse it many times. Think of functions as recipes - you write the instructions once, and then you can follow them whenever you need.

What You'll Learn

• How to define and call functions
• Function parameters and return values
• Different ways to create functions
• Arrow functions and their syntax

Basic Function Syntax

Here's how to create a simple function:

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

// Calling the function
greet();
greet(); // You can call it multiple times

Functions with Parameters

Functions become more useful when they can work with different inputs:

// Function with one parameter
function greetPerson(name) {
  console.log("Hello, " + name + "!");
}

greetPerson("Alice");
greetPerson("Bob");
greetPerson("Charlie");

// Function with multiple parameters
function introduce(name, age) {
  console.log("My name is " + name + " and I am " + age + " years old.");
}

introduce("Alice", 25);
introduce("Bob", 30);

Return Values

Functions can send data back using the return keyword:

// Function that returns a value
function add(a, b) {
  return a + b;
}

// Store the result in a variable
let sum = add(5, 3);
console.log("5 + 3 =", sum);

// Use the result directly
console.log("10 + 20 =", add(10, 20));

// Function with multiple calculations
function calculate(x, y) {
  let sum = x + y;
  let product = x * y;
  return product; // Only the product is returned
}

console.log("Result:", calculate(4, 5));

function calculate(x, y) {
  const product = x * y;
}

const result = calculate(4, 5);
console.log("Result:", result);

Function Expressions

You can also create functions and assign them to variables:

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

console.log("3 * 4 =", multiply(3, 4));
console.log("5 * 6 =", multiply(5, 6));

Arrow Functions

Modern JavaScript has a shorter syntax for functions called arrow functions:

// Traditional function
function square(x) {
  return x * x;
}

// Arrow function (shorter syntax)
const squareArrow = (x) => {
  return x * x;
};

// Even shorter (one parameter, one expression)
const squareShort = x => x * x;

console.log("Square of 5:", square(5));
console.log("Square of 6:", squareArrow(6));
console.log("Square of 7:", squareShort(7));

// Arrow function with multiple parameters
const add = (a, b) => a + b;
console.log("10 + 15 =", add(10, 15));

Practical Examples

Let's create some useful functions:

// Convert Celsius to Fahrenheit
function celsiusToFahrenheit(celsius) {
  return (celsius * 9/5) + 32;
}

console.log("0°C =", celsiusToFahrenheit(0), "°F");
console.log("25°C =", celsiusToFahrenheit(25), "°F");
console.log("100°C =", celsiusToFahrenheit(100), "°F");

// Check if a number is even
function isEven(number) {
  return number % 2 === 0;
}

console.log("Is 4 even?", isEven(4));
console.log("Is 7 even?", isEven(7));

// Calculate the area of a rectangle
const calculateArea = (width, height) => width * height;

console.log("Area of 5x3 rectangle:", calculateArea(5, 3));
console.log("Area of 10x8 rectangle:", calculateArea(10, 8));

Default Parameters

You can provide default values for parameters:

// Function with default parameter
function greetWithDefault(name = "Guest") {
  console.log("Hello, " + name + "!");
}

greetWithDefault("Alice");  // Uses "Alice"
greetWithDefault();         // Uses default "Guest"

// Multiple default parameters
function createProfile(name = "Anonymous", age = 18) {
  console.log(name + " is " + age + " years old");
}

createProfile("Bob", 25);
createProfile("Charlie");
createProfile();

Try It Yourself

Reading about functions is not the same as writing them. This is a build task: a small program that reports its own pass/fail. You are given fixed rectangle data and three empty functions to finish — a declaration, an arrow function, and one with a default parameter. Run it and it fails immediately, telling you which function is still missing. Implement each one until every check passes and it prints All checks passed.

The three functions reuse exactly what this lesson taught: writing a declaration and an arrow function, taking parameters, returning a value with return, and giving a parameter a default. The starter already has the data, the stubs, and the checks — you write only the logic inside each function. Nothing above spells out all three answers, so you will have to assemble them yourself.

const assert = require('assert');

// The data: rectangle dimensions to measure. Do NOT change this array.
const rectangles = [
{ label: "small", width: 5, height: 3 },
{ label: "wide", width: 10, height: 4 },
{ label: "square", width: 6, height: 6 },
];

// TODO 1: return the area of a rectangle (width times height).
//   area(5, 3) -> 15
function area(width, height) {
// your code here
}

// TODO 2: return the perimeter of a rectangle: 2 * (width + height).
//   perimeter(5, 3) -> 16
const perimeter = (width, height) => {
// your code here
};

// TODO 3: return a label like "small: 15" — the tag, a colon, a space, then the value.
//   Give tag a default of "shape", so describe(15) uses "shape".
//   describe(15, "small") -> "small: 15"
//   describe(15) -> "shape: 15"
function describe(value, tag = "shape") {
// your code here
}

// --- Build checks: these must all pass. Do not edit below this line. ---
assert.strictEqual(
area(5, 3),
15,
"area(width, height) should return width times height",
);
assert.strictEqual(
perimeter(5, 3),
16,
"perimeter(width, height) should return 2 * (width + height)",
);
assert.strictEqual(
describe(15),
"shape: 15",
"describe(value) should default its tag to 'shape' when no tag is passed",
);
assert.strictEqual(
describe(15, "small"),
"small: 15",
"describe(value, tag) should join the tag and value as 'tag: value'",
);

console.log("All checks passed.");
console.log("Area 5x3:", area(5, 3));
console.log("Perimeter 5x3:", perimeter(5, 3));
console.log("Described:", describe(area(rectangles[0].width, rectangles[0].height), rectangles[0].label));

Once it passes, try two variations and predict each before running:

1. Drop the default. Rewrite describe's signature as function describe(value, tag) — no tag = "shape" default. Predict what describe(15) returns with no second argument before running it. An omitted parameter is undefined, so the string becomes "undefined: 15" and the default-tag check fails — the exact reason the default parameter was there.
2. The arrow that forgets to return. Give perimeter a block body with no return: (width, height) => { 2 * (width + height); }. Decide what perimeter(5, 3) yields before running. A { } arrow body does not return its last expression the way a concise => 2 * (width + height) body does, so the function returns undefined and the perimeter check fails.

Key Takeaways

• Functions help organize and reuse code
• Functions can accept parameters (inputs) and return values (outputs)
• There are multiple ways to create functions: declarations, expressions, and arrow functions
• Arrow functions (=>) provide a shorter syntax for simple functions
• Default parameters make functions more flexible

Next Steps

Now that you know how to create functions, you're ready to learn about control flow - how to make decisions and repeat actions in your code using if statements and loops!

Pro Tip: When writing functions, give them clear, descriptive names that explain what they do. A function called calculateTotal is much better than one called calc or x. Good names make your code easier to read and understand!