Discovering Data Structures – Objects in JavaScript – Nicholas Moy

According to the Mozilla developer page for objects, they define objects as the following:

The Object class represents one of JavaScript’s data types. It is used to store various keyed collections and more complex entities. Objects can be created using the Object() constructor or the object initializer / literal syntax.
Source

Objects differ from the other (primitive) datatypes of JavaScript(Number, String, Boolean, null, undefined, and symbol) in the sense that it’s more complex. The aforementioned data types store single values, while objects can contain many combinations of these primitive data types.

Let’s use the following object as an example to explain some key features of the Object.

1let dog = {
2     name: 'Ein',
3     breed: 'Pembroke Welsh Corgi',
4     status: 'Genius'
5}

In the example above, things like name, breed, and status, or as well define them now as ‘keys’, point to values of ‘Ein’, ‘Pembroke Welsh Corgi’, and ‘Genius’, respectively. Properties of an object is a combination of these ‘key: value’ pairs. In this case, the dog object has three properties. One other thing to note is that keys can be either strings or numbers.

An object can also have a function as it’s member, so it’ll be referred to as an object’s method.

let dog = {
     //properties from above example 
     //new snippet below:
     bark: function(){
          console.log(`${dog.name} spoke!`)
     }
}

Calling dog.bark would print the console ‘Ein spoke!’. It works with the object’s data that is stored in its properties.

Ways to create objects

1. Object literal

The example with Ein above would be the object literal syntax to initialize an object and it’s properties directly.

2. Object Constructor

Let’s say in the example below, instead of using the object literal syntax, we use the ‘new’ keyword.

let dog = new Object();
dog.name = 'Ein'
dog.breed = 'Pembroke Welsh Corgi'
dog.status = 'Genius'

3. Constructors via Object-Oriented Programming methods

ES6 introduced the more traditional way of defining objects the way other programming languages (like Java or Ruby) do. Keep in mind that while the original javascript wasn’t built for OOP, over time, especially now more than ever due to high usage, it supports it.

class Dog {
    constructor(name, breed, status) {
        this.name = name;
        this.breed = breed;
        this.status = status
    }
}
 
let dog1 = new Dog('Ein', 'Pembroke Welsh Corgi', 'Genius')
 
console.log(dog1.name) //Prints out 'Ein'

Ways to access info from objects

1. Dot notation

//using constructor object as example:
dog1.name //'Ein'
dog1.breed //'Pembroke Welsh Corgi'

2. Bracket Notation

//also using constructor object as example:
 dog1[name] //'Ein'
 dog1[breed] //'Pembroke Welsh Corgi'

Keep in mind, a number can be a key for an object. If you want to access a value that has a number key, you need bracket notation to access it.

Use Cases

Objects are useful for storing relations between strings and data. With the dog examples above, we are able to store a lot of data that are related together in one place. One practical way to use them is through lookup tables or dictionaries. Think of the game Scrabble. Each letter has its own point value. Common letters, like A, E, or R, are worth one point. Other letters, like the dastardly Q, are worth 10. You can think of it like this:

let scrabbleLetters = {
     'A': 1,
     'B': 3
     //so on and so forth
}