JavaScript Tutorial Series - Objects

In JavaScript, objects contain one or more key, value pairs. The key, value pairs are enclosed in a set of curly brackets. Values may be variables, arrays, methods or even another object. The following is an example of an object:

let circle = {
    radius: 3,
    color: 'blue',
    diameter: function () {
        return this.radius * 2;
    };
};

The dot . operator is used to access an object property value:

let radius = circle.radius;

Brackets and the key name may also be used:

let radius = circle['radius'];

This way is helpful when creating an object property based on another variable, example:

let colorKey = 'color';
let myColor = 'black';

let car = {
    year: 1997,
    price: 12000,
    make: 'honda',
    model: 'accord'
};

console.log(JSON.stringify(car));

car[colorKey] = myColor;

console.log(car[colorKey]);
console.log(JSON.stringify(car));

Looping through an object can be done with a for in loop;

for (key in car) {
    console.log('Key: ' + key + ', value: ' + car[key]);
}

or with Object.properties:

Object.keys(car).forEach(function (key) {
    if (car.hasOwnProperty(key)) {
        let value = car[key];
        console.log('Key: ' + key + ', value: ' + car[key]);
    }
});

I use objects all the time because it's easy to retrieve items from when using a key.
For example, in my vacation road website, I store place types with a list of places for each type.

let resultsMap = {
    Entertainment: {
        details: [
            'ABC, 123 Random St., Somewhere, NY',
            'DEF, 456 Blue St., Somewhere, NY',
            'GHI, 789 Black St., Somewhere, NY'
        ],
        markers: [
            {id: 1, show: true},
            {id: 2, show: false},
            {id: 3, show: true}
        ]
    },
    Hotels: {
        details: [
            'Marriott, 345 Some St., Somewhere, NY',
            'Holiday Inn, 345 Other St., Somewhere, NY',
            'Fairfield, 345 Red St., Somewhere, NY'
        ],
        markers: [
            {id: a, show: true},
            {id: b, show: false},
            {id: c, show: true}
        ]
    }
}

Then the list of hotels can be retrieved by doing:

let hotelList = resultsMap['Hotels'];
console.log(JSON.stringify(hotelList.details));

Implementation:

Inside the javascript_tutorial.js file created in the JavaScript set up tutorial, add the following lines that are in bold:

// JavaScript Tutorial

/*
* This file will add JavaScript
* to a website.
*/

(function() {
    let doc = document;    
    let defaultLocation = [-86.7816, 36.1627]; // longitude, latitude


    
    function setLocation(location) {
      if (location) {
        let locationElement = doc.getElementById('location');
        locationElement.innerHTML = location.city + ', ' + location.region;
      }
    }
    
})(); 

This adds a function that will eventually be called to set the user's location in the html page.

Next, in the js directory containing the javascript_tutorial.js file, create another directory called modules. Inside this directory, create a file called Weather.js. Add the following to Weather.js:

class Weather {

    // Constructor
    constructor() {
    };

    getLocation() {
        let url = 'https://ipinfo.io/json';
        let options = {
             mode : 'cors'
        };


    fetch(url, options)
    .then(response => response.json());   
  };
}

This adds a function that will eventually call an API to retrieve the user's location based on their ip address.


The JavaScript tutorial series starts with this post.


(paid links)
More JavaScript