WEEK 5: JizzBuzz and Other Adventures in Less-Than-Eloquent Javascript

It was the first programming language I learned. Yet now it suddenly feels alien.

Having read this article on why your first language should be Javascript — and because it was the first track I finished on Codecademy years ago, I’ve been looking forward to this week. Finally we’ll be able to start making web pages look like they come from this century!

Yet after 8 weeks spent focusing purely on Ruby, rusty was an understatement. I found I’d completely forgotten many syntactical differences like the triple ‘===’ operator and ‘parseInt’ instead of to_i.

And as I stumbled the week’s first exercises, first a FizzBuzz game and then a digital thermostat, I realised there were plenty of things I’d never really fully learned in the first place.

Here are just a few things to watch out for:

JS script tags are loaded in order.

Put your jQuery link FIRST, for example, or the console will give you a big fat ‘$ is not defined’.

A bit of ‘this’ and that

The word ‘this’ doesn’t do quite what you think it does. Not always, at least.

But the key to why is the following, which I’ve taken from this must-read article: http://javascriptissexy.com/understand-javascripts-this-with-clarity-and-master-it/

Even though it appears this refers to the object where it is defined, it is not until an object invokes the this Function that this is actually assigned a value. And the value it is assigned is based exclusively on the object that invokes the this Function. this has the value of the invoking object in most circumstances. However, there are a few scenarios where this does not have the value of the invoking object.

In a workshop this week, we took a look at just one of these scenarios:

function Person() {
this.name = "Mary";
};
Person.prototype = {
exclaimName: function() {
return this.name + "!";
}
};
// EXAMPLE 1
var person = new Person();
console.log(person.exclaimName());
==> Mary!
// EXAMPLE 2
var exclaimName = person.exclaimName;
console.log(exclaimName());
==> !

Take the time to properly play this out yourself on the console, because it’s really quite baffling at first.

In the first invocation, this is attached to person. But in the second invocation, you’re calling exclaimName in the global scope (the default since there’s nothing else attached to it) — and therefore ‘this’ is stuck on the top level, the window. Which doesn’t have a ‘this.name’ method, because it’s nothing to do with the Person constructor.

Jasmine Node: running away from SpecRunner

In the world of programming, where the big things are painful and scary, the small and cosmetic things that you CAN control seem to take on a monumental importance.

Like the decision of whether to test your Javascript using the stand alone Jasmine package, which you use by running an html file called SpecRunner in your browser… Or alternatively, using Jasmine Node — which runs using Node (a back-end JavaScript framework) in the command line, the same way RSpec did.

Now, the first consideration is that SpecRunner sounds like a sequel to 80’s Sci Fi classic Blade Runner, which is undoubtedly cool.

But equally, I’ve grown attached to the console and its retro futuristic appearance. I’ve invested hours into making it vomit candy-crush rainbow colours on every line of code I give it.

And besides, a sequel is already being made for Blade Runner. And who knows if it’s going to be any good? One is precarious enough a thought for the time being.

With that in mind, on Tuesday morning my pair and I wasted a fairly colossal amount of time trying to Jasmine Node work while busting out a thermostat program. The problem turned out to be a single line of code at the end of our model.js files.

Want to avoid? Follow this handy step-by-step guide.

$ npm install jasmine-node -g
  • Now go into your file and do the following 2 commands:
$ jasmine init
$ jasmine examples

Your file tree will look like this, and contain the example files you need.

├── lib
│ └── jasmine_examples
│ ├── Player.js
│ └── Song.js
└── spec
├── helpers
│ └── jasmine_examples
│ └── SpecHelper.js
├── jasmine_examples
│ └── PlayerSpec.js
└── support
└── jasmine.json

Now you’ll see, looking at the example files, that rather than adding your file directories to SpecRunner.html, you add them with require statements in your tests:

describe('Thermostat', function(){
var Thermostat = require('../src/Thermostat');
var thermostat;

But remember, it’s a two way handshake. Scroll all the way to the bottom of an example model file, and you’ll spot the other, crucial linking line of code:

module.exports = Thermostat;

Simply run jasmine the way you did rspec with Ruby.

small victories.

Then of course the following day I paired with someone who sensibly hadn’t bothered and didn’t get to finish the challenge with Jasmine Node anyway.

Here’s a video explanation as well in case you couldn’t get that to work:

Some more JavaScript resources I found useful this week:

Eloquent Javascript: Chapter 6 : The Secret Life of Objects

Wat: a talk by Gary Bernhardt on some anomalies of Javascript

Javascript for Cats — good on the basic stuff.

Node Workshopper — a stroll through Node, the back-end framework that uses JavaScript. First impressions are very positive.

And in other news: I went to my first industry event!

That’s Laurence Moroney, a senior developer at Google, introducing the crowd to a suite of Google technologies for mobile app developers.

I remember one of the teams showing off a final project a few weeks ago that was built using it.

It’s called Firebase and it’s impressively broad in the scope of what it does for apps — from user authentication to analytics, hosting, storage, customer messaging, testing and crash reporting.

One other cool feature was server-side variables, which he demonstrated within an Augmented Reality game that he’d been building using the Google Places API — that’s the one that Pokemon Go uses to tell when you’re near a specific place of interest.

He was able to show us that you can change fundamental things about your app based on geo-locational data — so that the character could speak to you in the language of whatever country you’re logging in from.

Even though Firebase seems to tie your app inextricably into a partnership with Google’s extensive marketing platforms (while probably sucking data out), it does seem like a fair value exchange — and one that impressed everyone at the event well enough.

I was just left wondering how long it’ll be before I’m good enough to make use of it.

Like what you read? Give Lawrence Hunt a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.