A Rebelious Child: JavaScript

I like to think of javascript as that rebellious child that everyone just assumed would peak at high-school but has slowly but surely taken over the world. It’s outgrown browsers and snuck its way into your web API (NodeJS) and it’s even taking a foothold in desktop applications (Electron); hell with the help of wrappers like PhoneGap and Apache Cordova you can even create native mobile apps using it.

But javascript is a funny language, it does some pretty odd things sometimes which can leave you pulling out your hair. I’m going to try and go over areas of the language I find  particularly interesting and hopefully I can help you improve your JS knowledge.

I’m an object too!

That’s right, near enough everything in javascript is an object. But don’t pass over this section just yet, javascript is slightly different to conventional languages, oh no, it’s trying to hang with Ruby and Python by being all hipster.

An Object in JS is simply a key value pair (hashmap/dictionary depending on what language you come from). A key is always a string and the value can be pretty much anything, string, integer, function, boolean even other objects.

var obj = {}; // we've created an object
obj['extVariable'] = 'we just attached a new var'; // attaching properties externally
obj.extVariable = 'or you could attach a new var this way'; // the exact same can be done for functions

Moving past this, lets look at the implications of nearly everything being an object in JavaScript; specifically the very common oversight when validating an object’s existence. I hate to admit it but this has caught me out a few times…

var n = null;
console.log(typeof n === "object"); // true - uh oh...
console.log((n !== null) && (typeof n === "object")); // false - solution? 
                                                      // explicitly make sure its not null

Scope / Name-spacing 

There are a fair few ways to get caught out by scope when writing code in any language but instead of going over the basics and pointing out common flaws. I want to look at why wrapping javascript files in anonymous functions has become a thing.

Take the following code as our example…

function globalFunction() { // suited and booted, presentable to the world
   function privateFunction() { // things you do at home when the blinds are closed... 
   }
}

So the globalFunction is global and the privateFunction is private, I can hide functions and variables, cool… ?

The purpose of this set-up is specifically to hide the private function from the global scope, yeah you said that…  but it also allows us to expose specific functions to the outside world too. In combination these two details are the reason we can use multiple libraries in the same js file without having libraries clash. A quick look at what exposing functions from a private scope looks like in code…

var myLibrary = (function() {
 var privateVar; // a females age/weight... 

 function privateFunction() {  // just remember, the NSA might be watching... 
 }
 return {
    publicFunction1: function() { // act proper, the world is watching
    },
    publicFunction2: function() { // act proper, the sequel 
    }
 }
})();

Okay that’s great, but what if I want to pass some object in to do some processing on it? What then?

(function($) {
    /// we getting that $
})(jQuery) 

Viola, that’s what you do. You take the global jQuery object and pass it in as an argument into your private world, just make sure you test its not null before using it!

Advantages of scoping:

  1. Allows you to redefine global variables and give them better names privately
  2. Compression, magnification tends to like this approach (or so I hear)
  3. Speed advantage of looking things up in the local scope in compression to crawling up the chain

Check out Douglas Crockford‘s page if I’ve intrigued you.

Leave a Reply