The New Javascript

Published by Michael Banzon on Sun Apr 23, 2017

Lately I’ve been doing Javascript - a lot of Javascript!

Doing Javascript in 2017 is a lot different that when i started doing Javascript in the late 90’s.

Here is a tale from my most recent experiences with arrow functions and this.

First let’s remember the fact that almost eveything in Javacript is an object. This is kind of true - Javascript does have basic types though - but the fact that functions and arrays are objects is very useful to remember. This article has the facts.

I have implemented web applications with Backbone, Angular and plain ol’ vanilla Javascript (with jQuery eg.).

These days I’m toying with a React application while keeping up with frameworks like Vue.js.

The arrow functions

One of the new Javascript features you’ll be seeing everywhere is arrow functions. These are a neat short way to declare functions - and a powerful way to avoid binding etc. (kind of).

Let’s start with a little example - consider the following function:

function foo() {
	console.log('foo')
}

Using arrow functions this would be expressed like this:

let foo = () => {
	console.log('foo')
}

This is even shorter with functions that take an argument:

function foo(bar) { console.log(bar) }

versus

let foo = bar => {
	console.log(bar)
}

The this reference

Personally I find that arrow functions are also specially useful when defining anonymous functions for callbacks etc. - like when doing AJAX requests or when using using timing functions like setTimeout and/or setInterval.

Consider the following code:

(function() {
	this.count = 0
	setInterval(function() {
		console.log(this.count++)
	}, 1000)
})()

We make an anonymous function with an internal property count and setup another (internal) function to output and increment the value of count every second.

But this is not what happens. This example prints (current version of NodeJS):

NaN
NaN
NaN
...

This is because the reference to this.count inside the anonymous function using in the interval is not the same as the this.count referenced outside it. In every function - anonymous or not - this references something different.

This can be solved by binding this:

(function() {
	this.count = 0
	setInterval(function() {
		console.log(this.count++)
	}.bind(this), 1000)
})()

or by having another variable to reference this outer version of this:

(function() {
	var outerThis = this
	this.count = 0
	setInterval(function() {
		console.log(outerThis.count++)
	}, 1000)
})()

Both these solutions are not that pretty - the bind() version is hard to understand - especially then you are new to Javascript. The otherThis version is just plain ugly.

See what happens when we bring in the arrow functions to this example:

(function() {
	this.count = 0
	setInterval(() => {
		console.log(this.count++)
	}, 1000)
})()

Magic! Problem just solved!

The difference is that arrow functions reference the this in the enclosing scope - in this example it is quite useful and exactly what we wanted!

A small note on array functions

Arrow functions are not supported by Internet Explorer. Edge is fine - but even IE11 (at the time of this writing) does not have support.