Suggestion Box

Spot an error or have suggestions for improvement on these notes? Let us know!

Objects

Another important compound data type in addition to Arrays is Objects which are used to represent a collection of key-value pairs. Each key is associated with a value. Objects provide a way to access data based on keys.

Example:

let responses = {
    correct: 3,
    incorrect: 2,
    pass: 4
};

Object syntax:

Defined using curly brackets
Made up of key:value pairs where a key is set to some value, separated by a semi-colon
Each key:value pair is separated by a comma

Basic Object Interaction

We can extract values from Objects using the dot operator:

console.log(responses.incorrect); // 2

Similarly, we can update values by reassigning them:

responses.incorrect = 3;

Or add a new key:value pair:

responses.startTime = '2:00pm';

Or delete a key:value pair using the delete keyword:

delete responses.correct;

After all ove the above modifications, our updated Object would look like this:

console.log(responses); // {incorrect: 3, pass: 4, startTime: '2:00pm'}

Objects can hold any data type

In the above examples, the values in our Object were all Numbers, but you can store any data type: Strings, Numbers, Arrays, Objects, even Functions. Example:

let person = {
    // Strings
    firstName: 'Elliot',
    lastName: 'Brown',

    // Number
    age: 30,

    // Array
    hobbies: ['reading', 'gaming', 'hiking'],

    // Nested Object
    address: {
        street: '324 Western Ave',
        city: 'Cambridge',
        zipCode: '02139'
    },

    // Functions
    // Observe how the keyword *this* is used in functions to reference other properties within this object
    getFullName: function () {
        return `${this.firstName} ${this.lastName}`;
    },

    greet: function () {
        return `Hello, my name is ${this.getFullName()} and I am ${this.age} years old.`;
    },

    getAddress: function () {
        return `I live at ${this.address.street}, ${this.address.city} ${this.address.zipCode}`;
    },

    getHobbies: function () {
        return `My hobbies include ${this.hobbies.join(', ')}`;
    }
};

// Testing the functions, accessed via dot notation and invoked with parenthesis
console.log(person.greet()); // Hello, my name is Elliot Brown and I am 30 years old.

console.log(person.getAddress()); // I live at 324 Western Ave, Cambridge 02139
console.log(person.getHobbies()); // My hobbies include reading, gaming, hiking

// Testing the properties
console.log(person.firstName); // Elliot
console.log(person.age); // 30

Object vocabulary

In the context of Objects, functions are often referred to as methods, and all other items are properties.

So in the above object, we’d say getFullName is a method of the person object. Likewise, we’d say firstName is a property of the person object.

The paradigm of objects and methods is used frequently throughout JavaScript’s built-in utilities.

Example 1:

console.log('Hello World!');

Console is a built-in JavaScript object and log is one of many methods (aka functions) available within that object.

Example 2:

document.getElementById('feedback').innerHTML = 'Correct!';

Document is another built-in JavaScript Object and here we use its getElementById method which returns returns an Element Object that contains a property innerHTML.

Example 3:

prompt('What is your name?');

The prompt method is a method within JavaScript’s window Object. However, because the window object is a special global Object, we don’t have to explicitly indicate it when we invoke its methods.

// Both of the following will produce the same result,
// but it’s more common to just use "prompt":
prompt('What is your Name?');
window.prompt('What is your Name?');