Arrays & Objects — JavaScript Course

What you'll learn

Arrays organize ordered values; objects organize named values. Together they model almost every piece of data you will meet in JavaScript.

Creating, reading, and updating arrays

arrays.js

const topics = ["variables", "loops", "functions"];

console.log(topics[0]);
console.log(topics.at(-1));

topics[1] = "iteration";
topics.push("arrays");
console.log(topics);

Arrays are zero-indexed and mutable. A const array can change its elements; the binding simply cannot be reassigned.

Essential array methods

Method	Effect	Returns
`push / pop`	Add/remove at end	New length / removed value
`unshift / shift`	Add/remove at start	New length / removed value
`indexOf / includes`	Search	Index / boolean
`slice`	Copy a range	New array
`splice`	Insert/remove in place	Removed items
`join`	Combine as text	String

methods.js

const queue = ["Ava", "Noor"];
queue.push("Omar");
const next = queue.shift();

console.log(next);
console.log(queue.join(" → "));
console.log(queue.includes("Noor"));

Know which methods mutate

push, pop, shift, unshift, splice, sort, and reverse change the original array. slice does not.

Object literals

Objects associate property keys with values. Use them for records: a learner, product, configuration, or any entity described by named fields.

objects.js

const learner = {
  name: "Maya",
  completed: 7,
  active: true,
  greet() {
    return `Hi, I'm ${this.name}.`;
  },
};

console.log(learner.name);
console.log(learner.greet());

Dot and bracket notation

Dot notation is concise for known identifier-like keys. Brackets accept any string and allow computed keys.

properties.js

const course = { title: "JavaScript", "lesson-count": 40 };
const chosenKey = "title";

console.log(course.title);
console.log(course["lesson-count"]);
console.log(course[chosenKey]);

course.level = "Beginner to Advanced";
delete course["lesson-count"];
console.log("level" in course);

Tip

Prefer dot notation for fixed property names and brackets for keys that come from data. Validate untrusted keys before using them to update objects.

Nested data

nested.js

const course = {
  title: "JavaScript",
  phase: { number: 1, name: "Foundations" },
  lessons: [
    { title: "Variables", complete: true },
    { title: "Functions", complete: false },
  ],
};

console.log(course.phase.name);
console.log(course.lessons[1].title);

Read a path one step at a time: object property, array index, then object property. Optional chaining helps when an intermediate value may be missing.

Shallow copies and destructuring preview

copies.js

const original = { name: "Lina", scores: [80, 90] };
const copy = { ...original, name: "Rami" };

const [firstScore, secondScore] = original.scores;
const { name } = original;

console.log(copy.name, original.name);
console.log(name, firstScore, secondScore);

Spread makes a shallow copy

Nested arrays or objects are still shared. Phase 2 explores copying, destructuring, and immutable updates in depth.

Phase 1 project: grade tracker

This small program combines every foundation: variables, numbers, strings, conditions, loops, functions, arrays, and objects.

grade-tracker.js

const learner = {
  name: "Salma",
  scores: [82, 91, 76, 88],
};

function average(numbers) {
  if (numbers.length === 0) return 0;
  let total = 0;
  for (const number of numbers) total += number;
  return total / numbers.length;
}

function gradeFor(score) {
  if (score >= 90) return "A";
  if (score >= 80) return "B";
  if (score >= 70) return "C";
  return "Keep practicing";
}

const result = average(learner.scores);
console.log(`${learner.name}: ${result} (${gradeFor(result)})`);

Extend it: add the highest score, lowest score, and number of passing scores.

Phase 1 recap & quick check

Key takeaways

Arrays model ordered collections and objects model named records.
Array and object variables hold references; const does not freeze their contents.
Dot notation handles fixed keys, while brackets handle computed or unusual keys.
Mutation changes an existing structure; slice and spread can create shallow copies.
You can now combine values, decisions, loops, functions, arrays, and objects into complete programs.

Phase 1 checkpoint

1. Which method adds an item to the end of an array?

2. Which access works for a key stored in variable key?

3. What kind of copy does {...original} make?

4. What is the first valid array index?

5. Which structure best models one learner with named fields?

Phase 1 is complete. You can now write small JavaScript programs from scratch. Phase 2 begins with scope, hoisting, and the temporal dead zone.