Lesson 14 · Functions¶

Why functions?¶

A function is a block of code that you can reuse by giving it a name. You call it wherever you need, with different data.

Without functions:

// Calculate the area for three rectangles — repetitive code
const area1 = 5 * 3;
console.log(`Rectangle 1: ${area1}`);

const area2 = 10 * 4;
console.log(`Rectangle 2: ${area2}`);

const area3 = 7 * 2;
console.log(`Rectangle 3: ${area3}`);

With functions:

function area(length, width) {
  return length * width;
}

console.log(`Rectangle 1: ${area(5, 3)}`);
console.log(`Rectangle 2: ${area(10, 4)}`);
console.log(`Rectangle 3: ${area(7, 2)}`);

You gain: less code, fewer mistakes, easy to modify.

Function declaration¶

The "classic" style:

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

console.log(greet("Ana"));    // "Hello, Ana!"
console.log(greet("Mihai"));  // "Hello, Mihai!"

Parts:

• function — keyword.
• greet — function name.
• (name) — parameter list.
• { ... } — function body.
• return — what the function "returns" (sends back).

Function expression¶

A function can be stored in a variable:

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

console.log(greet("Ana"));

Notice:

• The function has no name after function (it's called anonymous).
• The line ends with ; (because it's an expression assigned to a variable).

Arrow function¶

The modern and compact form, introduced in ES6:

// Long version
const greet = (name) => {
  return `Hello, ${name}!`;
};

// Short version (implicit return)
const greet = (name) => `Hello, ${name}!`;

// One parameter — parentheses are optional
const greet = name => `Hello, ${name}!`;

// No parameters — parentheses are required
const time = () => new Date().toLocaleTimeString();

// Two or more parameters
const sum = (a, b) => a + b;

Rules:

• Single parameter: () optional.
• Body of a single expression: {} and return optional (implicit return).
• Body with multiple lines: {} and explicit return required.

Arrow vs regular — which to choose?¶

For now: use arrow for callbacks and short functions, function declaration for long top-level functions.

Parameters¶

Multiple¶

const sum = (a, b, c) => a + b + c;
console.log(sum(1, 2, 3));   // 6

Default values¶

If you call without an argument, the parameter takes the default value:

const greet = (name = "friend") => `Hello, ${name}!`;

console.log(greet());         // "Hello, friend!"
console.log(greet("Ana"));    // "Hello, Ana!"

Rest parameters¶

For a variable number of arguments:

const sum = (...numbers) => {
  let total = 0;
  for (const n of numbers) {
    total += n;
  }
  return total;
};

console.log(sum(1, 2, 3));         // 6
console.log(sum(5, 10, 15, 20));   // 50

...numbers gathers all arguments into an array called numbers.

return¶

• Without return, the function returns undefined.
• return stops the function execution immediately.

const test = () => {
  console.log("before");
  return;
  console.log("after");   // never executes
};

Early exit¶

Return early to avoid deep nesting:

// HARD to read
const checkAge = (a) => {
  if (a >= 0) {
    if (a >= 18) {
      return "adult";
    } else {
      return "minor";
    }
  } else {
    return "invalid value";
  }
};

// CLEAN with early return
const checkAge = (a) => {
  if (a < 0) return "invalid value";
  if (a >= 18) return "adult";
  return "minor";
};

Scope (visibility domain)¶

Scope = where a variable is visible.

Global scope¶

Declared outside any function — accessible from anywhere:

const siteName = "Computer Science Club";

function show() {
  console.log(siteName);   // OK, sees it
}

Function scope¶

Declared inside a function — accessible only in the function:

function compute() {
  const secret = 42;
  console.log(secret);   // OK
}

compute();
console.log(secret);   // ReferenceError!

Block scope (let / const)¶

let and const are block-scoped — limited to the nearest pair of {}:

if (true) {
  const x = 10;
  console.log(x);   // 10
}

console.log(x);   // ReferenceError!

Callback functions¶

A callback is a function that you pass to another function as an argument, to be called later:

const withDelay = (callback) => {
  setTimeout(callback, 1000);   // run callback after 1 second
};

withDelay(() => console.log("A second has passed!"));

Callbacks are everywhere in JS — you'll use them heavily for events (lesson 16) and for fetch (lesson 18).

Exercises¶

Exercise 1 — The square function¶

Write a function square(n) that returns n².

function square(n) {
  return n * n;
}

console.log(square(5));   // 25

// Or as an arrow:
const square = (n) => n * n;

Exercise 2 — Greet with default¶

Write greet(name = "friend") that prints "Hello, <name>!".

const greet = (name = "friend") => `Hello, ${name}!`;

console.log(greet());         // "Hello, friend!"
console.log(greet("Maria"));  // "Hello, Maria!"

Exercise 3 — Largest of three¶

The function largest(a, b, c) returns the largest of three numbers.

const largest = (a, b, c) => {
  if (a >= b && a >= c) return a;
  if (b >= c) return b;
  return c;
};

console.log(largest(3, 9, 5));   // 9

// Or very short:
const largest2 = (a, b, c) => Math.max(a, b, c);

Exercise 4 — Rewrite as arrow¶

Rewrite square and greet above using arrow functions, in the shortest possible forms.

const square = n => n * n;
const greet = (name = "friend") => `Hello, ${name}!`;

Mini-project: Temperature converter¶

Write two functions that convert temperatures between Celsius and Fahrenheit.

Formulas:

• Celsius → Fahrenheit: F = C * 9/5 + 32
• Fahrenheit → Celsius: C = (F - 32) * 5/9

Requirements:

• Two functions: celsiusToFahrenheit(c) and fahrenheitToCelsius(f).
• Call them with a few values.
• Display with a template literal: "0 °C = 32 °F".

// Conversion formulas
const celsiusToFahrenheit = (c) => c * 9 / 5 + 32;
const fahrenheitToCelsius = (f) => (f - 32) * 5 / 9;

// A few tests
console.log(`0 °C = ${celsiusToFahrenheit(0)} °F`);      // 0 °C = 32 °F
console.log(`100 °C = ${celsiusToFahrenheit(100)} °F`);  // 100 °C = 212 °F
console.log(`32 °F = ${fahrenheitToCelsius(32)} °C`);    // 32 °F = 0 °C
console.log(`212 °F = ${fahrenheitToCelsius(212)} °C`);  // 212 °F = 100 °C

const c = Number(prompt("Temperature in °C:"));
const f = celsiusToFahrenheit(c);
alert(`${c} °C = ${f.toFixed(1)} °F`);

Summary¶

• Functions let you reuse code with different inputs.
• Three forms: declaration (function name() {}), expression (const f = function() {}), arrow (const f = () => {}).
• Arrow is compact and preferred for short callbacks.
• Parameters can have default values and rest (...).
• return stops the function and sends a value back. Use early return to avoid nesting.
• The let/const scope is block-scoped ({}), var is function-scoped (avoid it).
• Callbacks are functions passed as arguments — you'll use them a lot for events.

Next step: → Lesson 15: DOM — HTML manipulation