Why use arrays over objects

When you are working with data in your application, it's essential to know what you want to do with that data. We saw how to have organized collections of data with objects. Every value that is on an object has a key that we can find it according to, and therefore it is great when we need to manage, retrieve and update ordered collections.

But there are times when we need more flexibility. Say we were creating a basic todo app. And we want to manage all of our todo data on a single object, called todos:

const todos = {};

Now let's say each todo consists of two values--the text of the todo, as a string, and whether it is complete, either true or false. So say our todo is to wash the dishes and it's not complete. That would be expressed as follows:

const todo1 = {
  text: "Wash the dishes",
  complete: false,
};

And to add the first todo to our collection, but first we know we need to give it a key to add a property to an object. So we have to figure out what value is most appropriate, may the value 1, since it's the first todo. So to add it, even though we are mutating the original object, we can say:

todos[1] = todo1;
console.log(todo);

And if we log the result, we see todo1 is added. So this approach works fine. So let's add another todo, todo2. And for it, it's key will be 2:

const todo2 = {
  text: "Do laundry",
  complete: false;
}

We'll add it again to the todo object:

todos[2] = todo2;
console.log(todo);

But now let's say that we actually don't want to do the laundry, so we want to remove the last todo. How do we do that? Well, it's not easy unless we know ahead of time what the key is of the value we want to remove. But if we want to just remove the last one added, we don't have a way to do that.

This is due to a limitation of objects. They are great to use when we know exactly what we need to update, but they don't preserve their order. We can't know the first thing in the object or the last thing or anything related to the order. We can keep track of order manually with keys, but what if we lose track of the order? Or someone changes the names of our keys.

Fortunately there is a better data structure for managing collections of data where order is important. These are called arrays and they are written with a set of square brackets []. Just like object literals, meaning objects declared with curly braces {}, we can create them with whatever initial values we want. Arrays are a kind of special type of object, and what's neat is that instead of providing our own key with a number, it does that itself.

So let's recreate our app, but using an array for todo instead of an object:

const todos = [];

One caveat though is that arrays start counting from 0. So to add our first element to an array, we can still use the square brackets syntax like with objects, but we say 0 instead of 1:

todos[0] = todos1;
console.log(todos);

And we can access this value again using the brackets syntax, too

console.log(todos[0]);

And this number we're using that represents the position in the array is called the index. But note that we don't have to use the index for everything, for example to add new values. With arrays, we have a ton of built-in methods that enable us to manage the elements. To add an element to the end, we use the method .push. Let's push todo2 to the end of todos:

todos.push(todo2);
console.log(todos);

You can see it was added and since all arrays are ordered by position, by their index, unlike objects, we can easily figure out element that was added last and then remove it.

To get the last element by it's index, we can take the length of the array, 2 and subtract 1. Why subtract 1. Again because indexes start at 0.

console.log(todos[todos.length - 1]);

But note that we don't even have to do that much work to remove the last element. All we have to do to remove the last element of any array is to use the method that is the opposite of push, called pop.

So let's call todos.pop() to remove our unwanted todo:

todos.pop();
console.log(todos);

We see just todo1 again.

Review

This demonstrates some of the flexibility and power of arrays. We use arrays, which are a special variant of objects, over normal objects because of their ability to preserve order along with lots of array methods that allow us to easily manage collections of data. As you saw, you don't need to worry about creating special keys with numeric values when managing collections. Arrays do that for us as well as a lot more things. Throughout this section we're going to dive into lots of examples of how to work with arrays and how to make better applications which make full use of them.