Deep Tech Point - learn tech easy way

In this article, we are going to investigate what are the differences (and similarities) between JavaScript arrays and objects, and how do you know when to use objects vs arrays?

Both, arrays and objects are considered special in JavaScript:

Objects represent a special data type that is mutable, and we usually use objects when we want to store a collection of data and not just a single value.
And almost the same with arrays – they are also mutable and they can also store a list of variable values.

Therefore, you may ask – where is the difference – and when do I use which?

You should always think about what the particular data you’re working on stands for, for example:

you’re dealing with an object, if you’re working with a single entity with named properties, or if you’ll be manipulating individual properties; objects represent “things” with characteristics (properties)
you’re probably dealing with an array, if you’re working with a group of entities of the same type, or if you’ll be manipulating the data as a whole, or filtering and manipulating specific parts of the data; arrays create and store lists of data in a single variable.

So, when do you use objects?

OK, let’s start with objects and see:

what exactly are they,
when to use them
how to access them,
how to add or remove items from objects.

As already said, you’re dealing with an object if working with a single entity with named properties – objects are sort of a “thing” in your source code – they can be anything that you can think of. Object can be presented as a book or a person or a car, and is defined by properties (aka characteristics) that are built of a key and a value.

A basic syntax for object looks like this:

var object = {
   key: value
};

// An example of a "car" object
var car = {
   name: 'Audi',
   type: '8W',
   goesFast: true
};

You can always access, add, change or delete these values of properties (we can call them characteristics), and if you want to do that you have to use either dot or bracket notation.

If you want to access data, you do it like so:

// Here's an example of dot notation
car.name; // returns string Audi

// Here's an example of bracket notation
car['name']; // also returns string Audi

If you want to change the value of goesFast property from true to false, you can do it like this:

car.goesFast = false;

If you want to add a new property to the object, you can do it like this:

car.specialFeatures = ['racing seats', 'sunroof', 'navigation package'];

If you want to remove a property from an object, such as type in our case, use the delete keyword like this:

delete car.type;

You can also iterate through properties in an object and the most common way to do it is by using “for in” loop, like so:

for (var key in car) {
   console.log(key); // this will display keys of the car object
   console.log(car[key]); // this will display values of the car object
}

There are also alternative options to iterate through object properties. You can use Array’s forEach method with objects, like so:

// Object.keys returns an array of object's keys, then we can use forEach
Object.keys(car).forEach(function(key) {
   console.log(key);
   console.log(car[key]);
});

What about arrays?

Both arrays and object properties are just two ways of collecting data into a group. This data can be presented in strings, numbers, booleans, objects, or even other arrays.

When you would like to use a specific list of multiple items in one variable, you should use arrays.

Be aware that arrays use indexing starting with zero (0), so they are especially practical when you want to access items listed in an array collection by their numerical position in that list. So, if you would like to access the third item (‘navigation package’) in this array:

var specialFeatures = ['racing seats', 'sunroof', 'navigation package'];
// access third element of the array
specialFeatures[2]; // Javascript will return 'navigation package'

Of course, you can add and remove items from an array – especially from the beginning or end of an array.

If you want to do that, use built-in functions such as push(), pop(), unshift(), and shift(), like so:

Push() method will add an item (mp4 player in our case) to the end of an array: specialFeatures.push(‘mp4 player’);
Pop() method will remove the last item from an array, like so: specialFeatures.pop();
Unshift() method will add an item (in our case baby seat) to the beginning of an array, like this: specialFeatures.unshift(‘baby seat’);
Shift() method will remove the first item from an array, like so: specialFeatures.shift();

How do you iterate through arrays?

There are a few options you can loop through items in an array and all of the approaches listed below will log items in specialFeatures array.

// The option bellow presents a standard for loop
for (var i = 0; i < specialFeatures.length; i++) {
   console.log(specialFeatures[i]);
}

// The following option presents the for ... of loop approach:
for (var item of specialFeatures) {
   console.log(item);
}

// The last approach uses forEach() method:
specialFeatures.forEach(item) {
   console.log(item);
});

Javascript array vs object