JavaScript Objects & Arrays: The Core Data Structures

In JavaScript, data is everything. How you store and organize that data is the most critical skill for building any application, from a simple to-do list to a complex social network. The two primary tools for this are **Objects** and **Arrays**. Mastering them is non-negotiable.

The JavaScript Object: The Labeled Filing Cabinet

An object is an unordered collection of related data in the form of key-value pairs. Think of it as a filing cabinet where each drawer has a specific label (the "key") and contains some data (the "value").

1. Creation and Access

The most common way to create an object is using the "object literal" syntax with curly braces {}.

// Object Literal
const user = {
  name: "Alex",
  age: 30,
  "is-admin": true,
  skills: ["HTML", "CSS", "JS"]
};

// Accessing Data
console.log(user.name); // "Alex" (Dot Notation)
console.log(user["age"]); // 30 (Bracket Notation)

// Bracket notation is REQUIRED for keys with spaces or hyphens
console.log(user["is-admin"]); // true

2. Modifying and Looping

Objects are mutable, meaning you can change them after creation. You can add, update, or delete properties.

// Add a new property
user.location = "New York";

// Update an existing property
user.age = 31;

// Delete a property
delete user["is-admin"];

// Looping through properties
for (const key in user) {
  console.log(`${key}: ${user[key]}`);
}
// "name: Alex", "age: 31", "skills: HTML,CSS,JS", "location: New York"

// Modern way to get keys, values, or entries
console.log(Object.keys(user));   // ["name", "age", "skills", "location"]
console.log(Object.values(user)); // ["Alex", 31, ["HTML", "CSS", "JS"], "New York"]

The JavaScript Array: The Ordered List

An array is an ordered collection of values. Think of it as a numbered list or a shelf where each item has a specific position. That position is called its **index**.

1. Creation and 0-Based Indexing

Arrays are created with square brackets []. The most important concept is **zero-based indexing**: the first item is at index 0, the second at index 1, and so on.

const colors = ["Red", "Green", "Blue"];

// Accessing Data
console.log(colors[0]); // "Red" (Index 0 is the first item)
console.log(colors[2]); // "Blue"

// Getting the length
console.log(colors.length); // 3 (There are 3 items)

// Getting the LAST item (a very common pattern)
console.log(colors[colors.length - 1]); // "Blue"

2. Iteration: The Power of Array Methods

While `for` loops work, modern JavaScript relies on powerful, built-in array methods that are more readable.

• .forEach(): Runs a function for each item. Does not return anything.
• .map(): Creates a **new array** by transforming every item.
• .filter(): Creates a **new array** with only the items that pass a test.
• .reduce(): Reduces the array to a single value (e.g., a sum, an object).

const numbers = [1, 2, 3, 4, 5];

// .map() - Create a new array with doubled values
const doubled = numbers.map(num => num * 2);
// doubled is [2, 4, 6, 8, 10]

// .filter() - Create a new array with only even numbers
const evens = numbers.filter(num => num % 2 === 0);
// evens is [2, 4]

// .reduce() - Get the sum of all numbers
const sum = numbers.reduce((accumulator, current) => accumulator + current, 0);
// sum is 15

The Ultimate Pattern: Arrays of Objects

The single most common data structure you will use is an **array of objects**. This allows you to have a list of complex items, like a list of users, products, or blog posts.

const products = [
  { id: 1, name: "Laptop", price: 1200 },
  { id: 2, name: "Mouse", price: 45 },
  { id: 3, name: "Keyboard", price: 110 }
];

// Get the name of the first product
console.log(products[0].name); // "Laptop"

// Find all products over $100
const expensive = products.filter(p => p.price > 100);

// Get an array of just the product names
const names = products.map(p => p.name);
// names is ["Laptop", "Mouse", "Keyboard"]

JSON vs. JavaScript Objects

You will often hear about **JSON** (JavaScript Object Notation). It is a text format for sending data. It *looks* almost identical to a JS object, but with two key differences:

• All property keys **must** be strings in double quotes (e.g., "name").
• It cannot contain functions, `undefined`, or comments.

// A JS Object
const user = { name: "Alex" };

// The same data in JSON format (a string)
const userJSON = '{ "name": "Alex" }';

// Convert JS object to JSON string (to send to a server)
const jsonString = JSON.stringify(user);

// Convert JSON string to JS object (from a server)
const jsObject = JSON.parse(userJSON);

Key Takeaway: Use **Objects** {} to describe a single thing with labeled properties. Use **Arrays** [] for an ordered list of items. Combine them as an array of objects to build powerful, data-driven applications.