The DNA of Data: Objects & Arrays Masterclass

Welcome back. In this article, we're going to dive deep into the absolute core of working with data in JavaScript: Objects and Arrays.

If you've already worked with variables, you know they are great for storing a single piece of data. But in real-world applications—whether you're building an app with React, a backend with Node.js, or anything else—you will never deal with just a single isolated value. You will deal with collections of data. You need to group things. And that is exactly what Objects and Arrays allow us to do.

We won't just look at the basic syntax; I want you to understand what happens "under the hood" and how to manipulate these structures like a pro.

Arrays: Ordered Lists and Their Secrets

Let's start with Arrays. Imagine you are building an app for the Madrid Metro. You have a list of lines. The order matters, right? Line 1 comes before Line 2.

In JavaScript, we use square brackets [] to create an Array. It is, essentially, a list of values where each value has a numerical position or index.

const madridMetroLines = [
  'Line 1',
  'Line 2',
  'Line 3'
];

console.log(madridMetroLines[0]);
console.log(madridMetroLines[2]);

    

It is crucial to remember that indices start at 0. But Arrays are much more than simple lists; they are iterable objects that come with super powerful built-in methods.

Manipulating Arrays

We rarely create an Array and leave it static. We need to add elements, remove them, or transform them. This is where methods like push or the modern map come into play.

const prices = [10, 20, 30];

prices.push(40);

const taxAdjustedPrices = prices.map((price) => price * 1.21);

console.log(prices);
console.log(taxAdjustedPrices);

    

Notice how we use map. This is one of the most important functions in modern development, especially in React, to transform data without mutating the original array.

Objects: Key-Value Pairs

While Arrays are for ordered lists, Objects are for grouping data related to a specific entity. A user, a product, a configuration. We use curly braces {} and define key: value pairs.

const user = {
  name: 'Carlos',
  role: 'Frontend Developer',
  location: 'Madrid',
  details: {
    hobbies: ['Gaming', 'Coding']
  }
};

console.log(user.name);
console.log(user['role']);

    

Here is something interesting: you can access properties using dot notation (user.name) or bracket notation (user['role']). Bracket notation is extremely useful when the key you want to access is stored inside a variable.

Reference Types vs. Primitives

This is a concept where many developers stumble. You might have noticed that I used const to declare the Array and the Object above. You might wonder: "Max, if it's const, why can I change things inside it?"

Great question! This happens because Arrays and Objects are Reference Types. The variable does not store the value itself, but a memory address (a pointer) that points to where the data is.

When we modify a property inside the object, we are not changing the memory address, only the data at that destination. That's why const allows it. However, this also means that if we copy an object simply by assigning it to another variable, we are copying the pointer, not the data!

Modern Syntax: Spread and Destructuring

Modern JavaScript (ES6+) gave us fantastic tools to work with these structures in a cleaner way.

The Spread Operator (...)

If you want to create a real copy of an object or combine two arrays, the Spread operator is your best friend.

const hobbies = ['Sports', 'Cooking'];
const newHobbies = ['Reading', ...hobbies];

const person = { name: 'Max', age: 30 };
const updatedPerson = { ...person, age: 31 };

console.log(newHobbies);
console.log(updatedPerson);

    

Destructuring

What if you only want to extract a specific property from an object and store it in a variable? Destructuring does this in a single line of code.

const { name, location } = user;
const [ firstHobby ] = hobbies;

console.log(name);
console.log(firstHobby);

    

Putting It All Together: Arrays of Objects

Here is where theory meets reality. In almost all applications, you will work with Arrays of Objects. Think of a JSON response from an API.

const techEvents = [
  {
    id: 1,
    name: 'MadridJS Meetup',
    attendees: 120
  },
  {
    id: 2,
    name: 'Codemotion Madrid',
    attendees: 2500
  }
];

const bigEvents = techEvents.filter(event => event.attendees > 500);

console.log(bigEvents);

    

Mastering these structures is not just about learning syntax. It's about understanding how to model your data. Whether at Glovo handling menus or at Fever filtering events, you will always come back to these fundamentals.

I hope this gave you a much clearer vision! Try the code in your console and see you in the next article.