What Are JavaScript Objects

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 (.):

1let obj = {
2  firstName: "John",
3  lastName: "Doe",
4  age: 25,
5};
6
7console.log(obj.firstName);
8console.log(obj.lastName);
9console.log(obj.age);

1John
2Doe
325

Or use the square bracket syntax:

1let obj = {
2  firstName: "John",
3  lastName: "Doe",
4  age: 25,
5};
6
7console.log(obj["firstName"]);
8console.log(obj["lastName"]);
9console.log(obj["age"]);

1John
2Doe
325

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.

1let obj = {
2  firstName: "John",
3  lastName: "Doe",
4  age: 25,
5  contactInfo: {
6    phone: 1234567890,
7    email: "something@example.com",
8  },
9};
10
11console.log(obj["contactInfo"]["phone"]);
12console.log(obj.contactInfo.email);

11234567890
2something@example.com

Updating or adding a property

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

1let obj = {
2  firstName: "John",
3  lastName: "Doe",
4  age: 25,
5};
6
7obj.age = 18;
8
9console.log(obj);

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

The same thing works for the square bracket syntax.

1let obj = {
2  firstName: "John",
3  lastName: "Doe",
4  age: 25,
5};
6
7obj["age"] = 18;
8
9console.log(obj);

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

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

1let obj = {
2  firstName: "John",
3  lastName: "Doe",
4  age: 25,
5};
6
7obj.status = "admin";
8
9console.log(obj);

1{ 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,

1let obj = {
2  firstName: "John",
3  lastName: "Doe",
4  age: 25,
5  1: "Number 1",
6  null: "Null",
7};
8
9console.log(Object.keys(obj));

1[ '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:

1let obj = {
2  firstName: "John",
3  lastName: "Doe",
4  age: 25,
5};
6
7for (let key in obj) {
8  console.log(key);
9}

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:

1firstName
2lastName
3age

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

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

1key: firstName
2value: John
3key: lastName
4value: Doe
5key: age
6value: 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.

1let obj = {
2  firstName: "John",
3  lastName: "Doe",
4  age: 25,
5  contactInfo: {
6    phone: 1234567890,
7    email: "something@example.com",
8  },
9};
10
11console.log(Object.keys(obj));

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

• Object.values()

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

1let obj = {
2  firstName: "John",
3  lastName: "Doe",
4  age: 25,
5  contactInfo: {
6    phone: 1234567890,
7    email: "something@example.com",
8  },
9};
10
11console.log(Object.values(obj));

1[
2  'John',
3  'Doe',
4  25,
5  { phone: 1234567890, email: 'something@example.com' }
6]

• Object.entries()

Return all key/value pairs in an array.

1let obj = {
2  firstName: "John",
3  lastName: "Doe",
4  age: 25,
5  contactInfo: {
6    phone: 1234567890,
7    email: "something@example.com",
8  },
9};
10
11console.log(Object.entries(obj));

1[
2  [ 'firstName', 'John' ],
3  [ 'lastName', 'Doe' ],
4  [ 'age', 25 ],
5  [
6    'contactInfo',
7    { phone: 1234567890, email: 'something@example.com' }
8  ]
9]

Compare objects

One more thing we need to mention about objects is that you cannot create two objects that are equal. For instance:

1let a = {
2  name: "John Doe",
3};
4
5let b = {
6  name: "John Doe",
7};
8
9console.log(a === b);

1false

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,

1let a = {
2  name: "John Doe",
3};
4
5let b = a;
6
7console.log(a === b);

1true

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.

1{
2  "firstName": "John",
3  "lastName": "Doe",
4  "age": "25"
5}

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.

1{
2  "firstName": "John",
3  "lastName": "Doe",
4  "age": "25",
5  "child": {
6    "id": "123"
7  }
8}

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.

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

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

1let id = Symbol("id");
2
3let obj = {
4  [id]: 12345,
5  firstName: "John",
6  lastName: "Doe",
7  age: 25,
8};
9
10console.log(obj);

1{ 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;

1let id1 = Symbol("id");
2let id2 = Symbol("id");
3
4console.log(id1 === id2);

1false

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:

1let id = Symbol("id");
2
3let obj = {
4  [id]: 12345,
5  firstName: "John",
6  lastName: "Doe",
7  age: 25,
8};
9
10for (let key in obj) {
11  console.log("Key: " + key);
12  console.log("Value: " + obj[key]);
13}

1Key: firstName
2Value: John
3Key: lastName
4Value: Doe
5Key: age
6Value: 25