JavaScript › Programming Fundamentals

Arrays and objects

4 min read Beginner 5 sections

Almost all data in JavaScript lives in one of two structures: arrays (ordered lists) and objects (labelled key-value pairs). When you read a real application’s code, you’re mostly reading these two — config objects, API responses, route tables. Get comfortable here and real code stops looking foreign.

You'll learn to

Build and read arrays and objects
Loop over each one the idiomatic way
Recognise these structures in real app code

Arrays — ordered lists

const subdomains = ["www", "api", "admin"];
subdomains[0];                     // "www"  (zero-indexed)
subdomains.length;                 // 3
subdomains.push("dev");            // add to the end
subdomains.includes("admin");      // true — membership test

// Loop over every item:
for (const sub of subdomains) {
  console.log(sub);
}

// Or transform with map / filter:
const urls = subdomains.map(s => "https://" + s + ".site.com");
const live = subdomains.filter(s => s !== "admin");

map and filter are everywhere in modern code. map transforms each item into something new (subdomains into URLs); filter keeps only items matching a condition. Reading them fluently is most of reading JavaScript.

Objects — labelled data

const config = {
  apiUrl: "https://api.site.com",
  timeout: 5000,
  debug: false,
};

config.apiUrl;          // dot access → "https://api.site.com"
config["timeout"];      // bracket access → 5000
config.token = "abc";   // add or change a key

// Loop over keys and values:
for (const [key, value] of Object.entries(config)) {
  console.log(key, value);
}

An object groups related data under named keys. You read values by dot (config.apiUrl) or bracket (config["apiUrl"]). This is exactly the shape of a JSON API response — which is why objects matter so much for testing.

Nesting — the real shape of data

const response = {
  user: {
    id: 42,
    roles: ["editor", "admin"],
  },
};

response.user.roles[1];   // "admin" — chain through the structure

Real data nests: objects contain arrays contain objects. You navigate by chaining dot and bracket access. This is identical to navigating a JSON API response — the skill transfers directly to API testing.

Checkpoint

Given an object response whose user property holds a roles array, how do you read the first role, and how do you do it safely if user might be missing?

Try it yourself

In the console, build an object with a nested array (for example, a person with a hobbies array). Read one nested value by chaining dot and bracket access. Then use array map to transform a simple list of numbers by doubling each one.

Summary

Arrays are ordered lists (push, includes, map, filter, for...of); objects are labelled key-value data (dot or bracket access, Object.entries to loop). Real data nests objects and arrays together, and you navigate by chaining access — the same skill as reading a JSON API response. Use optional chaining (?.) to avoid crashes on missing nested properties. Spotting config objects in a bundle is core recon.

Key takeaways

Arrays: ordered lists; map transforms, filter selects, for...of loops.
Objects: labelled data; dot or bracket access; Object.entries to loop pairs.
Data nests — chain access to navigate, exactly like JSON responses.
?. (optional chaining) prevents “cannot read properties of undefined” crashes.

Quick quiz

Next, functions — how JavaScript packages and passes around behaviour, including the callback and arrow-function styles you’ll see everywhere.

Was this lesson helpful?