In this article, we will learn about JavaScript Objects. But before that, let us recall all the data types in JavaScript as Object is one of the data types.

The latest ECMAScript standard defines seven data types in JavaScript:

• Six primitive datatypes
  • Number
  • String
  • Boolean
  • NULL
  • Undefined
  • Symbol (As per ECMAScript 6)
• Object (Reference type)

Primitive data types

All the types in JavaScript, except for Objects, define immutable values. Immutable values are the ones which are incapable of being changed over time. Such values are referred as “primitive values” in JavaScript.

Now, let’s dive deep into Javascript Objects:
Most often used and fundamental data type in Javascript is the ‘Object’ data type. It is a complex data type and mutable (can be changed).

What is an Object?

In Javascript, an object is an unordered list of reference data types which is stored as a series of name-value pairs. Every item in the list is called a property. Object type refers to a compound value where you can set properties that each hold their own values of any type. So objects can be seen as a collection of properties.

Consider the following simple object:

var captain = {
    name : "jack sparrow",
    age : 30
};

captain.name; // "jack sparrow"
captain.age; // 30

captain['name']; // "jack sparrow"
captain['age']; // 30

In the above object ‘caption‘, the property names are name and age, whereas the values are jack sparrow and 30 respectively. You can access properties either with the dot notation (captain.name) or bracket notation (captain[‘name’]). Bracket notation is useful when the property name has some special characters in it eg. captain[‘hello world!’], also if the property name is a number eg. captain[’30’].

var ageGroup= {
    15: "young",
    30: "old"
};
ageGroup.15; // this will throw an error
ageGroup['15']; // young

 // It is a best practice to avoid using numbers in property names

Let’s compare primitive data types and reference data types:

// primitive data type String is stored as a value 

var captain = 'Jack';
var newCaptain = captain; // newCaptain is assisgned the value of captain
captain = 'David'; // the value of captain is changed 

console.log(newCaptain); // Jack
console.log(captain); // David

// Notice - Inspite of changing captain to 'David', the value of newCaptain is still 'Jack'
// This is because, newCaptain was storing the actual value 'Jack'
// And not the reference to person. Hence, changing person, doesn't affect newCaptain.

Now let’s see an example of reference data type i.e. object

var captain = {
  name:'Jack'
};
var newCaptain = captain; // newCaptain has a reference to captain.
captain.name = 'David'; // the value of captain is changed 

console.log(newCaptain.name); // David
console.log(captain); // David

In the above example, the captain object is copied into newCaptain. But here the value is stored as a reference and not the actual value. Hence, when we changed the captain.name property to ‘David’, newCaptain is also reflecting that property because it only had the reference to captain, and it never stored the actual copy of captain as its own value.

So, here you know the basics of JavsScript Objects, in the next article you will get to know more about creating and deleting Javascript Objects. The focus is more on Objects because as a Javascript Developer, you will most often use the object data type. Objects will be used mostly to store data, also to create methods and functions of your own.

Till then, Happy Coding!