JavaScript Tutorial Series - Classes

Since ES6, JavaScript now supports classes. They are not based on an object-oriented inheritance model. Classes are still functions. They sit on top of JavaScript's prototype inheritance.
A class contains a set of properties that define an object.
The following is an example of a class in JavaScript:

class Potholder {
  constructor(numColors) {
    this.numColors = numColors;
  }

  get numColors() {
    return this.numColors;
  }

  set numColors(numColors) {
    this.numColors = numColors;
  }

  printNumColors() {
    console.log(this.numColors);
  }
}

The get and set functions will read and write a class property. Classes contain a constructor method that takes in initialization parameters.

JavaScript classes support inheritance by using the extends keyword as shown below:

CheckerPotholder extends Potholder {
  constructor(numColors, pattern) {
    super(numColors);
    this.pattern = pattern;
  }

  printType() {
    console.log('Checker');
  }
}

The super keyword is used to pass initialization parameters to the parent class.

Classes are instantiated with the new keyword:

const myPotholder = new CheckerPotholder(2, [[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]]);

Static methods can also be created. When I create static methods, I usually put them in their own class.
A static method does something independent of a classes instance variables.
The following is an example:

class SessionStore {
static set(key, value) {
if (typeof(Storage) !== "undefined") {
// Store
let seen = [];

sessionStorage.setItem(key, JSON.stringify(value, function(key, val) {
if (val !== null && typeof val === "object") {
if (seen.indexOf(val) >= 0) {
return;
}
seen.push(val);
}
return val;
}));

return true;
}

return false;
}

static get(key) {
if (typeof(Storage) !== "undefined") {
return JSON.parse(sessionStorage.getItem(key));
}

return null;
}

static getAll() {
if   (typeof(Storage) !== "undefined") {
return Object.keys(sessionStorage);
}

return null;
}
}

This class can be used without creating a new instance. A method is called by calling ClassName.staticMethodName(),

SessionStore.set('potholder', 'the name');

Implementation:



Lets move the static temperature conversion functions in Weather.js to their own class. Inside modules, create a file called TemperatureConverter.js and add the following:

class TemperatureConverter {

static convertKelvinToCelsius(kelvin) {
if (typeof kelvin !== 'number') {
throw 'Kelvin value is not a number';
}
return Math.round(kelvin - 273);
}

static convertCelsiusToFahrenheit(celsius) {
if (typeof celsius !== 'number') {
throw 'Celsius value is not a number';
}
return Math.round((celsius * (9/5)) + 32);
};

static convertFahrenheitToKelvin(fahrenheit) {
if (typeof fahrenheit !== 'number') {
throw 'Fahrenheit value is not a number';
}
return Math.round(((5/9) * (fahrenheit - 32)) + 273);
};
}

export default TemperatureConverter;

Also remove those functions from Weather.js. Weather.js should contain the following. Note, I also added a function called setWeather, which will be populated in a later post when we get to promises and rest api calls.

class Weather {

// Constructor
constructor() {
};

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

getWeather(coordinates) {
}  
}

export default Weather;

For completeness, also verify javascript_tutorial.js contains the following:

// JavaScript Tutorial

/*
* This file will add JavaScript
* to a website.
*/
import TemperatureConverter from "./modules/TemperatureConverter.js";
import Weather from "./modules/Weather.js";

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

function setWeather(data) {
if (data) {
let temp = Math.round(data.main.temp);
try {
let fahrenheit = TemperatureConverter.convertCelsiusToFahrenheit(temp - 273);
console.log("Fahrenheit temperature: " + fahrenheit);
} catch (error) {
console.log("Error setting weather: " + error.message);
}
}
}

function init() {
let locationStr = "";
for (let i = 0, num = defaultLocation.length; i < num; i++) {
      locationStr += defaultLocation[i];
      if (i === 0) {
        locationStr += ", ";
      }
    }

    console.log("Setting weather for location: " + locationStr);

    setWeather({ main: { temp: 30 } });
  }

  init();
})();

Also verify index.html contains the following:

<html>
<head>
<link rel="stylesheet" href="css/style.css"/>
</head>

<body>
<header>
<nav>

</nav>

<article id="toolbar">
<article id="currentWeather" class="text-center">
<section id="location">
</section>
<section id="weatherTemperature">
<span id="temperatureValue"></span>
<span id="degreeSymbol">°</span>
<span id="temperatureUnits"></span>
</section>
<section id="weatherDescription">
</section>
<img id="weatherIcon">                
</img>
</article>          
</article>

</header>

<main></main>

<footer></footer>

<script src="js/javascript_tutorial.js" type="module"></script>
</body>
</html>

You should see the following in the browser console when loading the index.html file:

Setting weather for location: -86.7816, 36.1627
javascript_tutorial.js:19 Fahrenheit temperature: -405

Note, the files will need to be loaded onto a web server. If running them locally in Chrome, you may get a CORS error.


The JavaScript tutorial series starts with this post.


(paid links)

More JavaScript