What Are JavaScript Objects

Objects are 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,
};

console.log(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;
  },
};

console.log(obj);

{
  number: 100,
  bigint: 999999999999999999n,
  string: 'Qwerty',
  null: null,
  undefined: undefined,
  array: [ 1, 2, 3 ],
  object: { name: 'John Doe' },
  doNothing: [Function: doNothing]
}

As you can see, an object can be placed inside another object, which makes a nested structure.

A function can also be stored inside an object as its property, and in this case, the function will be referred to as a method.

Getting a property

To retrieve an object property, you can use the dot operator (.):

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

console.log(obj.firstName);
console.log(obj.lastName);
console.log(obj.age);

John
Doe
25

Or use the square bracket syntax:

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

console.log(obj["firstName"]);
console.log(obj["lastName"]);
console.log(obj["age"]);

John
Doe
25

Doesn't this remind you of the arrays? Previously, we used the same syntax to access an array element. This is because the array is just a special type of object. The array indexes are the object keys.

There are two other similar data structures called maps and sets in JavaScript. They are both special types of objects designed for specific purposes. We will talk more about them later.

As we've mentioned before, an object can also be the property of another object, forming a nested structure. To retrieve a 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"]);
console.log(obj.contactInfo.email);

1234567890
something@example.com

Updating or adding a property

After getting an object property, you can change its value with the assignment operator (=).

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

obj.age = 18;

console.log(obj);

{ firstName: 'John', lastName: 'Doe', age: 18 }

The same thing works for the square bracket syntax.

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

obj["age"] = 18;

console.log(obj);

{ firstName: 'John', lastName: 'Doe', age: 18 }

You can also add new properties to existing objects like this:

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

obj.status = "admin";

console.log(obj);

{ firstName: 'John', lastName: 'Doe', age: 25, status: 'admin' }

The property keys

We just explained that the property values can be any data type you want, but what about the keys?

Recall that when we are using the square bracket syntax, the keys must be placed inside quotation marks. Yes, even though the object keys are not enclosed inside quotation marks when we defined them, they are in fact strings.

In JavaScript, the object keys are either strings or symbols (we will explain what symbols are later), and other data types will be automatically converted into strings. For example,

let obj = {
  firstName: "John",
  lastName: "Doe",
  age: 25,
  1: "Number 1",
  null: "Null",
};

console.log(Object.keys(obj));

[ '1', 'firstName', 'lastName', 'age', 'null' ]

Object.keys() is a method that returns an array of keys in the given object. Notice that both the number 1 and null have been converted into strings. You may use the typeof operator to check their data type.

Iterating over an object

There is a special for in loop for iterating over an object. The syntax is as follows:

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

for (let key in obj) {
  console.log(key);
}

However, things are a bit more complex here. Recall that the object properties are defined in key/value pairs, and the key variable only matches the key part of the property. So this will be the output:

firstName
lastName
age

To access the property value, the dot operator is not going to work here, and instead, you must use the square bracket syntax.

for (let key in obj) {
  console.log("key: " + key);
  console.log("value: " + obj[key]);
}

key: firstName
value: John
key: lastName
value: Doe
key: age
value: 25

The object methods

There are three methods under the Object class that can be useful when working with objects. They are Object.keys(), Object.values(), and Object.entries().

• Object.keys()

This method returns an array of keys in the given object.

let obj = {
  firstName: "John",
  lastName: "Doe",
  age: 25,
  contactInfo: {
    phone: 1234567890,
    email: "something@example.com",
  },
};

console.log(Object.keys(obj));

[ 'firstName', 'lastName', 'age', 'contactInfo' ]

• Object.values()

This method returns an array of values in the given object.

let obj = {
  firstName: "John",
  lastName: "Doe",
  age: 25,
  contactInfo: {
    phone: 1234567890,
    email: "something@example.com",
  },
};

console.log(Object.values(obj));

[
  'John',
  'Doe',
  25,
  { phone: 1234567890, email: 'something@example.com' }
]

• Object.entries()

Return all key/value pairs in an array.

let obj = {
  firstName: "John",
  lastName: "Doe",
  age: 25,
  contactInfo: {
    phone: 1234567890,
    email: "something@example.com",
  },
};

console.log(Object.entries(obj));

[
  [ 'firstName', 'John' ],
  [ 'lastName', 'Doe' ],
  [ 'age', 25 ],
  [
    'contactInfo',
    { phone: 1234567890, email: 'something@example.com' }
  ]
]

Compare objects

One more thing we need to mention 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, 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.

JSON

Our discussion about objects leads to another data structure called JSON. JSON is short for JavaScript Object Notation, and as the name implies, it is created based on JavaScript's object syntax. It is widely used by modern web applications to transfer data between servers and clients.

{
  "firstName": "John",
  "lastName": "Doe",
  "age": "25"
}

As you can see, JSON also follows the key: value format. The only thing different about JSON is that both the key and the value are strings and must be enclosed in quotation marks. JSON cannot store any other types of data.

Similarly, you can create a nested structure with JSON.

{
  "firstName": "John",
  "lastName": "Doe",
  "age": "25",
  "child": {
    "id": "123"
  }
}

JSON is so widely used that most programming languages, JavaScript included of course, has built-in methods to process it, allowing you to parse and read data from JSON. We'll talk about how to do it later in this course.

The symbol type

Finally, we need to talk about the symbols.

Symbol is a primitive data type most commonly used to create object keys. It is created with the Symbol() function.

let id = Symbol("id"); // The string "id" is the symbol description

And then, you can use this id as the object key.

let id = Symbol("id");

let obj = {
  [id]: 12345,
  firstName: "John",
  lastName: "Doe",
  age: 25,
};

console.log(obj);

{ firstName: 'John', lastName: 'Doe', age: 25, [Symbol(id)]: 12345 }

The id must be wrapped inside a pair of square brackets, or JavaScript will assume it is a plain string.

A symbol is a value guaranteed to be unique. For example, you can create two symbols with the same description, and then try to equate them;

let id1 = Symbol("id");
let id2 = Symbol("id");

console.log(id1 === id2);

false

And JavaScript will tell you that they are not equal.

Symbols are often used to hide properties. Properties defined with a symbol will be skipped in the for in loop:

let id = Symbol("id");

let obj = {
  [id]: 12345,
  firstName: "John",
  lastName: "Doe",
  age: 25,
};

for (let key in obj) {
  console.log("Key: " + key);
  console.log("Value: " + obj[key]);
}

Key: firstName
Value: John
Key: lastName
Value: Doe
Key: age
Value: 25