Skip to content
WANCODE
BM

Arrays: Keeping Lists of Things

15 minBeginnerHTML · CSS · JS

In this lesson

  • Create an array and read items by their zero-based index
  • Use length, push, pop, includes and indexOf
  • Build new arrays from old ones with map and filter

The big idea

An array is one variable that holds an ordered list of values. Each value has a position number (an index) that starts at 0, not 1.

Imagine storing a shopping list with one variable per item: item1, item2, item3… It falls apart the moment the list grows. An array keeps the whole list in a single variable, in order.

JavaScript
const cart = ["roti canai", "teh tarik", "nasi lemak"];

cart[0];            // "roti canai"  ← the first item is index 0
cart[2];            // "nasi lemak"
cart[3];            // undefined     ← nothing there
cart.length;        // 3
cart[cart.length - 1]; // "nasi lemak" ← always the last item

Counting starts at zero

An array with 3 items has indexes 0, 1 and 2. The last index is always length - 1. Asking for an index that doesn't exist gives undefined, not an error — so typos here fail quietly.

Changing an array

Arrays come with built-in methods — functions attached to the array that you call with a dot. Even when the array is declared with const, you can still change what's inside it; const only stops you from pointing the variable at a different array.

JavaScript
const cart = ["roti canai", "teh tarik"];

cart.push("kuih");          // adds to the end → ["roti canai", "teh tarik", "kuih"]
const removed = cart.pop(); // removes the last item and gives it back → "kuih"

cart.includes("teh tarik"); // true
cart.includes("milo");      // false
cart.indexOf("teh tarik");  // 1
cart.indexOf("milo");       // -1  ← "not found"

cart[0] = "roti telur";     // replace the item at index 0
push(item)
Adds to the end. Changes the array.
pop()
Removes and returns the last item. Changes the array.
includes(item)
true or false: is it in the array?
indexOf(item)
The position of the first match, or -1 if it isn't there.

Transforming whole lists: map and filter

Often you want to do something to every item. map and filter take a function, call it once for each item, and build a new array from the results. The original array is left untouched.

map changes each item; filter keeps only the items that pass a test.
JavaScript
const prices = [4.5, 12, 2.8];

// map: one new value for every item (same length)
const doubled = prices.map(function (price) {
  return price * 2;
}); // [9, 24, 5.6]

// The same thing with the shorter arrow function syntax:
const doubled2 = prices.map((price) => price * 2);

// filter: keep the items where the function returns true
const cheap = prices.filter((price) => price < 5); // [4.5, 2.8]

console.log(prices); // still [4.5, 12, 2.8]

(price) => price * 2 is just a shorter way to write function (price) { return price * 2; }. With one expression after the arrow, the return is automatic.

Finish the two functions in script.js:

1. lastItem(list) returns the last item of any array — it must work for arrays of any length, and give undefined for an empty array.

2. addUnique(list, item) pushes item onto the end of list only if it isn't already in it, then returns the list.

Checks

  • lastItem returns the last item of any array
  • addUnique adds new items but skips duplicates

Check understanding

Q1

const drinks = ["teh", "kopi", "milo"]; — what is drinks[1]?

Q2

What does ["a", "b"].indexOf("z") return?

Q3

After const big = nums.filter((n) => n > 10);, what happens to nums?

What you learned

  • An array holds an ordered list; indexes start at 0 and the last one is length - 1.
  • push/pop change the array; includes and indexOf ask questions about it (-1 means not found).
  • map transforms every item and filter keeps some — both return a new array.
Preview

Console output from your code appears here.

Step 1 of 3