JavaScript: functions, arrays and objects

Two ways into the same idea

Before You Start

The Core Idea

1Functions: a recipe with a name

A function is defined with function and a name, then parameters in parentheses (its inputs), then a block. return hands back the result and ends the function. You call it by name and give it arguments (the actual values). A parameter can have a default for when none is given.

function price(cups, each = 14) {
  return cups * each;
}

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

console.log(price(3));        // uses the default 14
console.log(price(3, 18));    // overrides it
console.log(greet("Lina"));

const result = price(2);
console.log("stored result:", result);

2Arrow functions and passing functions

An arrow function is a shorter form: (a, b) => a + b. If its body is a single expression it needs no braces and no return. In JavaScript a function is a value like any other: store it in a variable, pass it to another function to call later. A function passed this way is a callback, and you will see them everywhere: events, timers, array methods.

const withVat = (amount) => Math.round(amount * 1.15);
const isCheap = (price) => price < 15;

console.log(withVat(100), isCheap(12), isCheap(20));

// a function that takes another function
function applyToAll(list, fn) {
  const out = [];
  for (const item of list) out.push(fn(item));
  return out;
}
console.log(applyToAll([10, 20, 30], withVat));
console.log(applyToAll([10, 20, 30], (n) => n / 10));

3Arrays: ordered lists

An array is a list in square brackets [ ]. Each item has an index starting at zero: the first is list[0], the last list[list.length - 1] or list.at(-1). push adds to the end, pop removes from the end, includes asks "is it there?", indexOf "where is it?", and slice cuts out a part without changing the original.

const menu = ["espresso", "latte", "mocha"];

console.log(menu[0], menu.at(-1), menu.length);
menu.push("v60");
console.log(menu);
console.log(menu.includes("tea"), menu.indexOf("mocha"));
console.log(menu.slice(1, 3), "| original:", menu.length, "items");

const last = menu.pop();
console.log("removed", last, "->", menu);

4filter, map and reduce: think in transformations

Instead of a for loop with temporary variables, describe what you want: filter(fn) picks the items the function returns true for. map(fn) transforms each item into something new and returns an array of the same length. reduce(fn, start) combines the array into one value. Each returns a new value and leaves the original alone. Alongside them: find for the first match, some/every for whether any/all match, and sort for ordering.

const orders = [
  { id: 1, item: "latte", cups: 2, paid: true },
  { id: 2, item: "mocha", cups: 1, paid: false },
  { id: 3, item: "v60",   cups: 3, paid: true },
  { id: 4, item: "latte", cups: 1, paid: true },
];
const PRICE = { latte: 14, mocha: 16, v60: 18 };

const paid = orders.filter((o) => o.paid);
const amounts = paid.map((o) => o.cups * PRICE[o.item]);
const revenue = amounts.reduce((sum, x) => sum + x, 0);

console.log("paid ids:", paid.map((o) => o.id));
console.log("amounts:", amounts);
console.log("revenue:", revenue);
console.log("first unpaid:", orders.find((o) => !o.paid).item);
console.log("any big order?", orders.some((o) => o.cups >= 3));

How does reduce work step by step? The accumulator sum starts at the second argument (0), then for each item it returns sum + x, which becomes sum for the next item: 0 → 28 → 82 → 96. The last value is the result.

5Objects: a card of properties

An object goes in curly braces { }, holding key: value pairs. You read a property with a dot user.name, or with brackets user["name"] when the key is in a variable. You add or change a property by assigning. A value can be anything: text, a number, an array, another object, or a function (then it is called a method).

const user = {
  name: "Noura",
  city: "Riyadh",
  points: 120,
  favourites: ["latte", "v60"],
  prefs: { milk: "oat", sugar: false },
  greet() {
    return `Hi, I am ${this.name}`;
  },
};

console.log(user.name, user["city"], user.favourites[1], user.prefs.milk);
user.points += 30;
user.phone = "0500000000";
console.log(user.points, user.phone);
console.log(user.greet());
console.log(Object.keys(user));

6Destructuring, spread, ?. and ??

Destructuring pulls out what you need from an object or array in one line: const { name, city } = user. Spread ... unpacks an array or object inside another, so you copy with a change without touching the original. ?. reads a property safely, giving undefined instead of crashing if what comes before it is missing. ?? gives a fallback when the value is null or undefined.

const user = { name: "Noura", city: "Riyadh", prefs: { milk: "oat" } };

const { name, city } = user;
const moved = { ...user, city: "Jeddah" };
console.log(name, city, "->", moved.city, "| original still", user.city);

const [first, ...rest] = ["latte", "mocha", "v60"];
console.log(first, rest);
console.log([...rest, "tea"]);

console.log(user.prefs?.milk);
console.log(user.address?.street);                // undefined, no crash
console.log(user.address?.street ?? "no address");

7JSON: data when it travels

When the server sends data to the browser, or you save something in the browser, objects do not travel as they are but as text in JSON format, which looks like JavaScript objects except the keys are always in double quotes. JSON.stringify(obj) turns an object into text, and JSON.parse(text) turns it back into an object.

const order = { id: 7, items: ["latte", "mocha"], total: 30, paid: true };

const text = JSON.stringify(order);
console.log(typeof text, text);

const back = JSON.parse(text);
console.log(typeof back, back.items[1], back.total + 5);

// what an API usually sends back
const reply = '{"menu":[{"name":"latte","price":14},{"name":"v60","price":18}]}';
const data = JSON.parse(reply);
console.log(data.menu.map((d) => `${d.name}: ${d.price}`).join(", "));

Worked example

Problem: the café's sales report for a whole day. From the list of orders: (1) only the paid ones, (2) revenue per drink, (3) the best-selling drink, (4) the customers who ordered more than once. Solution with a small function per question:

const PRICE = { latte: 14, mocha: 16, v60: 18 };
const orders = [
  { customer: "Ali",  item: "latte", cups: 2, paid: true },
  { customer: "Sara", item: "v60",   cups: 1, paid: true },
  { customer: "Ali",  item: "mocha", cups: 1, paid: false },
  { customer: "Lina", item: "latte", cups: 3, paid: true },
  { customer: "Sara", item: "latte", cups: 1, paid: true },
];

const paidOnly = (list) => list.filter((o) => o.paid);

function revenueByDrink(list) {
  return list.reduce((acc, o) => {
    acc[o.item] = (acc[o.item] ?? 0) + o.cups * PRICE[o.item];
    return acc;
  }, {});
}

function bestSeller(byDrink) {
  return Object.entries(byDrink).sort((a, b) => b[1] - a[1])[0];
}

function repeatCustomers(list) {
  const counts = {};
  for (const { customer } of list) counts[customer] = (counts[customer] ?? 0) + 1;
  return Object.keys(counts).filter((name) => counts[name] > 1);
}

const paid = paidOnly(orders);
const byDrink = revenueByDrink(paid);
console.log("revenue by drink:", byDrink);
console.log("best seller:", bestSeller(byDrink));
console.log("came back:", repeatCustomers(orders));

Myth vs Reality

Where you meet it at work

Test your understanding

Quick review cards

Check Your Understanding