DISCOVERY
December 7th, 2017
Native Getters & Setters
Creating getters and setters for private class variables is a common practice in many languages. In Java getters and setters are implemented as two methods on an object instance. Getters and setters are often used in the POJO structure. In JavaScript getters and setters have native support in the language itself. JavaScript getters and setters are created with the get
and set
keywords. They are commonly used for computing properties, as shown in the next example.
Setters can also perform validation on incoming data, such as type checking1:
DISCOVERY
November 26th, 2017
JavaScript Async Functions: Combining Promises and Generators
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
November 25th, 2017
Exploring Generators
When I first heard about generators in the ES6 version of JavaScript, I wasn't quite sure how useful they would be. In this post I will look at the basics of generators in JavaScript and other languages. In a future post I'll explore how to combine Generators and Promises.
The following code uses generators to create a fibonacci sequence.
DISCOVERY
November 21st, 2017
JavaScript Async: Converting Callbacks to Promises
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 20th, 2017
JavaScript Arrow 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
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
November 14th, 2017
Sorting Lists with Comparison Functions
In this discovery I look at sorting lists in different programming languages for non-trivial objects. The languages I use are my core languages: Java, JavaScript, Swift, Python, PHP, and C. I've used all these languages in larger projects and wish to stay proficient in them. Throughout this article I show snippets of code in each language, but you can also check out the full code on GitHub. Let's get started!
DISCOVERY
November 13th, 2017
Global Objects in JavaScript
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 12th, 2017
Challenges with Neo4j Graph Creation
In my last discovery post on graph databases and Neo4j, I created a graph representing a map of Fairfield County, Connecticut. I created nodes for all the towns/cities and edges between the settlements that shared borders. This discovery adds to the graph and shows some of the challenges I faced along the way. Let's dive in!
First I populated the graph with some people (after all, a settlement needs citizens!).
DISCOVERY
November 11th, 2017
Understanding "this" in 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 10th, 2017
ES6 Modules Run with Babel
In my last discovery post, I went over the revealing module pattern in JavaScript. Now I am recreating the same API with ES6 modules. The API code will look familiar:
The only change to the API is the export
keyword. export
is a new keyword in ES6 that reveals the function lyrics
to other JavaScript code. Any JavaScript file can be a module if it exports functions/variables. Only one module can exist per file, and each module can export multiple items. Since one file is one and only one module, the name of a module is the filename. Code to import a module uses the import
keyword:
DISCOVERY
November 9th, 2017
Closure & Lexical Scope in JavaScript Modules
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!