JavaScript Arrays & Objects: Learning How to Work with Data

When I first started learning JavaScript, working with individual variables seemed simple.

But real applications don’t usually deal with just one value.

A website might need to handle hundreds of users, products, orders, messages, or other types of data.

That’s where arrays and objects become really important.

Today was Day 3 of my learning journey, and I focused on understanding arrays, objects, and some of the most useful array methods in JavaScript.

Arrays: Working with Multiple Values

An array allows us to store multiple values inside a single variable.

For example:

let fruits = ["Apple", "Mango", "Banana"];

Instead of creating a separate variable for every fruit, we can keep everything together in one array.

One thing I had to remind myself of was that JavaScript uses zero-based indexing.

That means the first item is at index 0.

console.log(fruits[0]);

This returns:

Apple

I also learned how methods such as push(), pop(), unshift(), and shift() can be used to add and remove items from arrays.

These methods may seem simple, but they become useful when working with changing data.

Combining Arrays with Loops

Arrays also connect directly with the loops I learned yesterday.

For example:

let fruits = ["Apple", "Mango", "Banana"];

for (let fruit of fruits) {
    console.log(fruit);
}

Instead of manually accessing each item, the loop lets us process the entire array.

This was a good reminder that programming concepts don’t really exist in isolation. The things I learned yesterday are already becoming useful today.

map(): Transforming Data

One of the most useful methods I learned today was map().

It allows us to perform an operation on every item in an array and create a new array from the results.

let numbers = [1, 2, 3, 4];

let doubled = numbers.map(function(number) {
    return number * 2;
});

The result is:

[2, 4, 6, 8]

A simple way for me to remember map() is:

Take every item, transform it, and create a new array.

filter(): Keeping What We Need

Sometimes we don’t need every value in an array.

We only want values that satisfy a certain condition.

For example:

let numbers = [10, 15, 20, 25, 30];

let result = numbers.filter(function(number) {
    return number >= 20;
});

The result is:

[20, 25, 30]

So filter() is useful when we want to select only the values that match our requirements.

find(): Getting the First Match

I also learned about find().

It is similar to filter(), but instead of returning all matching values, it returns the first matching value.

let numbers = [10, 20, 30, 40];

let result = numbers.find(function(number) {
    return number > 20;
});

The result is:

30

The difference between map(), filter(), and find() became much clearer after practicing them.

Objects: Representing Real Things

While arrays are useful for lists, objects are better when we want to describe something using related properties.

For example:

let student = {
    name: "Divinshan",
    age: 19,
    course: "Full Stack Development"
};

This object represents a student and stores different pieces of information about them.

We can access a property using dot notation:

console.log(student.name);

We can also update an existing property:

student.age = 20;

Or add a new one:

student.city = "Jaffna";

This made objects feel much more practical to me.

Arrays of Objects

The concept that really connected everything together for me was arrays of objects.

For example:

let students = [
    { name: "Arun", age: 20 },
    { name: "Kumar", age: 21 },
    { name: "Siva", age: 19 }
];

Here, we have an array containing multiple student objects.

Now we can use the methods we learned earlier.

Want all the names?

let names = students.map(function(student) {
    return student.name;
});

Want only students who are 20 or older?

let adults = students.filter(function(student) {
    return student.age >= 20;
});

Want to find one specific student?

We can use find().

This is where the concepts started to feel less like separate lessons and more like actual programming.

Seeing the Real-World Connection

Imagine an online shopping website.

It could store its products like this:

let products = [
    { name: "Laptop", price: 150000 },
    { name: "Phone", price: 80000 },
    { name: "Mouse", price: 5000 }
];

From this data, JavaScript could display products, filter expensive items, or find a specific product.

That made me realize that the things I’m learning now are directly connected to the kind of code used in real applications.

What I Learned Today

Today’s lesson was mainly about learning how to work with data.

• Arrays help store multiple values.
• Objects help represent related information.
• **map()** helps transform data.
• **filter()** helps select matching data.
• **find()** helps find the first matching item.

Day 1 was about JavaScript fundamentals.

Day 2 was about logic and problem solving.

Day 3 was about managing and working with data.

I’m still at the beginning of my programming journey, but each day these concepts are starting to connect with each other.

And that’s probably one of the most exciting parts of learning to code.