Difference Between [] and {} – JavaScript

Conceptually everything in JavaScript is an object, which means that it has properties and methods. Few examples of objects are variables, lists, and arrays, etc. However, there are few exceptions to that, for example, undefined. 

We can use “Developer console” or “Developer Tools” in Mozilla Firefox or Google Chrome more conveniently to print out any object or array and study the details.

You can also use an object.getOwnPropertyNames() to list all the property names of objects or use object.hasOwnProperty(“property name”) to see whether a specific property is available or not.

So, what is the meaning of {} in JavaScript?

In JavaScript, we use {} braces for creating an empty object. You can think of this as the basis for other object types. Object provides the last link in the prototype chain that can be used by all other objects, such as an Array.

What is the meaning of [] in JavaScript?

We use [] brackets for creating an empty array which is a data structure used to store a collection of values. This is similar to an object, but it is a unique data structure to hold more than one values at a time.

If we compare the output shown in Developer Console for both {} and [] declaration of variables, we can easily spot the difference i.e.

So, in short, you can use {} braces to declare a single object whereas use [] brackets to create an array/list of items.

The following JavaScript code demonstrates the use of Brackets [] and Braces {} to create an array or object.

A similar concept is used in JSON to declare objects or arrays such as:  

Will create an object; however, the following will create an array of items.

You can use any of the braces {} or brackets [] to declare an empty array. However, it’s your choice to use square brackets with JavaScript objects.

References:

• StackOverflow
• List JavaScript Objects
• Prototype Chain