DEV Community: Scott Hardy

Serialization and you

Scott Hardy — Mon, 30 Nov 2020 14:27:52 +0000

Serialization is the term that describes a method to represent data so it can be transferred, stored, and accessed by multiple systems or languages.

There are many serialization formats; for our examples, we will talk about JavaScript Object Notation (JSON). JSON is a standard, language-independent file format that represents objects as key and value pairs in human-readable text.

JavaScript (and by extension TypeScript) also have "Objects"; these objects have their own rules for the keys and values. Methods (functions) can be a value for a key, while in JSON a function cannot be a value. Most importantly: JavaScript and TypeScript objects are not JSON.

For example, let's look at a simple User record for an application as a JSON representation and as an object.

Our User will have a first name, last name, and time when it was created.

First, a JSON User document:

{
    "first_name":  "Theodore",
    "last_name": "Esquire",
    "created_date": "2020-09-24T00:00:00.000Z"
}

When a JavaScript class is used to represent a record being sent between systems or layers, it's referred to as a model class. Here is User as a TypeScript model class, with default values for illustration:

class User {
    firstName: string = "Theodore";
    lastName: string = "Esquire";
    createdDate: Date = new Date("2020-09-24T00:00:00.000Z");
}

Let's go through the differences between the keys and values. In this example both JSON keys and the object keys are strings; however, the keys themselves are different. In the JSON example, the underscore _ is used to separate words rather than a capital letter. This use of snake_case is a choice made by the API designer; in JavaScript and TypeScript classes it's more traditional to use camelCase instead, and linter frameworks will often warn if you use snake_case variable names in JavaScript. The mapping between API conventions and JavaScript conventions is a key problem when working with JSON data.

The values from or our dataset also have some differences: in JSON they are all strings, but in TypeScript the createdDate value is not a string, it is a JavaScript Date.

Serialization is how we're able to match the different keys together and convert values into their programmable version. We can do this manually for each model class by adding custom functions:

class User {
    firstName: string;
    lastName: string;
    createdDate: Date;

    deserialize(json: Record<string, any>): this {
        this.firstName = json.first_name; // string -> string
        this.lastName = json.last_name; // string -> string
        this.createdDate = new Date(json.created_date); // string -> date
        return this;
    }
}

// ...
const user = new User().deserialize(JSON.parse(`{
    "first_name": "Theodore",
    "last_name": "Esquire",
    "created_date": "2020-09-24T00:00:00.000Z"
}`));

Passing the JSON as our input we can use JavaScript to read it and convert it to what we need. For our date, we create a new Date from the string value. To serialize we do the same thing but return a JSON value.

class User {
    firstName: string = "Theodore";
    lastName: string = "Esquire";
    createdDate: Date = new Date("2020-09-24T00:00:00.000Z");

    deserialize(json: Record<string, any>): this {
        this.firstName = json.first_name; // string -> string
        this.lastName = json.last_name; // string -> string
        this.createdDate = new Date(json.created_date); // string -> Date
        return this;
    }

    serialize(): string {
        return JSON.stringify({
            first_name: this.firstName, // string -> string
            last_name: this.lastName, // string -> string
            created_date: this.createdDate.toJSON() // date -> string
        });
    }
}

JSON is a common format and many programming languages have tools to help with conversions; JavaScript is no different. JSON.stringify() helps with making the JSON file format from an object that we can define. This allows us to convert the keys and values. The Date class also has a built-in function "toJSON" that helps turn the date into a string value to be stored in a JSON format.

Why is this a problem?

Defining these functions that convert to and from JSON for every model is a lot of work and can lead to duplicate code. To save on time things can be applied in a global fashion. For example, the key conversions (snake_case to camelCase) are often done a different time from serialization. Let's look at an HTTP request to understand. A user signing up will send us data and we'll send data back to the user:

User's Machine -> HTTP request with JSON data -> A server that creates and saves a user -> HTTP response with JSON data -> User's machine (success)

A web app will use a library like Axios or Angular's HttpClient to make requests to the server. These libraries have the concept of an interceptor: a function that will run right before every HTTP request or right after every HTTP response. Developers can write these functions to apply the key conversions. There are a few problems with this approach:

Serializing the value and keys at different times means there needs to be an underlying knowledge of the interceptor and what it does.
Not all keys should be converted. For example, the server may send a configuration map with uppercase Java enum-style keys, LIKE_THIS. Converting those keys to camelCase LIKETHIS will lead to mismatches when saving them back to the server.
Not all keys are meant to be sent over the wire.
Interceptors need special logic to avoid modifying other, non-JSON content types, such as multipart/form-data.

ts_serialize v1.0.0

ts_serialize is a module that supports Node.js, Deno, and browser environments. It is built to deal with all the problems mentioned while keeping serialization simple. It does this by providing a base class that model classes can extend. The base class adds the functions needed for (de)serialization and provides a decorator to define how properties are (de)serialized. Let's use ts_serialize to redefine our User Model.

import { Serializable, SerializeProperty } from "@gamebridgeai/ts_serialize";

class User extends Serializable {
    @SerializeProperty("first_name") // string -> string
    firstName: string = "Theodore";

    @SerializeProperty("last_name") // string -> string
    lastName: string = "Esquire";

    @SerializeProperty({
        serializedKey: "created_date",
        toJSONStrategy: (input) => input.toJSON(), // date -> string
        fromJSONStrategy: (json) => new Date(json), // string -> date
    })
    createdDate: Date = new Date("2020-09-24T00:00:00.000Z");
}

Model properties without "@SerializeProperty()" do not get serialized.

Extending Serializable will add three methods: toJSON(), fromJSON(), and tsSerialize().

fromJSON - takes one argument, the JSON string or Object to deserialize
toJSON - converts the model to a JSON string with any provided key or value transformations
tsSerialize - converts the model to "Plain old Javascript object" with any provided key or value transformations

We can save some typing and apply the snake_case/camelCase conversion to all properties in the class. Define an optional method tsTransformKey() that uses a snake-case conversion function, like lodash's snakeCase():

import { Serializable, SerializeProperty, iso8601Date } from "@gamebridgeai/ts_serialize";
import snakeCase from "lodash.snakeCase";

/** Base class with common snake_case configuration for this app */
abstract class BaseModel extends Serializable {
    tsTransformKey(key: string): string {
        return snakeCase(key);
    }
}

/** User record */
class User extends BaseModel {
    @SerializeProperty() // string -> string
    firstName: string = "Theodore";

    @SerializeProperty() // string -> string
    lastName: string = "Esquire";

    @SerializeProperty({
        fromJSONStrategy: iso8601Date, // string -> date
    })
    createdDate: Date = new Date("2020-09-24T00:00:00.000Z");
}

ts_serialize keeps track of the original and serialized property names, so we don't need to configure anything to do the reverse transformation.

The example also uses the iso8601Date utility function to deserializing timestamps in standard ISO-8601 formats.

There are more details in our documentation at https://gamebridgeai.github.io/ts_serialize. The library is provided under the MIT license on GitHub at https://github.com/GameBridgeAI/ts_serialize and is available in the npm and deno package registries.

Thank you for reading.

Asynchronous vs Synchronous Programming

Scott Hardy — Fri, 01 Feb 2019 21:01:20 +0000

Time is an illusion. Lunchtime doubly so.

Douglas Adams, The Hitchhiker's Guide to the Galaxy

Introduction

In programming, synchronous operations block instructions until the task is completed, while asynchronous operations can execute without blocking other operations. Asynchronous operations are generally completed by firing an event or by calling a provided callback function.

Breaking Down JavaScript

Javascript has a:

Callstack
WebAPI
Event Loop
Callback Queue

The Callstack is the immediate work your program will do.

let i = 0 // declare a mutable variable
i += 1 // add one to the variable
console.log(i) // log the variable

In the above example, declaring a variable, adding one to the variable, and logging the variable are all three separate instructions that get added to the Callstack. WebAPI's are methods available from environments where JavaScript is run. In browsers, the window and its methods are apart of the WebAPI. When the WebAPI completes, it puts the callback on the Callback Queue.

The Event Loop waits for the Callstack to complete the loaded work. Once the Event Loop notices the Callstack is clear it will add work to the Callstack from the Callback Queue. Consider window.setTimeout with a timer of 0 and a callback function that uses a variable before it is declared.

window.setTimeout(() => console.log(i), 0)
let i = 0 
i += 1

Instead of an error, we get the correct answer 1, this is because of the function that uses console.log is a parameter to the first WebAPI instruction window.setTimeout. The callback function is moved to the Callback Queue when the timer completes. Once the Callstack clears declaring and adding one to the variable, our function is called and it is safe to use the variable.

Starting with callbacks

A callback executes once it is added to the Callstack. In the previous example, this relied on a timer to complete, however other APIs will have other conditions. A NodeJs example:

const fs = require('fs')
const content = 'Logging to a file'
fs.writeFile('test.txt', content, err => {
    if (err) {
        throw err
    }
    console.log('logs completed')
})
console.log('end script')

The callback is called once the writeFile API has completed:

opening or creating the file
writing to the file
closing the file at the location specified

fs.writeFile is asynchronous so console.log('end script') is called before the work writeFile completes.

What changes are needed to do this action synchronously?

const fs = require('fs')
const content = 'Logging to a file'
try {
    fs.writeFileSync('test.txt', content)
    console.log('logs completed')
} catch (err) {
    throw err
}

A try {} catch() {} and the use of the synchronous write file function writeFileSync. If err is thrown the console.log is not called.

Synchronous Operations

Synchronous Operations that run block the next operation until it completes. Blocking operations may not always seem like an issue because computers are fast. For example: creating an array and logging the values in an array.

Array
    .from({ length: 5 }, (v, i) => i + 1)
    .forEach(value => console.log(value))

However if the length was 5000 it would take longer before the array was logged. The difference in timing is a result of the thread being locked for a longer time.
Making synchronous calls to resources can lead to long response times locking up the UI until the resource responds. As an example:

const request = new XMLHttpRequest()
request.open('GET', 'https://httpstat.us', false)
request.send(null)

if (request.status === 200) {
  console.log(request.responseText)
}

Making requests to your own services like a database can have the same effect. A common webpage will have many requests to make under unique circumstances, and as a developer, you'll want those requests to start as soon as possible but still allow the rest of the page to load what it can to enable the requests.
This is when asynchronous operations become powerful.

Asynchronous Operations

Asynchronous Operations happen independently from the main program flow. A common use for asynchronous code is querying a database and using the result. Passing in a callback is a way to interact with the response or error.

const database = require('thecoolestnewestdbframework')
database('table')
    .select('*')
    .asCallback((err, res) => {
        if (err) {
            throw err
        }
        // do something with the result
    })

While the database loads and responds to the request, the rest of the page or other resources cannot load.

Promises and Asynchronous Operations

Promises are another way to interact with asynchronous code. In the above example if the const database returned a Promise then we could write:

const database = require('thecoolestnewestdbframework')
database('table')
    .select('*')
    .then(res => {
        // do something with the result
    })
    .catch(err => throw err)

A Promise represents the work that is happening asynchronously. When the Promise resolves the result can be caught as an error, or used in a then method. then returns a Promise, this means then is chainable returning another Promise to the next then.

const database = require('thecoolestnewestdbframework')

database('table')
    .select('*')
    .then(res => {
        // do something with result
        return somethingDifferent
    })
    .then(res => {
        return database('other_table')
            .select('*')
            .where('id', res)
    })
    .then(res => {
        // do something else
    })
    .catch(err => throw err)

A Linked List in JavaScript

Scott Hardy — Fri, 30 Nov 2018 13:04:34 +0000

Introduction

Hello dev.to!

There are many great posts about linked lists on dev.to and this one will be about implementing a linked list in JavaScript with base features: length, unshift, shift, remove by value, find also by value and get by index. Then we'll add a few other features: map, reduce, and filter.

This post will use ECMAScript6.

What is a linked list

A linked list is a collection of data, where each node points to the next node instead of using their placement in memory. The most basic form of a linked list is a Singly Linked List where the node contains only a value and next property. We'll implement a singly linked list, however other types of linked lists do exist.

Getting started

We can start with a class and our main method unshift.

class LinkedList {
    constructor(value) {
        this.head = null
        this.length = 0
        return this.unshift(value)
    }

    unshift(value) {
        const node = { value }
        node.next = this.head
        this.head = node
        this.length += 1
    }
}

const list = new LinkedList('test')
console.log(list) // LinkedList {head: "test", length: 1, next: null}

Our constructor initializes two properties head and length.

head points to the first node in the list
length will keep track of how many items are added
unshift creates a new node
- Sets next to the previous head node
- Sets the head to the new node
- Increases the length

Now we can initialize an empty list and a list with one value. Let's make a small change to allow multiple values for the constructor and unshift. To do that effectively we can make a method for adding one value and use in our unshift method that will accept multiple values.

class LinkedList {
    constructor(...values) {
        this.head = null
        this.length = 0
        return this.unshift(...values)
    }

    _unshiftOneValue(value) {
        const node = { value }
        node.next = this.head
        this.head = node
        this.length += 1
    }

    unshift(...values) {
        values.forEach(value => this._unshiftOneValue(value))
        return this
    }
}

Our constructor and unshift accept multiple values with rest parameters.

The constructor will pass the values on to unshift
unshift iterates with Array.forEach over the values - Adding them with our new method _unshiftOneValue
_unshiftOneValue adds one value and increments the length

Returning this allows us to chain the method as well.

Adding a shift starts with making sure we have an item to remove, null otherwise.

class LinkedList {

    // ...

    shift() {
        if (this.length === 0) {
            return null
        }
        const { value } = this.head
        this.head = this.head.next
        this.length -= 1
        return value
    }
}

Return null without a length
If we have a head
- Grab the heads value
- Set the current head to the previous heads next
- Decrease the length
Return the value removed.

`find` by value

So far we've been returning a value or null, let's keep with that design pattern. Our find will:

Accept one value.
Return null or the found value

class LinkedList {

    // ...

    find(value) {
        let node = this.head
        while (node) {
            if (node.value === value) {
                return node
            }
            node = node.next
        }
        return node
    }
}

We set node to the head which we set to null in the constructor.

While we have a node
If the node.value strictly matches the value parameter
- Return the node
Set node.next as the next node
Return the node

node.next is null if it is not there. If we have nodes and the value parameter is not found we still return null.

`remove` by value

A linked list is like a chain and to remove a value we'll need the previous node and the current nodes next. If we find the node as the head then we can reuse our shift method. We don't need to return the value removed because it is known from the author's integrating with our list. Let's return the new list (or the same list if nothing is removed).

class LinkedList {

    // ...

    remove(value) {
        if (this.length === 0) {
            return this
        }

        if (this.head.value === value) {
            this.shift()
            return this
        }
        let prevNode = this.head
        let node = prevNode.next
        while (node) {
            if (node.value === value) {
                break
            }
            prevNode = node
            node = node.next
        }

        if (node === null) {
            return this
        }
        prevNode.next = node.next
        this.length -= 1
        return this
    }
}

If we have no list, return this.
If the value is the head
- Use shift
- Return this
The previous node becomes the head
The node to compare is set to the heads next
While we have a node
- If The nodes value strictly matches the value
  - break out of the loop
- Set the previous node to the node
- Set node to node.next
If our node is null then return this
Set the previous nodes next to found nodes next - removing the found node
Decrease the length
Return this

`get` by index

We have enough information about our linked list that we do not need to add an index property to each node. A Singly linked list always starts a search at the head (index 0) and moves on to the next node. A single parameter is required and must be a Number equal to or greater than 0 but less than our length property.

class LinkedList {

    // ...
    get(index = 0) {
        if (this.length === 0 || Number.isNaN(index)
            || index < 0 || this.length <= index) {
            return null
        }

        if (index === 0) {
            return this.head
        }
        let node = this.head.next
        let i = 1
        while (node) {
            if (i === index) {
                return node
            }
            node = node.next
            i += 1
        }
        return null
    }
}

Return null if
- We don't have a length
- index is not a number
- index is less than 0 (out of bounds)
- index is greater or equal to our length (out of bounds)
If index is 0 return the head
Set node to the heads next
Set i to 1 (our nodes position)
While we have a node
- If i is strictly equal to index return the node
- Set our next node to node.next
- Increment i by one
Return null

`reduce`

We'll follow the same implementation in arrays. Execute a reducer function on each value of the list resulting in a single output value. The reducer function has four parameters:

Accumulator - accumulates the callback's return values
Current Value - the value being processed
Current Index - Starts at 0 with an initialValue, 1 otherwise.
Source - the list being reduced

The reducer function will also accept a starting initialValue as the second parameter.

class LinkedList {

    // ...
    reduce(func = () => {}, initialValue) {
        if (this.length === 0 || typeof func !== 'function') {
            return typeof initialValue !== 'undefined' ? initialValue : null
        }
        let node = this.head
        let acc = initialValue
        let i = 0
        while (node) {
            if (typeof acc === 'undefined') {
                acc = node.value
                node = node.next
                i += 1
            }
            acc = func(acc, node.value, i, this.head)
            node = node.next
            i += 1
        }
        return acc
    }

}

Return the initialValue (if defined) or null
- If the length is 0
- If the reducer function is not a function
Set the node to the head
Set the accumulator as the initialValue
Set i to 0
While we have a node
- If the accumulator is undefined
  - Set the accumulator as the value
  - Set the current node to node.next
  - Increment i by 1
- Set the accumulator as the result of the reducer
- Set the node to node.next
- Increment i by 1
Return the accumulator

`map`

map has two approaches, one is recursive and one is imperative. We will do both.
Just as we did with reduce let's also follow the arrays implementation. map will create a new list with the results of calling a provided function on every element in the calling list. The Provided function has three arguments

CurrentValue - The current element being processed in the array
Index - The index of the current element being processed in the array
Array - The array map was called upon

class LinkedList {

    // ...
    mapRecursive(func = () => {}) {
        if (this.length === 0 || typeof func !== 'function') {
            return new LinkedList()
        }
        let i = -1
        const _map = (node, list) => {
            if (node.next) {
                _map(node.next, list)
            }
            i += 1
            return list.unshift(func(node.value, i, this.head))
        }
        return _map(this.head, new LinkedList())
    }

    map(func = () => {}) {
        if (this.length === 0 || typeof func !== 'function') {
            return new LinkedList()
        }
        const list = new LinkedList()
        let node = this.head
        let i = 0
        while (node) {
            list.unshift(func(node.value, i, this.head))
            i += 1
            node = node.next
        }
        return list
    }


}

`filter`

filter will be just like map in that we'll do both recursive and imperative while following the array implementation of filter. filter will create a new list with all elements that pass the test implemented by the provided function. The provided function has three arguments:

Element - The current element being processed in the array
Index - The index of the current element being processed in the array
Array - The array filter was called upon.

class LinkedList {

    // ...
    filterRecursive(func = () => {}) {
        if (this.length === 0 || typeof func !== 'function') {
            return new LinkedList()
        }
        let i = -1
        const _filter = (node, list) => {
            if (node.next) {
                _filter(node.next, list)
            }
            i += 1
            if (func(node.value, i, this.head)) {
                return list.unshift(node.value)
            }
            return list
        }
        return _filter(this.head, new LinkedList())
    }

    filter(func = () => {}) {
        if (this.length === 0 || typeof func !== 'function') {
            return new LinkedList()
        }
        const list = new LinkedList()
        let node = this.head
        let i = 0
        while (node) {
            if (func(node.value, i, this.head)) {
                list.unshift(node.value)
            }
            i += 1
            node = node.next
        }
        return list
    }
}

Return a new list
- If there is no length
- If the parameter is not a function
Create a new list
Set node to head
Set i to 0
While we have a node
- If the nodes value passes the test
  - Add the node to the new list
- Increment i
- Set node to node.next
Return the list

Conclusion

We now have a linked list with a bunch of added features!

If you wanted to you could also write tests for the list.

As always, thanks for reading.

Reflecting on a MagicMirror Build

Scott Hardy — Tue, 16 Oct 2018 03:57:41 +0000

Introduction

The Magic Mirror, voted Raspberry Pi's best project, is fun to build, moderately affordable, and provides a platform for further development. The program is wrapped by electron, and with some configuration the Raspberry Pi can boot right into the application with a rotated screen.

The author Michael Teeuw has a project manifesto. In short: Provide an approachable project for new and experienced developers alike. The project is open source.

MichMich / MagicMirror

MagicMirror² is an open source modular smart mirror platform. With a growing list of installable modules, the MagicMirror² allows you to convert your hallway or bathroom mirror into your personal assistant.

MagicMirror² is an open source modular smart mirror platform. With a growing list of installable modules, the MagicMirror² allows you to convert your hallway or bathroom mirror into your personal assistant. MagicMirror² is built by the creator of the original MagicMirror with the incredible help of a growing community of contributors.

MagicMirror² focuses on a modular plugin system and uses Electron as an application wrapper. So no more web server or browser installs necessary!

Documentation

For the full documentation including installation instructions, please visit our dedicated documentation website: https://docs.magicmirror.builders.

Contributing Guidelines

Contributions of all kinds are welcome, not only in the form of code but also with regards to

bug reports
documentation
translations

For the full contribution guidelines, check out: https://docs.magicmirror.builders/about/contributing.html

Enjoying MagicMirror? Consider a donation!

MagicMirror² is opensource and free…

View on GitHub

Why build it

I had a Raspberry Pi that was unused for some time. After a few Google searches, I was pretty set in building a MagicMirror. I wanted to have something physical after the project that can be used. Hopefully it will be a conversation piece.

What do I need to build

A Raspberry Pi 3 (MagicMirror recommends using a Pi 2 or 3). I used a card reader to flash the drive and install NOOBS. From there I installed Raspiban, I followed the documentation to install MagicMirror. Now I needed a monitor. My father-in-law had many sitting around and offered me one. I took a Philips monitor 190b7cs and followed the online manual to safely remove as much excess as possible.

Now I needed to figure out what type of mirror I wanted. At first I was thinking of using glass, but ultimately went with a 2-way Acrylic Mirror designed for this project.

So far my cost (in CND) was:

- RaspberryPi 3 - $60
- MagicMirror Program - Free
- Philips monitor 190b7cs - Free
- 2-way Acrylic Mirror - $80

Totaling $140 Canadian, two nights' work, and all that was left was a frame. Pretty good!

CNC building the frame

At this point the project came together pretty fast and I demoed the project to my wife. We decided to have a plain frame with a dark colour.

To build the frame I reached out to a friend for some advice. He's a partner with a local refacing company. He recommended medium density fibreboard (MDF) because it's cheap, and if you paint it no one will know the difference. Sounded great for a plain dark frame, he offered the MDF free and to cut it with his computer numerical control machine (CNC).

I was set.

At the Ottawa Refacing shop I learnt about CNC toolpathing in a basic sense: how to guide the cuts the CNC makes. Below is a video from the frame being cut, WARNING: loud machinery; please be aware of the volume.

The cuts are made in multiple passes, and the reason why the last cut goes the opposite way is bit deflection. The final pass in the opposite direction straightens the cut. This CNC is accurate to 1/2000th of an inch. After the frame was cut I cleaned up some edges and sanded it down. Then we pieced together a test build.

Painting

A non-water based primer is recommended for MDF. Oil-based primer is hard to find and I didn't want to spend too much money. I decided on a paint+primer combo. I also picked up wood mud, I had a small repair to make. Once the wood mud was applied and dried, I sanded. Oh god did I sand that frame. The below image is after the final sanding.

You can see in the top left and top right that I still didn't sand out all the imperfections. Top left has the main wood mud fix. I joked that I was fixing physical bug reports.

Next was the paint+primer combo. Matte black. In my opinion the brush stroke finish gave some life to the texture of the MDF. Two coats on the front and one coat on the sides and back.

I definitely still have more to learn with painting.

The Final Build

While the paint dried I made some small configuration changes to the MagicMirror dashboard, mostly for location accurate data. When the paint dried it was time to assemble the final build.

You are viewing the bottom of the mirror
The top has no back-frame and open for ventilation
The Pi is screwed to a wooden piece that is cement glued to the back-base
The monitor is screwed into the top and held by a cross-bar
I heat tested the acrylic overnight--it held up great

Conclusion

I am really happy with the build. Now I can SSH into the Pi from my main machine and make and additions or alterations to the dashboard, or even add a module. The total price was $185. I learned a lot from the physical build of the mirror. Paying attention to the details is paramount; you don't want to sand like I sanded. I want to thank Ottawa Refacing for their time and education of the CNC and providing the MDF.

I hope you enjoyed the read!

Cheers.

Notes on ECMAScript 6 (ES6)

Scott Hardy — Wed, 22 Aug 2018 01:36:00 +0000

Introduction

This is not meant to replace the official documentation.

This post does not cover all the ES6 features.

For typos and corrections: https://github.com/hardy613/es6-notes/issues

ES6 Variables

`var` vs `let`

Traditionally the keyword var initializes the identifier with a value:

var my_variable = 'value';
//1 //2         //3 

//1 the var keyword
//2 the identifier
//3 the value

There are rules for naming the variable identifier. These are:

identifiers cannot be keywords
can be alphanumeric, although cannot start with a number
$ and _ are also allowed characters for an identifier

Variables decalred by var have the scope of the entire function.

function myFunc() {
    if(true) {
        var my_var = 'test';
    }
    console.log(my_var); // test
}

The `let` keyword

let is preferred over var. Variables decalred by let have their scope
within the block they are defined.

function myFunc() {
    if(true) {
        let my_var = 'test';
    }
    console.log(my_var); // TypeError
}

Block scoping allows for variable shadowing.

function myFunc() {
    let my_var = 'test';
    if(true) {
        let my_var = 'new test';
        console.log(my_var); // new test
    }
    console.log(my_var); // test
}

The `const` keyword

ES6 also introduced a new variable keyword: const. Variables declared with
the const keyword are block scoped just like let however they cannot
change by reassignment and they cannot be re-declared; they are immutable.

const version = '0.0.1';
version = '0.0.2'; // TypeError: invalid assignment to const

const name = 'bill';
const name = 'ted'; // SyntaxError: Identifier 'name' has already been declared

Variables declared by const (constants) cannot be changed. However, with a
for loop the scope is redeclared at the start of each loop, where a new
const can be initalized.


function myFunc(items) {
    for(let i = 0; i < items.length; i++) {
        const message = items[i] + ' found at index: ' + i;
        console.log(message);
    } 
}

myFunc(['test', 100, 200]);
// test found at index: 0
// 100 found at index: 1
// 200 found at index: 2

ES6 for/of

The for/of loop uses the iterable protocol to create a loop. Strings, Arrays, TypedArray, Map, Set, NodeList, and custom iterable function hooks can all be used with for/of.

const arr = [1, 2, 3];
for(const number of arr) {
    console.log(number) // 1 2 3
}

To iterate over an object you can use the protocol Object.entries().
This will give arrays of ['key', 'value'] pairs. Unlike for/in this will
not iterate through the object prototype

const obj = { a:1, b:2, c:3 };
for(const prop of Object.entries(obj)) {
    console.log(prop); // ['a', 1] ['b', 2] ['c', 3]
}

ES6 Template Literals

Template literals are very handy for strings that use variables, or need to
make use of a quick javascript expression. Template literals are enclosed with
the back-tick. Template literals can also have placeholders,
these are declared with a dollar sign and curly braces ${placeholder}.

const number = 42;
const str = `Here's my favourite number: ${number}.`;
console.log(str) // Here's my favourite number: 42.

const count = 0;
console.log(`${count + 1}`); // 1

Template literals can be tagged with a function identifier before the
back-ticks. The function allows you to parse the template literal. The first
argument is an array of string values, the rest of the arguments relate to
the placeholders in the template literal.

const name = 'Theodor Logan';
const age = 21;

function showNameAndAge(strings, nameHolder, ageHolder) {
    // strings[0] is empty because we started with a
    // ${name} placeholder, placeholders at the start or 
    // at the end of a template literal will have
    // an empty string before or after respectively 
    const piece1 = strings[1]; // is
    const piece2 = strings[2]; // years of age.
    let ageNotice = '';
    if(ageHolder < 25) {
        ageNotice = 'What a babyface. ';
    } else {
        ageNotice = 'What an oldtimer. ';
    }
    return `${ageNotice}${nameHolder}${piece1}${ageHolder}${piece2}`;
}

showNameAndAge`${name} is ${age} years of age.` 
// What a babyface. Theodor Loagn is 21 years of age.

Tagged templates literals do not need to return a string.

ES6 Arrow Functions

Arrow functions are a shorthand syntax for functions that do not contain its
own this, arguments, super, or new.target and cannot be used as
constructors.

const arr = ['hammer', 'nails', 'pizza', 'test'];
console.log(arr.map(value => value.length)); // [6, 5, 5, 4]

Arrow functions are useful for anonymous functions,
however their power is with the lexical scoping of this.

function es6LexicalScope() {
    this.timeSpentSeconds = 0;
    setInterval(() => {
        console.log(this.timeSpentSeconds++); // 1 2 3 ...
    }, 1000);
}
es6LexicalScope();

Arrow functions do not have a prototype.

const func = () => {};
console.log(func.prototype); // undefined

To return an object as an implicit return, you can wrap the object in
the grouping operator (parentheses).

const returnObjBad = () => { test: 'value' };
console.log(returnObj); // undefined

const returnObjGood = () => ({test: 'value'});
console.log(returnObj); // { test: 'value' }

If you noticed, there is a small difference between the usage of arrow
functions in the provided exmaples. The usage of ():

Arrow functions with no parameters require ()
Arrow functions with one parmeter () are optional
Arrow functions with two or more parameters require ()
Arrow functions that only return, do not need {}, return, or ;

const fn1 = () => {[Native Code]};
const fn2 = param => {[Native Code]};
const fn2a = (param) => {[Native Code]};
const fn3 = (param1, param2) => {[Native Code]};
const fn4 = param => param;

ES6 Destructuring Assignment

Destructuring assignment lets you unpack values from an array or object.

const [x, y] = [1, 2, 3, 4, 5];
console.log(x); // 1
console.log(y); // 2;

const person = { name: 'Bill', age: 42, email: 'bill@example.ca', url: 'http://example.ca' };
const {name, age} = person;
console.log(name, age); // Bill, 42

Sometimes you want to keep all the other stuff. That is where the spread
operator ... comes in handy.

const [x, y, ...allTheRest] = [1, 2, 3, 4, 5];
console.log(x, y, allTheRest); // 1, 2, [3, 4, 5]

const person = { name: 'Bill', age: 42, email: 'bill@example.ca', url: 'http://example.ca' };
const {name, age, ...details} = person;
console.log(name, age, details); // Bill, 42, {email: 'bill@example.ca', url: 'http://example.ca'}

You can also destructure to build new variables!

const otherObj = {};
const person = { name: 'Bill', age: 42, email: 'bill@example.ca', url: 'http://example.ca' };
const obj = {...otherObj, person};
console.log(obj); // { person: {[...]} }

obj now has our person property with our person Bill. If the person
property was already set in otherObj then we would override that property.
Let's look at unpacking the length property from a string with destructuring.

const arr = ['hammer', 'nails', 'pizza', 'test'];
// without destructuring
console.log(arr.map(value => value.length)); // [6, 5, 5, 4]
// with destructuring
console.log(arr.map(({ length }) => length)); // [6, 5, 5, 4]

Let's breakdown the line we just added. console.log(arr.map( is pretty
standard. ({ length }) is the parameter for our arrow function, we are passing
in a string and destructuring the length property from the string and passing
that as a variable called length. The function parameter is the string
length. => length)); the rest of our arrow function. The property is also
the variable identifier and we only return the length. If you need a default
with destructuring, you can do that too!

const { name = 'Bill', age = 30 } = { name: 'Ted' };
console.log(name, age)// Ted, 30

const [x = 5, y = 10] = [20];
console.log(x, y) // 20, 10

ES6 Default Parameters

Funtions accept default parameters and destructuring parameters.

function addToFive(addTo = 0) {
    return addTo + 5;   
}
const ex1 = addToFive();
const ex2 = addToFive(5);
console.log(ex1, ex2); // 5, 10

function fullname ({firstname, lastname}) {
    return `${firstname lastname}`;
}
const user = { firstname: 'Theodore', lastname: 'Logan', age: '20' };
const fullname = fullname(user);
console.log(`Hello ${fullname}`);

When destructuring you can also assign defaults.

function myFunc({age = 42}) {
    console.log(age); // 42
};
myFunc({name: 'Theodor'});

ES6 Classes

ES6 class is new syntax for the traditional classes introduced in ES2015.
ES6 Classes are not introducing anything to JavaScript rather just another way
to write a JavaScript class. Class bodys are subject to JavaScript's
strict mode, the class body has new keywords and some words are
reserved as keywords for future use.

As with functions there are two ways to declare a class, expression or
declaration.

// expression
const Instrument = class {}; // or class Instrument {}
const instrument = new Instrument();

// declaration
class Instrument {}
const instrument = new Instrument();

Unlike a function, a class must be declared or expressed before it can used.

Constructors

constructor is a reserved keyword for classes and represent a function that
is called during the creation and initialization.

class Instrument {
    constructor(props) {
        this._make = props.make;
        this._type = props.type;
    }

    get type() {
        return this._type;
    }
}

const noiseMaker = new Instrument({ make: 'Crafter', type: 'Guitar' });
console.log(noiseMaker.type); // Guitar

Getters and Setters

getters and setters allow read and write access to class properties without
having to define methods. Getters and setters are accessible by inherited
classes.

class Instrument {
    constructor(props) {
        this._make = props.make;
        this._type = props.type;
    }

    set make(make) {
        this._make = make;
    }

    get make() {
        return this._make;
    }

    set type(type) {
     this._type = type;
    }

    get type() {
        return this._type;
    }

}

const noiseMaker = new Instrument({ make: 'Crafter', type: 'Guitar' });
noiseMaker.type = 'Drums';
noiseMaker.make = 'Yamaha';
console.log(noiseMaker.type); // Drums

Inheriting

Classes can inherit a parent class. Keeping with Instruments, let's make a
guitar class. The super keyword refers to the class being inherited.

class Guitar extends Instrument {
    constructor(make) {
        super({make, type: 'Guitar'});
    }
    set make (make) {
        super.make = make
    }
    get make() {
        return `The make of the guitar is: ${super.make}`;
    }
}

const myGuitar = new Guitar('Fender');
console.log(myGuitar.make); // The make of the guitar is: Fender
myGuitar.make = 'Crafter';
console.log(myGuitar.make); // The make of the guitar is: Crafter
console.log(myGuitar.type); // Guitar

Methods

Class methods are functions with the function keyword dropped.

class Guitar extends Instrument {
    constructor(make) {
        super({make, type: 'Guitar'});
    }

    set make (make) {
        super.make = make
    }

    get make() {
        return `The make of the guitar is: ${super.make}`;
    }

    log() {
        console.log(this.make, this.type);
    }
}

const fender = new Guitar('Fender');
fender.log(); // The make of this guitar is: Fender, Guitar

Object Definitions

Currently our object .toString() definition would return [object Object].
We can change the definition with a method property.

class Guitar extends Instrument {
    constructor(make) {
        super({make, type: 'Guitar'});
    }

    set make (make) {
        super.make = make
    }

    get make() {
        return `The make of the guitar is: ${super.make}`;
    }

    toString() {
        return `[${super.name} ${this.type}]`;
    }
}

const fender = new Guitar('Fender');
console.log(fender.toString()); // [Instrument Guitar]

`super` and `this`

Before you can use this.property in a constructor of an inherited class, you
must call super() first.

class Guitar extends Instrument {
    constructor(make, stringCount) {
        super({make, type: 'Guitar'});
        this._stringCount = stringCount || 6;
    }

    set make (make) {
        super.make = make
    }

    get make() {
        return `The make of the guitar is: ${super.make}`;
    }

    get stringCount() {
        return this._stringCount;
    }

    set stringCount(stringCount) {
        this._stringCount = stringCount;
    }
}

const guitar = new Guitar('Fender', 12);
console.log(guitar.stringCount); // 12

ES6 Modules

ES6 modules use the import and export keywords and are intended to be used
with the browser or with a server environment like NodeJs

// utils.js
export function add(left = 0, right = 0) {
    return left + right;    
};

export function times(left = 0, right = 0) {
    return left * right;
}

Now we can import our utils file. There are a few ways we can import.

// index.js
import * as utils from './utils.js'
// utils.add(), utils.times()

import { add, times } from './utils.js'
// add(), times()

You can also export variables or objects.

// my-module.js

const myVariable = 100;

const person = {
    name: 'Bill',
    age: 42
};

function trim(string = '') {
    return typeof string === 'string' && string.trim();
};

export { myVariable, person, trim };

// index.js
import { myVariable as maxAge, person, trim } from './my-module.js';

console.log(maxAge, person.age); // 100, 42

trim(' test '); // 'test'

There are two different types of export, named and default. You can have
multiple named exports in a module but only one default export. The above
examples are all from the named export, let's take a look at the default
export syntax.

// a default funtion
export default function() {[...]}
export default function myFunc() {[...]}

// a default class
export default class MyClass {[...]}

You can also have a variable as a default export

// other-module.js
const mySuperLongNamedVariable = 100;
export default mySuperLongNamedVariable;

When importing defaults you can name them without the * as keyword.

// index.js
import theVariable from './other-module.js'
console.log(theVariable); // 100

ES6 Promises

A Promise is an object representing the eventual completion or failure of an
asynchronous operation.

MDN

Working with promises

Promises are a convenient way to organize the order of operation for your
program and provide and alternative to passing callbacks as function parameters.
Say we have a function callToDb that makes a database call and returns a
promise

function success(result) {
    // do something with result
}

function failed(error) {
    // do something with error
}

callToDb('table_name').then(success, failed);

failed is only called if an Error is returned. Both of these arguments are
optional, however to use the result of the previous promise you need at least
a success function with one argument


callToDb('table_name')
    .then(response => {
        // do something with response
    })
    .catch(error => {
        // do something with error
    });

Like the above failed function, catch is only called if an Error is
returned. then returns a promise meaning we can now create a promise chain.


callToDb('table_name')
    .then(response => {
        // do something with response
        response.changesMade = true;
        return response;
    })
    .then(response => {
        // do more work
    })
    .catch(error => {
        // do something with error
    });

Chains can be as long as you need them. catch can also be used multiple
times in a promise chain, the next catch in the chain is called on return
of an Error and following thens will still be called.


callToDb('table_name')
    .then(response => {
        // do something with response
        response.changesMade = true;
        return response;
    })
    .then(response => {
        // do more work
    })
    .catch(error => {
        // only called for above thens
    })
    .then(response => {
        // do more work
        // will still happen after the catch, even if catch is called
    })
    .catch(error => {
        // do something with error
        // only called for the one above then if an Error is returned
    });

Creating a promise

The promise constructor should only be used to to wrap a function that does not
support a promise. Most libraries have built-in support for promises which
enable you to start chaining then right out of the box without a promise
constructor.

The promise constructor takes one executor function with two arguments:
resolve and reject. Let's create callToDb, a wrapping function to a
function without promise support.


function callToDb(table_name) {
    return new Promise((resolve, reject) => {
        return db_orm(`select * from ${table_name}`, (err, res) => {
            if(err) {
                reject(err);
            } else {
                resolve(res);
            }
        })
    });
}

A few things are happening here:

db_orm is our database library without promise support, it takes a callback
wrapping db_orm is our returning Promise which has our executor function with resolve and reject
once db_orm is in the callback we reject with the error, this will trigger a catch or
we resolve with our result, this will trigger the next then

Reject

Reject returns a promise that is rejected with a reason. To debug with ease
it is recommended to make the reason an instance of Error

Promise.reject(new Error('My custom message'))
    .then(result => {
        // not called
    })
    .catch(result => {
        console.log(result); // Error: My custom message
    })

To reject a promise inside a then chain you can return a new Error or
throw an Error to the catch.

Resolve

Resolve returns a promise that is resolved with a result. result can also
be another promise, thenable or value.

Promise.resolve('Sweet!')
    .then(result => {
        console.log(res); // Sweet!
    })
    .catch(result => {
        // not called
    });

Thanks to Hannah and Jonathan for helping proof read and thank you for reading.

I hope this helps!

edits: To code blocks

Cheers.

DEV Community: Scott Hardy

Serialization and you

Why is this a problem?

ts_serialize v1.0.0

Asynchronous vs Synchronous Programming

Introduction

Breaking Down JavaScript

Starting with callbacks

Synchronous Operations

Asynchronous Operations

Promises and Asynchronous Operations

A Linked List in JavaScript

Introduction

What is a linked list

Getting started

find by value

remove by value

get by index

reduce

map

filter

Conclusion

Reflecting on a MagicMirror Build

Introduction

MichMich / MagicMirror

MagicMirror² is an open source modular smart mirror platform. With a growing list of installable modules, the MagicMirror² allows you to convert your hallway or bathroom mirror into your personal assistant.

Documentation

Links

Contributing Guidelines

Enjoying MagicMirror? Consider a donation!

Why build it

What do I need to build

CNC building the frame

Painting

The Final Build

Conclusion

Notes on ECMAScript 6 (ES6)

Introduction

ES6 Variables

var vs let

The let keyword

The const keyword

ES6 for/of

ES6 Template Literals

ES6 Arrow Functions

ES6 Destructuring Assignment

ES6 Default Parameters

ES6 Classes

Constructors

Getters and Setters

Inheriting

Methods

Object Definitions

super and this

ES6 Modules

ES6 Promises

Working with promises

Creating a promise

Reject

Resolve

`find` by value

`remove` by value

`get` by index

`reduce`

`map`

`filter`

`var` vs `let`

The `let` keyword

The `const` keyword

`super` and `this`