My JavaScript journey was a pretty smooth ride until objects. There are honestly way too many things about it – from the one thousand and one ways of instantiating it to the deal with prototypes.

Photo by Tracy Adams on Unsplash

Here's JavaScript objects exactly how I understood it.

Like string, number, boolean, null and undefined, objects are actually data types but unlike the aforementioned which are primitive data types, objects are reference data types. They do not specifically hold values of variables, rather, they hold references to locations in memory. Objects are used to store related data in key-value pairs. These objects have properties – keys with values of any data type. Properties that are functions are called methods.

Take a real life object, for instance, a book. A book has properties – say title, author, number of pages, type. If that book was a textbook, it would be used to teach a course, if it was a journal, it would be used to keep information on daily activities and dirty secrets even. Those are functions of a book, and for the book to perform each of these functions, a method has to be followed – or called.

To create this book object;

let book1 = {
    title: "Dynasty",
    author: ["Taylor", "Doe"],
    noOfPages: 158,
    type: "novel",

    printSummary: function () { return `"${book1.title}" is a ${book1.type} by
book1.author[0]} ${book1.author[1]} with ${book1.noOfPages} pages.` } 
}

Values in JavaScript can be retrieved using the dot notation or bracket notation. The difference is dot notation gets values with valid variable names, while the bracket notation evaluates the variable it is given. While item.a returns the value of the property named “a”, item["a"] evaluates “a” to a string – since property names are strings – and uses the result as the property’s name and therefore gets the value of the property with that name.

So to access the properties (or get members) of this book1 object;

book1.title
// → "Dynasty"
book1.author[0]
// → "Taylor"

You could also set or update new object members.

book1.publisher = "No Starch Press";
book1.printPublisher = function() { return `${book1.title} was 
published by book1.publisher}` };

Even if your object was created with the const keyword you could still set or update object members. The only thing you can’t do is to directly reassign the object. This was stuff that confused me a little so I thought I’d point it out.

We created our book1 object using a method called “object literals.” The clue is in the name – literally creating objects. And this is just one of many ways of creating objects. If you wanted to create multiple book objects or a scenario you didn’t know the number of objects you would be creating, another method called “object constructors.” Object constructors are special functions used to define and create – or construct – objects. They really are just functions used with the new operator.

function Book(title, author, noOfPages, type) { 
    this.title = title,
    this.author = author,
    this.noOfPages = "no of pages",
    this.type = type;

    printSummary = function () { return `"${this.title}" is a `${this.type} by ${this.author}.` } 
    }

So, to create our previous book1 object using this constructor function would be;

let book1 = new Book("Dynasty", ["Taylor", "Doe"], 158, "novel");

And for another book object say book2;

let book2 = new Book("Sealed In Darkness", ["McSidney", "Victor"], 298, "novel");

If you logged any of these objects in the console, you would see it preceded by ‘Book’. This infers that these objects were created with a constructor named ‘Book.’ It’s convention to name a constructor beginning with a capital letter. It makes it easier to differentiate from regular functions.

Now to this – double entendré intended. The this keyword refers to the current object the code is being written in. For every object instance, this refers to that particular object instance.

It helps to think JavaScript objects as dictionaries where properties are just key-value pairs and those properties can be accessed using either dot notation or bracket notation depending on the identifier.