Coding Clean JavaScript : Take

Have you ever wondered what it would take to design/define a new data type in JavaScript? Everything is an Object in JavaScript. We all know that being a loosely typed language it is easy to define a new data type in JavaScript. But how to do a systematic design of the data type?

Let’s learn how we can do it the HtDP way. We are going to design data which defines a weather condition and temperature.

Defining type and describing it

A type comment allows to define custom data types and a way to form the data as well. JSDoc provides a way to define data types using @typedef.

Let’s take the example of weather condition and look at how we can define it using @typedef.

/**
 * Weather Condition
 * @typedef {("hot"|"warm"|"cold")} WeatherCondition
 */

Here we are defining a new data type called WeatherCondition which can either be hot, cold or warm.

Although the definition of data type is just in a comment and does not enforce any runtime checks, it helps to communicate the purpose and structure of the data type being defined.

Let’s take the example of temperature now and look at how we can define it using @typedef.

/**
 * Temperature : [-100, 100]
 * @typedef {number} Temperature
 */

Here we are defining a new data type called Temperature which is a number and can range anywhere between -100 to 100.

How do these custom datatypes help while writing functions?

Let’s see how we can use these custom datatypes in a function by defining a Class which takes temperature as an argument and returns the corresponding weather condition.

/**
 *
 * Weather Condition
 * @typedef {("cold"|"warm"|"hot")} WeatherCondition
 */

/**
 * Temperature : [-100, 100]
 * @typedef {number} Temperature
 */

/**
 * @class Weather
 */
class Weather {
    /**
     * @constructor
     * @param {Temperature} temperature
     */
    constructor(temperature) {
        this.temperature = temperature;
    }

    /**
     * @method weatherCondition
     * @methodOf Weather
     * @returns {WeatherCondition} weatherCondition
     */
    weatherCondition() {
        let temperature = this.temperature,
            weatherCondition;

        switch (true) {
            case (temperature > 40):
                weatherCondition = "hot";
                break;
            case (temperature > 25 && temperature < 40):
                weatherCondition = "warm";
                break;
            case (temperature < 25):
                weatherCondition = "cold";
                break;
        }

        return weatherCondition;
    }
}

let weather = new Weather(55);
console.log(weather.weatherCondition()); // hot

Take a look at the class Weather above.

The constructor for Weather takes our newly created custom datatype Temperature as an argument.And the method weatherCondition of Weather returns the weather condition in the newly defined type WeatherCondition based on the Temperature.

Wrapping up

Although this way of defining data types does not add any rules to the code execution, but it does make the code speak for itself by explaining the data types being used.

It’s easy to make a machine understand the code which an engineer writes, but it’s an art to write code which could be understood by both machine and any other fellow engineer.

Happy Coding!