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