Lists & objects: organizing data

Why one value is never enough

So far you have probably stored one thing at a time: a name, a price, a single number. A variable is like a labeled box that holds exactly one item. That works beautifully until the real world shows up, because the real world almost never comes in single pieces.

Think about a shopping list, the students in a class, or the songs in a playlist. Each of these is many values that belong together. You could make a separate variable for every single one, but with twenty items that means twenty boxes to name, track, and remember.

That is exactly the problem collections solve. Instead of many separate boxes, you get one container that holds all the related values together, and you give that container a single name. The two containers you will use most are the array and the object.

The array: an ordered list

An array is an ordered list of values held under one name. Picture a row of numbered lockers: the order is fixed, and each value sits in its own slot. You write one with square brackets and separate the items with commas.

let fruits = ["apple", "banana", "cherry"];
console.log(fruits[0]); // "apple"
console.log(fruits[2]); // "cherry"

To pull a value back out, you ask for its position, called the index. The one surprise for beginners is that counting starts at 0, not 1. So the first fruit is at index 0, the second at index 1, and the third at index 2.

The object: named drawers

Sometimes position is the wrong way to organize things. If you are describing one person, "item number 1" and "item number 2" tell you nothing. You want labels like name, age, and city. That is what an object gives you.

An object is a set of labeled drawers. Each drawer has a key (the label) and a value (what is inside). You write it with curly braces, and each pair is written as `key: value`. To get a value you ask for it by name, not by number.

let person = {
  name: "Mei",
  age: 28,
  city: "Taipei"
};
console.log(person.name); // "Mei"
console.log(person.city); // "Taipei"

Here is the clean contrast. An array asks "which position?" and answers with `fruits[0]`. An object asks "which label?" and answers with `person.name`. Use an array for an ordered list of like things; use an object to bundle the named details of one thing.

Nesting and JSON

The real power shows up when you put these containers inside each other. A value in an object can itself be an array, and an item in an array can itself be an object. This is called nesting, and it lets you model almost anything.

let student = {
  name: "Mei",
  grades: [88, 92, 79],
  address: { city: "Taipei", zip: "100" }
};
console.log(student.grades[1]);   // 92
console.log(student.address.city); // "Taipei"

Reading nested data is just following the path. `student.grades[1]` means: go into student, then into the grades array, then take position 1. You chain the dots and brackets until you land on the value you want.

Now for the payoff. When you take this exact nested structure and write it out as plain text, you get JSON (JavaScript Object Notation). JSON is how programs send these collections to each other, for example when a website asks a server for data. It looks almost identical to the object above, just written as text.

Putting it all together

You started with single boxes and ran out of room. Collections gave you containers that hold many related values under one name, and two of them carry most of the load.

1. Use an array for an ordered list, and reach each item by its position, counting from 0.
2. Use an object to bundle the named details of one thing, and fetch each value by its key.
3. Nest them freely, then read values by following the path of dots and brackets.
4. Recognize JSON as that same structure written as text, which is how programs trade data.

Once these two shapes feel natural, most of programming becomes choosing the right container for your data and then walking through it. That is a huge step, and you have just taken it.