Deep Tech Point
first stop in your tech adventure

Javascript array vs object

February 21, 2021 | Javascript

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:

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:

So, when do you use objects?

OK, let’s start with objects and see:

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:

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);
});