One of the most often asked questions by students studying front-end development is what is the difference between Arrays and Objects. Without getting too technical here’s a very simple explanation with code examples.

Almost everything in Javascript is considered an object, however there are two different object containers, Arrays and Objects.

Both these containers hold indexed items, each item’s position within the container is referenced according to a key. The primary difference between them is that Arrays indexes items numerically, starting from 0 (zero), whereas Objects has named keys for each items.

const iAmArray = ['first', 'second', 'third'];
console.log(iAmArray[0]); // => first
console.log(iAmArray[1]); // => second

const iAmObject = {first:'item one', second:'item two', third:'item three'};
console.log(iAmObject.first); // => item one

Because Arrays are numerically indexed they always return the value according to their index number (key) but since Objects are name indexed even if you shift an item’s position within the container it always returns the value assigned to the index name (key).

// Declare array with values
let myDogArray = ['fido','labrador',6,'18kg'];
console.log(myDogArray[0]); // => fido

// Declare new values for array
myDogArray = ['labrador','18kg','fido',6];
console.log(myDogArray[0]); // => labrador

// Declare object
let myFirstDog = {name:'fido',breed:'labrador',age:6,weight:'18kg'};
console.log(myFirstDog.name); // => fido

// Declare new values for object
 myFirstDog = {breed:'labrador',weight:'18kg',name:'fido',age:6};
console.log(myFirstDog.name); // => fido

So the most basic difference between Arrays and Objects are that items are indexed numerically by one and by named keys by the other. One last thing to keep in mind when working with them is performance, it’s faster to iterate through Arrays than Objects.