Arrays and Objects — Storing and Handling Data

1.Arrays — ordered lists

So far we have put one value in one variable. But you cannot store 30 students' scores in 30 variables. An array is a data type that holds several values in order under one name. You make one by listing values separated by commas inside square brackets, like [70, 85, 90]. The lists we took apart one by one with for...of in Lesson 4 were arrays.

You take values out of an array by their position number, the index. Indexes start at 0, not 1, so the first value is arr[0] and the second is arr[1]. The number of values is arr.length, and the index of the last value is always arr.length - 1. This is exactly where the off-by-one mistakes from Lesson 4 come from.

Reading an index that doesn't exist gives no error, just undefined. In an array of length 3, reading arr[3] or arr[-1] both give undefined. If you want to count from the end, arr.at(-1) gives the last value. You can mix numbers, strings and booleans in one array, but in practice arrays are easier to handle when they hold values of the same kind.

const fruits = ['apple', 'pear', 'plum'];
console.log(fruits[0], fruits[2]);
console.log(fruits.length);
console.log(fruits[fruits.length - 1]);
console.log(fruits[3]);
console.log(fruits.at(-1));

apple plum
3
plum
undefined
plum

2.Changing and searching arrays — `push`, `pop`, `includes`, `indexOf`

push adds a value to the end of an array, and pop takes the last value out, returning it and removing it from the array. You can also change a value by assigning to an index directly, as in arr[1] = 'grape'. Here is something easy to get confused about: even an array created with const can have its contents changed. What const prevents is "putting a different array into that name," not changing the slots inside the array.

To check whether a value is in an array, includes returns true or false and indexOf returns its position. indexOf returns -1 when it finds nothing — the same convention we used in Lesson 4 to mark "not found." So if you write if (arr.indexOf(x)), it is false when the value is in the first slot (0) and true when it is not found (-1) (truthy and falsy from Lesson 3). If you only want to know whether it is there, use includes.

Putting an array into another variable does not copy it; it creates one more name that points to the same array. In the code below, a push onto b changes a too. It is like two people sharing the address of the same house. If you really need a separate copy, spread it into a new array with [...a]. Objects behave exactly the same way.

const cart = ['milk', 'bread'];
cart.push('eggs');
console.log(cart, cart.length);
const last = cart.pop();
console.log(last, cart);
console.log(cart.includes('bread'), cart.indexOf('bread'));
console.log(cart.indexOf('rice'));

[ 'milk', 'bread', 'eggs' ] 3
eggs [ 'milk', 'bread' ]
true 1
-1

const a = [1, 2];
const b = a;
b.push(3);
console.log(a);
const c = [...a];
c.push(4);
console.log(a, c);

[ 1, 2, 3 ]
[ 1, 2, 3 ] [ 1, 2, 3, 4 ]

3.Objects — labeled slots

If arrays find values by "which position," objects find values by "which name." You make one by listing key: value pairs separated by commas inside curly braces, like { name: 'Alex', age: 20 }. Each key-value pair is called a property. Objects fit well when several pieces of information together describe one thing, such as one member or one product.

Properties are usually read with a dot, as in user.name, and when the key name is stored in a variable, with brackets, as in user[key]. Reading a property that doesn't exist gives undefined, just like a missing array slot. But if you then read a property from that undefined, you get a TypeError. The code below does exactly that; the cause is misspelling the key name as nmae. The exact wording of the message differs slightly between browsers.

This error is one of the most common ones you see when you plug AI-written code into real data. It usually happens when the key names in the data differ from the key names the code expected, or when some items are missing that property. The (reading 'length') in parentheses in the error message tells you what it failed to read, so trace back to find why the value just before it is undefined (Lesson 8).

const user = { name: 'Alex', age: 20 };
console.log(user.name, user.age);
user.age = 21;
user.city = 'Boston';
console.log(user);
const key = 'name';
console.log(user[key]);
console.log(user.email);

Alex 20
{ name: 'Alex', age: 21, city: 'Boston' }
Alex
undefined

const user = { name: 'Alex' };
console.log(user.nmae);
console.log(user.nmae.length);

undefined
TypeError: Cannot read properties of undefined (reading 'length')

4.An array of objects = a table

Most real data comes in the shape of an "array of objects." Each slot of the array is a row of the table, and the object's keys are the column names. Think of it as one sheet of a spreadsheet such as Excel moved into code. The table and code below show the same fictional sales records in two ways.

In this shape, combining the loops of Lesson 4 with the property reading you just learned lets you do almost any calculation. Take out the rows one at a time (for...of), read the column you need (row.qty), and accumulate or count. In Lesson 9 you will turn a table written as text into this shape and compute totals, averages and totals per group yourself.

const sales = [
  { item: 'notebook', price: 1500, qty: 4 },
  { item: 'pencil', price: 500, qty: 10 },
  { item: 'eraser', price: 800, qty: 3 },
];
let revenue = 0;
for (const row of sales) {
  revenue += row.price * row.qty;
}
console.log(revenue);

13400

5.A first taste of `map`, `filter` and `reduce`

Arrays have methods that stand in for loops. The three most used are map, filter and reduce. All three take an arrow function like those in Lesson 5 and call it for each value in the array. map builds a new array from the transformed value of each item (same length), filter builds a new array of only the values for which the function returned true (same length or shorter), and reduce folds the values into one, such as a total.

The important point is that map and filter do not change the original array; they return a new one. This is the same property as the pure functions of Lesson 5, so the results are easy to predict. With reduce, always pass a starting value as the second argument. The 0 in reduce((s, x) => s + x, 0) corresponds to let sum = 0 in the running-total pattern of Lesson 4. Leave out the starting value and an empty array gives a TypeError.

At first a loop may be easier to read, and that's fine. These methods are just a shorter way to write what loops can do. However, AI-written code often chains these three together, so it is worth practicing reading such chains by breaking them into single steps and printing the intermediate results.

const prices = [1500, 500, 800, 12000];
const withTax = prices.map((p) => p * 1.1);
console.log(withTax.map((p) => Math.round(p)));
const cheap = prices.filter((p) => p < 1000);
console.log(cheap);
const total = prices.reduce((s, p) => s + p, 0);
console.log(total);
console.log(prices);

[ 1650, 550, 880, 13200 ]
[ 500, 800 ]
14800
[ 1500, 500, 800, 12000 ]

6.JSON — a text format for exchanging data

JSON is a format for writing objects and arrays as text (strings). Its name comes from JavaScript, but today almost every programming language and web service uses it to exchange data. Many configuration files, server responses and pieces of data that apps save are JSON. JSON.stringify turns a value into JSON text, and JSON.parse turns JSON text back into a value.

JSON looks like JavaScript object syntax but is stricter. Keys must be wrapped in double quotes, and strings may use only double quotes. A comma after the last item is not allowed, and comments are not allowed either. Functions and undefined cannot be stored, so when you stringify them they are dropped from object properties and turned into null inside arrays. Break even one rule and JSON.parse throws a SyntaxError.

JSON squeezed onto one long line is hard to read. Paste it into a JSON formatter tool and it will indent it for you, and it may also point out where the rules are broken. However, don't paste data containing personal information, such as real member records, into outside tools or AI; replace it with fictional data that has the same structure before checking it (Lesson 10).

const item = {
  name: 'notebook',
  price: 1500,
  tags: ['office'],
};
const text = JSON.stringify(item);
console.log(text);
console.log(typeof text);
const back = JSON.parse(text);
console.log(back.price + 500);

{"name":"notebook","price":1500,"tags":["office"]}
string
2000

const bad = "{ name: 'notebook' }";
console.log(JSON.parse(bad));

SyntaxError: Expected property name or '}' in JSON at position 2 (line 1 column 3)