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?');