What Are JavaScript Objects

Object is another data structure that stores a collections of values in key/value formats, defined with curly braces ({}).

let obj = {};

Items in the object, which are referred to as properties, are made of key: value pairs. Different properties are separated with commas.

let obj = {
  firstName: "John",
  lastName: "Doe",
  age: 25,
};

In this example, firstName: "John" is a property. firstName is the property name, and the string "John" is the property value.

The values can be any data type you want, such as numbers, BigInt, strings, Boolean values, null, undefined, arrays, functions, and even other objects.

let obj = {
  number: 100,
  bigint: 999999999999999999n,
  string: "Qwerty",
  null: null,
  undefined: undefined,
  array: [1, 2, 3],
  object: { name: "John Doe" },
  doNothing: function () {
    return null;
  },
};

Getting a property

There are two ways you can retrieve a property from the object. You can either use the dot operator (.):

let obj = {
  firstName: "John",
  lastName: "Doe",
  age: 25,
};
 
console.log(obj.firstName); // -> John
console.log(obj.lastName); // -> Doe
console.log(obj.age); // -> 25

Or the square bracket syntax:

let obj = {
  firstName: "John",
  lastName: "Doe",
  age: 25,
};
 
console.log(obj["firstName"]); // -> John
console.log(obj["lastName"]); // -> Doe
console.log(obj["age"]); // -> 25

Doesn't this syntax remind you of the arrays? Previously, we used the same syntax to access an array element.

const arr = [1, 2, 3, 4, 5];
 
console.log(arr[3]); // -> 4

This is because the array is just a special type of object, and the array indexes are actually the object keys.

In fact, there are several other data structures in JavaScript that are technically special objects. We'll discuss them later in this course.

Lastly, as mentioned before, an object can contain another object, forming a nested structure. To retrieve a nested property, you can chain multiple dot operators or square brackets together.

let obj = {
  firstName: "John",
  lastName: "Doe",
  age: 25,
  contactInfo: {
    phone: 1234567890,
    email: "something@example.com",
  },
};
 
console.log(obj["contactInfo"]["phone"]); // -> 1234567890
console.log(obj.contactInfo.email); // -> something@example.com

Updating or adding a property

You can update or add a property with the assignment operator (=):

let obj = {
  firstName: "John",
  lastName: "Doe",
  age: 25,
};
 
obj.age = 18; // Update age to 18
obj.status = "admin"; // Add a new status property
 
console.log(obj); // -> { firstName: "John", lastName: "Doe", age: 18, status: "admin" }

The same thing works with the square bracket syntax:

let obj = {
  firstName: "John",
  lastName: "Doe",
  age: 25,
};
 
obj["age"] = 18; // Update age to 18
obj["status"] = "admin"; // Add a new status property
 
console.log(obj); // -> { firstName: "John", lastName: "Doe", age: 18, status: "admin" }

Compare objects

Another thing we need to know about objects is that you cannot create two objects that are equal.

For instance:

let a = {
  name: "John Doe",
};
 
let b = {
  name: "John Doe",
};
 
console.log(a === b); // -> false

Even though the two objects have the exact same properties with same values, JavaScript will still tell you they are not equal.

Two objects are only equal if they reference the same object. For example,

let a = {
  name: "John Doe",
};
 
let b = a;
 
console.log(a === b); // -> true

In this case, a and b both point to the same object, so now they are equal.

Constant object

We know that the keyword const defines a constant, a variable that cannot be altered.

However, when the constant points to an object, it behaves slightly differently.

You are not allowed to assign the constant to a different object:

const obj = {
  name: "",
};
 
obj = {
  name: "John Doe",
};
 
console.log(obj);

/Users/. . ./index.js:5
obj = {
    ^
 
TypeError: Assignment to constant variable.
    at Object.<anonymous> (/Users/. . ./index.js:5:5)
    . . .
 
Node.js v21.6.0

But, you can update or add properties to the object freely.

const obj = {
  name: "",
};
 
obj.name = "John Doe";
obj.age = 25;
 
console.log(obj); // -> { name: "John Doe", age: 25 }

This has to do with how data is stored inside the memory. The object and the properties inside the object are stored separately. const creates an immutable reference between the constant and the object, but the properties can still be modified.