Object literals

• An object literal will be used to combine several related variables into one variable
• This makes your code more readable, easier to maintain and more structured
• Example:

• We have three variables and one function that are all related to each other
• This is a good candidate to combine all of them into one object literal variable user

const name = 'John';
const surname = 'Doe';
const age = 41;
function greet() {
    console.log(`Hi, ${name} ${surname}`);
}
greet();

• The resulting object literal:

const user = {
    // properties
    name: 'John',
    surname: 'Doe',
    age: 41,
    // functions (or methods)
    greet() {
        console.log(`Hi, ${this.name} ${this.surname}`);
    },
};
user.greet();

• Summarised:
  • An object literal is a standalone, comma-separated list of name-value pairs, wrapped inside curly braces
  • The value of an object variable (or property) can be a string, a number, a boolean, an array, another object, ...
  • An object can also contain functions (or methods)

REMARK

• Object literals are standalone objects and are NOT instantiated from a class (classes this will be discussed in a later section)

Syntax

• Properties inside an object can be written as:

property	description
name: 'John'	without quotes (recommended)
'name': 'John'	with single quotes
"name": 'John'	with double quotes

• Functions (or methods) inside an object can be written as:

function/method	description
greet() {}	ES6 shorthand (recommended)
greet: function() {}	as a name-value pair

Accessing properties and methods

Outside the object

• All properties and methods can be accessed with the dot notation
• In our previous example:

access	description
user.name	get the name value of the user object
user.name = 'Jane	set (overwrite) the name value of the user object
user.greet()	run the greet() function of the user object

• It's also possible to add and remove properties to/from the object

access	description
user.role = 'admin'	add the property role to the user object
delete user.age	delete the age property from the user object

Inside the object

• Functions inside the object can access the properties with the this keyword
  • Because we use "normal" functions inside the object (not arrow functions), the this keyword refers to the object itself and not the global window object

greet() {
    console.log(`Hi, ${this.name} ${this.surname}`);
}

WARNINGS

• Always use "normal" functions inside an object because the this keyword then refers to the object itself
• It's not a good idea to use arrow functions inside objects, because the this keyword inside arrow functions refers to the global window object which makes it (much) harder to access the embedded properties

JSON.stringify()

• When writing an object directly to the DOM, you get a strange result:

document.querySelector('pre').textContent = user;
// result on page: [object Object]

• JSON.stringify() converts all properties (not the functions/methods!) of the object to a human-readable string

document.querySelector('pre').textContent = JSON.stringify(user);
// result on page: {"name":"John","surname":"Doe","age":41}

Examples

Basic object literal

• Open es6/objects/literal.html and es6/objects/literal.js
• This is the basic example we discussed above

<main class="container">
    ...
    <pre></pre>
    ...
</main>

const user = {
    // properties
    name: 'John',
    surname: 'Doe',
    age: 41,
    // functions (or methodes)
    greet() {
        console.log(`Hi, ${this.name} ${this.surname}`);
    },
};

console.log('user: ', user);
console.log('user.name: ', user.name);
user.greet();

// change the name of the user and delete the age
user.name = 'Jane';
delete user.age;
console.log('user: ', user);
user.greet();

// convert the object to a readable string
document.querySelector('pre').textContent = JSON.stringify(user);

Campus info

• Open es6/objects/campus.html and es6/objects/campus.js
• In this example we want to show a map of our Thomas More campus at Geel
  • For the map we use a static generated image from Yandex.com, one of the few static maps generators that don't require an API key
• Let's take a closer look at the Yandex API documentation (opens new window) on how to generate a static map with a marker:
  • The url to the image is: https://static-maps.yandex.ru/1.x/?{URL parameters}
  • The URL parameters we need for our map are:
    • lang: language of map
    • l: a list of layers (opens new window) on the map
    • z: zoom level of the map (0 ... 17)
    • size: height and width the map (max size is 650,450)
    • pt: longitude and latitude of the marker and the marker style (opens new window)

• Line 6: contains the range slider to set the zoom factor of our map
• Line 11: the static map we will generate will be used as the (value of the) src attribute of the image

<main class="container">
    ...
    <div class="border-green">
        <p>
            <label for="zoom">Zoom = <output id="output">15</output></label>
            <input type="range" min="0" max="17" value="15" id="zoom" oninput="output.value =  zoom.value" />
        </p>
        <div class="card fluid">
            <h3>Campus</h3>
            <p>Address</p>
            <img src="" alt="Campus Geel" />
        </div>
    </div>
    ...
</main>

• All campus related info is bundled in one campus object
• To structure it even further, all address properties are also bundled into their own address object
• Inside the address, we grouped all the location properties together into a geo object
• To get for example the latitude, you can still use the dot notation (in a chained manner) : campus.address.geo.lat
• Line 31: get the name of the campus object and place it inside the h3 tag of the card
• Line 32: call the function getFullAdress() of the campus object and place the returned sting inside the p tag of the card
• Line 34 to 37: every time you change the zoom factor with the range slider, the zoom value inside the object will be updated, the new URL for the images is regenerated and the image on the card is updated
• Line 40: trigger the change event of the range slider when the page is loaded

const campus = {
    name: 'Campus Geel',
    address: {
        street: 'Kleinhoefstraat 4',
        city: 'Geel',
        zipcode: '2440',
        geo: {
            lat: 51.16095,
            lng: 4.96166,
            zoom: 15,
        },
    },
    getFullAddress() {
        return `${this.address.street}, ${this.address.zipcode} ${this.address.city}`;
    },
    getMapUrl() {
        const lang = 'en_US';
        const layers = 'sat,skl';
        const zoom = this.address.geo.zoom;
        const size = '650,350';
        const marker = `${this.address.geo.lng},${this.address.geo.lat}`;
        const icon = 'pm2rdm1';
        return `https://static-maps.yandex.ru/1.x/?lang=${lang}&l=${layers}&z=${zoom}&size=${size}&pt=${marker},${icon}`;
    },
};

const zoom = document.getElementById('zoom');
const card = document.querySelector('.card');
const image = card.querySelector('img');

// card.querySelector('...') === document.querySelector('.card').querySelector('...')
card.querySelector('h3').innerHTML = `Thomas More <small>${campus.name}</small>`;
card.querySelector('p').textContent = campus.getFullAddress();

zoom.addEventListener('change', () => {
    campus.address.geo.zoom = zoom.value;
    image.src = campus.getMapUrl();
});

zoom.dispatchEvent(new Event('change'));

Geolocation API (OPTIONAL)

• Objects and object literals are found pretty much everywhere in JavaScript
• Also, JavaScripts build-in Web API's (opens new window) usually give you the information in the form of an object
• In this example, we use the build-in Geolocation API (opens new window) that give us our exact location
• The Geolocation API is available through the navigator.geolocation object and has tree methodes:

methode	description
navigator.geolocation.getCurrentPosition(success[, error[, options]]) (opens new window)	get the current position (on time sample)
navigator.geolocation.watchPosition(success[, error[, options]]) (opens new window)	get the new position every time you move
navigator.geolocation.clearWatch(id) (opens new window)	stop watching your position

WARNING

• The Geolocation API only works in a secure environment (https://), except for development (http://localhost)
• The user must authorise you the share his location

• Open es6/objects/geolocation.html and es6/objects/geolocation.js
• In this example we use the watchPosition() (opens new window) methode which has three parameters:
  • success: a callback function that contains the measured position in the form of an object
  • error (optional): a callback function that contains an error object (e.g: GPS is off, timeout has expired, ...)
  • options (optional): some options like the accuracy for the measurement, and the timeout after which the error is triggered

• Line 9: contains the coordinates of your location in JSON form
• Line 10: shows your location as a static image

<main class="container">
    ...
    <div class="border-green">
        <p>
            <label for="zoom">Zoom = <output id="output">15</output></label>
            <input type="range" min="0" max="17" value="15" id="zoom" oninput="output.value =  zoom.value" />
        </p>
        <div class="card fluid">
            <p>Location</p>
            <img src="" alt="watch position" />
        </div>
    </div>
    ...
</main>

• Line 49 to line 53: if geolocation is available in the browser, run the successCallback(position) function to get your coordinates
• Line 32: log your position in the console, so you can easily find the path to the latitude and longitude and update the card

const myLocation = {
    lat: 51.16095,
    lng: 4.96166,
    zoom: 15,
    getCoordinates() {
        return JSON.stringify(myLocation);
    },
    getMapUrl() {
        const lang = 'en_US';
        const layers = 'map';
        const zoom = this.zoom;
        const size = '650,350';
        const marker = `${this.lng},${this.lat}`;
        const icon = 'pm2rdm1';
        return `https://static-maps.yandex.ru/1.x/?lang=${lang}&l=${layers}&z=${zoom}&size=${size}&pt=${marker},${icon}`;
    },
};

const zoom = document.getElementById('zoom');
const card = document.querySelector('.card');
const latLng = card.querySelector('p');
const image = card.querySelector('img');

// Options for the Geolocation API
const watchOptions = {
    enableHighAccuracy: true,
    timeout: 3000,
};

// location found
function successCallback(position) {
    console.log('new position', position);
    myLocation.lat = position.coords.latitude;
    myLocation.lng = position.coords.longitude;
    updateCard();
}

// location not found
function errorCallback() {
    latLng.innerHTML = 'Unable to retrieve your location';
}

function updateCard() {
    latLng.innerHTML = myLocation.getCoordinates();
    image.src = myLocation.getMapUrl();
}

// check if geolocation is available in the browser
if (navigator.geolocation) {
    navigator.geolocation.watchPosition(successCallback, errorCallback, watchOptions);
} else {
    latLng.innerHTML = 'Geolocation is not supported by this browser.';
}

zoom.addEventListener('change', () => {
    myLocation.zoom = zoom.value;
    updateCard();
});

• You can also simulate other locations from the DevTools
• Click on the three dots at the top right and choose More tools -> Sensors from the menu
• In the screenshot below you see the location from a place in London

READING TIPS

• Objects@Mozilla (opens new window)
• Objects@W3Schools (opens new window)