Arrays and Objects

Single values only get you so far. Real programs deal with collections: a list of lessons, a user with several fields, a track containing both. Arrays and objects are how you model that.

Arrays hold ordered lists

Use an array when you have many of the same kind of thing and the order matters.

const tracks = ["JavaScript", "HTML & CSS", "React"];
 
tracks.length;  // 3
tracks[0];      // "JavaScript"
tracks[2];      // "React"
tracks[99];     // undefined — no error, just nothing there

Indexes start at zero, so the last item is always at length - 1. There is also a friendlier way to reach the end:

tracks.at(-1); // "React"

Adding and removing:

const tracks = ["JavaScript"];
 
tracks.push("React");   // add to the end
tracks.unshift("HTML"); // add to the start
tracks.pop();           // remove from the end, returns it

Notice these all mutate the original array. That is fine here, but in React code you will usually create a new array instead — the next lesson covers why.

Objects hold labelled fields

Use an object when you have one thing with several named properties.

const lesson = {
  title: "Arrays and Objects",
  minutes: 10,
  published: true,
};
 
lesson.title;          // "Arrays and Objects"
lesson["minutes"];     // 10 — same thing, useful when the key is in a variable
lesson.author;         // undefined

Dot notation is what you will write almost always. Bracket notation earns its place when the key is dynamic:

const field = "minutes";
lesson[field]; // 10

When a property might not exist, optional chaining saves you from a crash:

const lesson = { title: "Arrays", meta: null };
 
lesson.meta.author;  // TypeError — cannot read property of null
lesson.meta?.author; // undefined — safe

Combining the two

Most real data is arrays of objects. This shape should start looking familiar, because it is essentially every API response you will ever handle.

const lessons = [
  { title: "Values and Variables", minutes: 8 },
  { title: "Functions", minutes: 9 },
  { title: "Arrays and Objects", minutes: 10 },
];
 
lessons[1].title;      // "Functions"
lessons.length;        // 3

Destructuring

Pulling values out one at a time gets repetitive. Destructuring reads them in a single line, and you will see it in nearly every React component you write.

const lesson = { title: "Functions", minutes: 9, published: true };
 
const { title, minutes } = lesson;
console.log(title); // "Functions"

It works on arrays too, by position:

const [first, second] = ["JavaScript", "React"];
console.log(second); // "React"

You can rename and provide defaults at the same time:

const { title: lessonTitle, author = "Anish" } = lesson;

The reference trap

Here is where the const lesson pays off. Objects and arrays are handled by reference. Assigning one to a new variable does not copy it — both names now point at the same data.

const original = { name: "Anish" };
const copy = original;
 
copy.name = "Changed";
console.log(original.name); // "Changed" — surprise

To actually copy, spread it into a fresh object:

const original = { name: "Anish" };
const copy = { ...original };
 
copy.name = "Changed";
console.log(original.name); // "Anish" — safe

Spread works for arrays too, and is also the cleanest way to add an item without mutating:

const tracks = ["JavaScript"];
const more = [...tracks, "React"]; // tracks is untouched

One caveat worth knowing now: spread is a shallow copy. Nested objects inside are still shared references. For deeply nested data you would reach for structuredClone(original).

Try it yourself

Add a fourth lesson using spread instead of push, and confirm the original array still has three items.

What to remember

• Arrays for ordered lists, objects for labelled fields, and arrays of objects for almost all real data.
• Destructuring is the standard way to read values out.
• Use ?. when a property might be missing.
• Assignment shares a reference; spread makes a shallow copy.