Objects in depth

In the same way that functions abstract processes, objects abstract data. Objects can contain many values, and they are written as property: value pairs.

Let's see again how to define a simple object:

Copy
const p = {
    firstName: 'Ned',
    lastName: 'Stark',
    age: 40,
    isActive: false
};

To access a property of an object we can use p.name or p['firstName']. We can also loop over the properties with for (x in p) { ... }.

We already saw objects in the course. Now we are going to see some more advanced material related to them.

The this keyword

Objects can contain any kind of values, and in particular they can contain functions. The functions defined inside an object are normally called object methods.

Let's try to create a method that returns the full name:

Copy
const p = {
    firstName: 'Ned',
    lastName: 'Stark',
    fullName: function() { return this.firstName + ' ' + this.lastName; },
    age: 40,
    isActive: true
};

By using this we are able to make the function defined inside the object to refer to other properties of the object.

📖 Javascript: What is the meaning of this?

📖 The JavaScript this Keyword + 5 Key Binding Rules Explained for JS Beginners

Constructor

If we are going to create many objects with a similar structure, we can define an object type. For example, suppose you want to create an object type for cars. You want this type of object to be called Car, and you want it to have properties for make, model, and year. To do this, you would write the following function:

Copy
function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}

Notice the use of this to assign values to the object's properties based on the values passed to the function.

Now you can create an object called mycar as follows:

Copy
var mycar = new Car('Eagle', 'Talon TSi', 1993);

This statement creates mycar and assigns it the specified values for its properties. Then the value of mycar.make is the string "Eagle", mycar.year is the integer 1993, and so on.

You can create any number of Car objects by calls to new. For example,

Copy
var kenscar = new Car('Nissan', '300ZX', 1992);
var vpgscar = new Car('Mazda', 'Miata', 1990);

📖 What is a constructor in JavaScript?

📖 Understanding Javascript constructors

📖 The constructor pattern

📖 Inheritance in Javascript: Understanding the constructor Property

Spread syntax

We can use the so-called spread syntax (...) for various purposes.

You can find a detailed reference in MDN-Spread syntax, but we will mention briefly the different uses here.

Destructuring

For function calls:

Copy
myFunction(...iterableObj);

For array literals or strings:

Copy
[...iterableObj, '4', 'five', 6];

For object literals:

Copy
let objClone = { ...obj };

More details in MDN-Destructuring.

Assignment

Copy
[a, b] = [10, 20];

console.log(a);  // 10
console.log(b);  // 20

[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(rest);  // [30, 40, 50]

📖 JavaScript Spread Operator: A Guide

📖 6 Use Case of Spread with Array in JavaScript

📖 Spread operator vs Rest Operator (Parameters)

Exercises

1. Create a Basic JavaScript Object
2. Use Dot Notation to Access the Properties of an Object
3. Make Code More Reusable with the this Keyword
4. Define a Constructor Function
5. Use a Constructor to Create Objects
6. Understand the Constructor Property
7. Use Closure to Protect Properties Within an Object from Being Modified Externally
8. Use the Rest Parameter with Function Parameters
9. Use the Spread Operator to Evaluate Arrays In-Place
10. Use Destructuring Assignment to Extract Values from Objects
11. Use Destructuring Assignment to Assign Variables from Objects
12. Use Destructuring Assignment to Assign Variables from Arrays