Just enough JavaScript, part 2: functions, objects, arrays

Yesterday you named single values; today you learn the shapes that hold many of them, because test data never travels alone. A products list, a set of boundary passwords, a cart: in JavaScript these are all the same two shapes, an object and an array of objects.

Objects and functions

An object groups facts about one thing inside curly braces. A function is a named recipe that takes something in and hands something back. Save this as catalogue.js and run node catalogue.js:

const jerk = { name: 'Jerk Chicken Plate', price: 6800 };

function label(product) {
  return product.name + ': ' + product.price.toLocaleString('en-JM') + ' JMD';
}

console.log(jerk.name);   // Jerk Chicken Plate
console.log(label(jerk)); // Jerk Chicken Plate: 6,800 JMD

Read it back: the object holds two facts about one dish, the dot reaches in and pulls one out, and label is yesterday’s formatting line wrapped up so you never type it twice. You have also been reading a second kind of function since Day 2: the arrow form, like (p) => p.price, is a small unnamed function written inline, and async ({ page }) => in your tests is one too.

Arrays and the three verbs

An array is an ordered list in square brackets. Add this to catalogue.js:

const products = [
  { name: 'Deluxe Plantain Plate', price: 4500 },
  { name: 'Jerk Chicken Plate', price: 6800 },
  { name: 'Fresh Salad Bowl', price: 3900 },
  { name: 'Full Jerk Combo', price: 8200 },
  { name: 'Baked Cheese Patty', price: 1800 },
  { name: 'Served Festival', price: 5600 },
];

const dinner = products.find((p) => p.name === 'Full Jerk Combo');
console.log(dinner.price); // 8200

const cheap = products.filter((p) => p.price < 5000);
console.log(cheap.length); // 3

const names = products.map((p) => p.name);
console.log(names[0]); // Deluxe Plantain Plate

let subtotal = 0;
for (const p of products) {
  subtotal = subtotal + p.price;
}
console.log(subtotal); // 30800

Read it back in behavioural terms. find returns the first entry that matches, or undefined if none does. filter returns a smaller array, possibly empty, never an error. map transforms every entry and hands you a new array. And the for..of loop visits each entry in turn, here summing the whole catalogue the same way the store sums your cart.

This array is not a made-up shape. It is, give or take a field, exactly what the store’s own product feed returns, and on Day 11 you will fetch that feed inside a test and run these same verbs on it.

Test data is an array of objects, and find, filter, map, and a for..of loop are most of what a test file ever does with it.

Do this today

Three small exercises in catalogue.js, each one line plus a console.log:

1. filter the dishes that cost more than 5,000 JMD, and check the count against the store page.
2. find the Baked Cheese Patty and print its price.
3. map every product through yesterday’s label recipe so you print six ready-made JMD labels.

Tomorrow is the last JavaScript day, and it is the one that separates tests that lie from tests that wait: async and await.