Skip to main content

Array vs Object in JavaScript – Learn the Difference

Here are three main differences between an array and a properties object:

How to Define an Array and an Object​

A pair of square brackets ([...]) defines JavaScript's array object. However, we use braces ({...}) to define properties objects.

Let's see some examples:

Example 1: An array with two unnamed values​

["June", 2022];

Above is an array object containing two unnamed values.

Example 2: An object with two properties​

{ month: "June", year: 2022 }

Above is a properties object containing two properties named month and year.

We initialized the month property with a string value while year got assigned a number.

How to Name the Values of an Array and an Object​

An array does not permit users to name its items. However, you can assign any name to the values of a properties object.

Here's an example:

// Define an array object:
const arrayObject = ["Blue", "White", "Pink", "Green"];

// Define a properties object:
const propertiesObject = {
  carColor: "Blue",
  laptopColor: "White",
  shoeColor: "Pink",
  keyBoardColor: "Green",
};

You can see that we could name each value in our properties object. However, we could not assign names to the array's items.

note

Under the hood, JavaScript automatically uses each array item's index position as its name.

How to Access the Values of an Array and an Object​

You can use the dot notation or square bracket syntax to access a properties object's value.

However, you can use only the square bracket notation to access an array's value.

Let's see some examples.

Example 1: How to access a properties object's value​

// Define a properties object:
const propertiesObject = {
  carColor: "Blue",
  laptopColor: "White",
  shoeColor: "Pink",
  keyBoardColor: "Green",
};

// Retrieve the propertiesObject's "White" value:
propertiesObject.laptopColor;

// The invocation above will return: "White"

Try Editing It

The snippet above used the dot notation to access the propertiesObject's value.

Here's the square bracket alternative:

// Define a properties object:
const propertiesObject = {
  carColor: "Blue",
  laptopColor: "White",
  shoeColor: "Pink",
  keyBoardColor: "Green",
};

// Retrieve the propertiesObject's "White" value:
propertiesObject["laptopColor"];

// The invocation above will return: "White"

Try Editing It

Now, let's see an example of retrieving an array's value.

Example 2: How to access an array object's value​

// Define an array object:
const arrayObject = ["Blue", "White", "Pink", "Green"];

// Retrieve the arrayObject's "White" value:
arrayObject[1];

// The invocation above will return: "White"

Try Editing It

The snippet above used the square bracket syntax to access the arrayObject's value.

Remember that the square bracket is the only way to access an array's value. Using the dot notation will throw an error.

Here's an example:

// Define an array object:
const arrayObject = ["Blue", "White", "Pink", "Green"];

// Retrieve the arrayObject's "White" value:
arrayObject.1;

// The invocation above will return: "Uncaught SyntaxError"

Try it on CodeSandbox

The snippet above threw an error because you cannot use the dot syntax to access an array's value.

Overview​

An array and a properties object are elements used to bundle multiple values into a single item. The main difference between the two is:

  • An array bundles values that a user cannot name—JavaScript names array items automatically.
  • A properties object bundles values that a user can name.

Your support matters: Buy me a coffee to support CodeSweetly's mission of simplifying coding concepts.

Join CodeSweetly Newsletter