DISCOVERY

May 23rd, 2018

Keeping Data Immutable in JavaScript

JavaScript

ECMAScript 6

+2 More

The benefits of keeping data immutable while programming is well documented. Immutable data is side effect free, predictable, and easy to test. While immutability is a strict requirement in the functional paradigm, for other paradigms it is simply a recommendation. In a language like JavaScript that supports multiple paradigms, some code does not keep data immutable. I am guilty of it too.

All the code I write these days has immutability in mind. This post goes over the basics of preventing object mutations in JavaScript and how ES6+ features simplify the task.

DISCOVERY

November 20th, 2017

JavaScript Arrow Functions

JavaScript

ECMAScript 6

Lambda Functions

In many programming languages arrow functions are added to allow for concise one liners and decreased verbosity. Less lines of code is one of the things that made the Java 8 release with lambdas so appealing. In ES6 JavaScript also added arrow functions to write shorter, more readable code. However, in JavaScript the arrow functions aren't as universally praised due to some quirks.

In JavaScript I looked at this and how its set dynamically at runtime instead of depending on its lexical scope. I also went over how many JavaScript users (including myself!) are easily confused by how this works. Arrow functions look to 'fix' these confusions by implementing a lexical this. Now the value of this in an arrow function depends on what this was equal to when arrow function was written (instead of when its called). This leads to confusing behavior if you are expecting arrow functions to act like normal function definitions. Let's look at an example.

DISCOVERY

November 15th, 2017

JavaScript Strict Mode

JavaScript

ECMAScript 6

One JavaScript feature I've used before but never fully understood is strict mode. Strict mode restricts certain features and leniencies in the language1. It protects the developer from things that happen implicitly in JavaScript (that only an experienced dev would be aware of). In a previous discovery I looked at how strict mode disallows this from containing the global scope variable. What else does strict mode have to offer?

Certain things that silently fail in JavaScript throw errors when executed in strict mode. This includes setting properties to primitives and assigning values to keywords.

DISCOVERY

June 9th, 2018

JavaScript Prototypes & Inheritance

JavaScript

ECMAScript 6

+2 More

For developers new to JavaScript understanding how prototypes work is quite confusing (myself included). The construct itself is quite simple, however those of us accustomed to class based object oriented programming have difficulty grasping JavaScripts object model. This discovery post attempts to clear up some confusing pieces of JavaScript prototypes and inheritance.

DISCOVERY

November 11th, 2017

Understanding "this" in JavaScript

JavaScript

this in JavaScript is part of the language that always confused me. The keyword doesn't work like its Java counterpart where it refers to the object instance of a method or constructor. Often in the past when using this I took shortcuts such as the popular var self = this statement so I wouldn't worry about the value of this in nested functions.

What makes this so confusing is that it's set at runtime instead of author time (compile time)1. In other words it doesn't follow the rules of lexical scope that I am comfortable with. this is incredibly daunting for new programmers since its value can be different when calling the same function on separate occasions.

DISCOVERY

November 13th, 2017

Global Objects in JavaScript

JavaScript

Node.js

Document Object Model

When you run code in JavaScript there is a global object created in the global scope. What this object is depends on the environment JavaScript is running in. If you run JavaScript code in your web browser the global object is window, which represents the browser window. Window exposes an API for interaction with the Document Object Model (DOM), click listeners, and other information about the browser window1.

In the past I have used the window object to check the current URL and previous page visited by the user (to create a 'back' button). However, the most common use of window is to manipulate the DOM and set click listeners (I used frameworks such as JQuery to perform these tasks in the past).

DISCOVERY

November 8th, 2017

Scope & Hoisting in JavaScript

JavaScript

JavaScript has quickly become one of the languages I use the most (probably second behind Java). Many people use JavaScript along with one of its many frontend frameworks (JQuery, AngularJS, etc.) without really knowing how the core language operates. I don't want to be one of those people!

This is my first of many discovery posts on JavaScript. Let's look at one of the basic concepts of the language: how variables interact with scope. Scope describes the area of a program where a variable is accessible (e.g. a variable declared in a function is only accessible within that function). Scope is also the execution environment for each line of a program. It consists of the variables and functions a program line is aware of. In JavaScript, scope can get a bit tricky.

DISCOVERY

November 21st, 2017

JavaScript Async: Converting Callbacks to Promises

JavaScript

ECMAScript 6

+2 More

Today I am looking at Promises in JavaScript and how they are used to write easy to follow and error resistant asynchronous code. Before writing any Promises I made an async call in JavaScript the traditional way; with callbacks. I didn't use any fancy JavaScript framework to make my async http request, just the simple XMLHttpRequest object (which is as poorly named as AJAX - it can be used for much more than XML!)1.

I made a custom google search API which was really easy and fun to create2! It searches certain websites for cat related posts (and is appropriately called meowmeow)! Who wouldn't love that? In my code I retrieve the article names from the top 10 searches in my custom meow search. The code uses the XMLHttpRequest object and a callback function:

DISCOVERY

November 9th, 2017

Closure & Lexical Scope in JavaScript Modules

JavaScript

API

In JavaScript there are multiple module patterns for creating APIs and separating concerns in code (as of ES6 there is also official module syntax in the spec). In the following code I created an API using the revealing module pattern. The name 'revealing module pattern' comes from the return statement at the end of the module - it 'reveals' functions to outside code.

This module provides lyrics for Taylor Swift songs (because who doesn't enjoy some T-Swift!) The return statement is the public API for the module. All interior details, such as the lyric variable, are hidden. This pattern harnesses the power of closure in JavaScript!

DISCOVERY

August 9th, 2018

GraphQL Part II - A JavaScript Implementation

GraphQL

JavaScript

+2 More

In my previous post on GraphQL, I gave a high level overview on the GraphQL ecosystem and how it compares to a traditional REST API. Now it is time to discuss the language features of GraphQL and how it can be used to create an API in JavaScript.

There are two distinct pieces of GraphQL to remember. First its a language to create queries for an API. Second its a runtime library on the server to handle queries directed at the API. The GraphQL language is what I will look at first.

DISCOVERY

November 26th, 2017

JavaScript Async Functions: Combining Promises and Generators

JavaScript

ECMAScript 6

+6 More

In previous posts I looked at Promises and Generators in JavaScript. I mentioned these two new ES6 features are especially powerful when combined. I do think that Promises on their own are very useful, however I am not yet sold on Generators.

By combining Promises and Generators, we can create a function that handles asynchronous tasks (let's call it async). This function takes one parameter - a generator function. Each yield statement in the generator returns a promise, which calls the generators iterator once resolved. Therefore each asynchronous task in the async function moves on to the next task in sequential order. Let's look at some pseudocode:

DISCOVERY

June 13th, 2018

Introduction to Web Workers

JavaScript

Web Workers

Document Object Model

When developers think of the JavaScript engine executing code in the browser, thoughts of a single threaded event loop come to mind. You often hear people say that JavaScript doesn't support multithreaded programming and that only one piece of code can run at a time. What they are referring to is the event loop, which delegates browser events for execution one at a time. But is JavaScript really single threaded? The answer used to be "its hard to tell," unless you had access to how exactly different browsers executed JavaScript code. With the addition of Web Workers, the answer is "no, JavaScript can run on multiple threads".

Web Workers enable multithreaded JavaScript programming in the browser. This discovery post discusses the basics of what Web Workers are and gives sample code of their basic functionality.