Objects & Arrays

Why do we have data structures anyway?

Objects and arrays are our core data structures in JavaScript. We use data structures as you might expect -- to store data to use it later. When you first started learning to code you probably stored your first piece of data in a variable. For example, maybe you assigned a string to a variable called cat. The capacity for storing a collection of characters like a string has its limitations.

var cat = "=^o.o^=";

What if we only had strings in JS to store data?

What do you think are the limitations of storing data as a string?

What if we want to store multiple values in our data?

One limitation of storing a collection of characters in a variable is that storing multiple values, lists, or series of data. It is a bit more complicated to store multiple values as a string, but it is possible! Something to keep in mind is that at the end of the day, everything we do on the computer becomes 1s and 0s so the capabilities of something like a string seem very powerful in comparison!

So what would it look like if all we had in JavaScript were strings to store data?

How would we add data? Where would it go?

How would we find the data we are looking for?

How would we update or remove values?

var fridge = 'cheese';

fridge += 'meat';

fridge += 'potatoes';

fridge += 'peppers';

fridge += 'milk';

Play with this example

here⁠

A popular approach to storing multiple values in a string is to separate the values using a comma. If you’ve ever worked with CSV files, then you are familiar with this idea. CSV files represent tables of data with columns and rows using just text -- like our example with the string. This is a common way of formatting data when you export it from one system to another.

What about storing and updating data in a world where we only have a string?

// Do we have meat in our fridge?

var fridge = 'cheese,meat,potatoes,peppers,milk';

fridge.includes('meat'); // this works

fridge.indexOf('meat'); // a lot more to do here!

var item = ',meat';

var meatIndex = fridge.indexOf(item);

var firstPart = fridge.slice(0, meatIndex);

var secondPart = fridge.slice(meatIndex + item.length);

console.log(firstPart + secondPart);

Play with this example

here⁠

What would you have to do in order to replace meat with, let’s say, meatballs? How would you be able to count all the items in the fridge? What if you wanted to represent more complex data or loop through the items?

As you can see, the string approach works well if you simply need to read the data, but as it gets a bit complicated when you need to search or update the data. Luckily we have arrays and objects to make our lives much easier and our programs much faster!

If you want to keep exploring down this path, check out the exercise: