Distrakt
+44 (0) 121 212 9737 / team@substrakt.com
© 2017 Substrakt Registered in England. Company no. 5916054

Becoming a JavaScript Ninja

February 8, 2017

Used on 72% of all websites, it’s pretty safe to assume that most web developers will run into JavaScript from time to time. Albeit, in a variety of different shapes and sizes, such as jQuery, React, Vue.js or AngularJS, there’s no avoiding it.

Yet, somehow, I did.

I was a professional LAMP developer for seven years before joining Substrakt last August. Previously, I had worked solely on one product for my entire career and, as a result, I never ran into JavaScript.

I know…

Shame, Shame, Shame

Armed with a copy of John Resig’s and Bear Bibeault’s ‘Secrets of the JavaScript Ninja’ and a CodeSchool account, I decided to use my Substrakt OKR time to learn native JavaScript in three months.

Substrakt Objective and Key Results (OKR) time is half a day each week where we get to up-skill or work on personal projects. We set and review two to three measurable and ambitious goals every quarter at a team strategy day. 

(Keep posted, as a journal post on how we use OKRs is currently in the pipeline.)

On my journey from absolute-novice to borderline-JavaScript-Ninja, I have pretty much immersed myself in the language, reading every article and blog that I have come across.

It’s been pretty intense – there’s a lot of content out there!

So, here is my roundup of the five things that I have found to be instrumental to making the most out of JavaScript and some of the better resources that I have come across along the way.

1. Browser Developer Tools

The harder it is to debug, the harder it is to develop.

With all browsers interpreting client side languages in a slightly differently way, making use of the built in developer tools that many browsers have to offer is essential.

Chapter 2 in Secrets of the JavaScript Ninja offers some great advice on using Console to debug. If you don’t have a copy of that book yet (which you should, by the way) then these are some of the better resources that I have come across:

In addition to understanding how to get the most out of browser developer tools, it is also really useful to know what console commands are available to you. This article by Dwayne Charrington has a great section on console commands.

2. Scope

Generally speaking, most developers will do their best to ensure that the global namespace is clutter-free. However, in JavaScript, it’s actually quite easy to flood the global namespace because, unless you explicitly define your variables with the var keyword they will be globally scoped to the window object.

Implicitly defining variables without the var keyword is a common and totally uncool mistake that is often made by many novice JavaScript developers.

See the example below:

var varOne = 'Global Scope';

function scopeNinja() {
 var varTwo = 'Local Scope';
 varThree   = 'Global Scope, Again...';
 
 console.log(varOne); // Global Scope
 console.log(varTwo); // Local Scope
}

scopeNinja();

console.log(varOne);   // Global Scope
console.log(varThree); // Global Scope, Again...
console.log(varTwo);   // Uncaught Reference Error

For different reasons, varOne and varThree are both available globally whereas varTwo is only available from within scopeNinja function due to the use of the var keyword. If you test the code yourself, you will notice that varThree is available from outside the function, simply due to its implicit declaration.

This is an extremely rudimentary explanation of local and global scope and the use of the var keyword. For a more thorough tutorial on scope, check out either of these write-ups:

A strong understanding of scope is key to being an efficient and safe JavaScript developer. If you know how to make good use of scope, you can protect your applications from vulnerabilities which is vital when performing delicate tasks.

For example, if you were writing a JavaScript game that saved a score into a database, it would be foolhardy to have your score property scoped to the window object. This would mean that people could modify score via console and potentially compromise your database or simply ruin your score set with fake data.

For those who are interested in application security through scope, this article on protecting properties and methods by using JavaScript’s object model by Douglas Crockford is extremely useful.

3. Hoisting

JavaScript is an exceptionally flexible language – you can declare a variable almost anywhere! However, without a basic understanding of hoisting, you can quickly turn simple declarations into annoying little bugs (and there are plenty of “bugs” in JavaScript without the need to add your own).

In a nutshell, hoisting is the act of being able to forward reference declared functions and variables.

“Forward referencing”, or as it’s sometimes known, “forward calling” is the act of calling upon declarations in your code that have yet to be defined.

If you do forward reference a declared function or variable, the JavaScript interpreter will recognise this and hoist all required declarations to the top of the current scope, ensuring that every line of code can be executed when it’s required.

Understanding the very logical principles that govern hoisting is essential to making efficient and robust JavaScript applications. I found level three of the JavaScript Road Trip Part 3 by Code School to be the best resource for learning about hoisting.

For those who don’t have a Code School account here are some other great links for learning everything there is to know about hoisting:

4. Functions are first-class objects

As a JavaScript developer, “functions are first-class objects”, “functions are first-class citizens” and “first-class functions” are phrases that you are likely to hear from time-to-time.

As you may already know, a JavaScript object is an unordered collection of key-value pairs. If it’s not a primitive such as boolean, integer, string, undefined or null then it is an object.

In JavaScript, functions are of the object type, so when people say “functions are first-class objects” they are simply saying that you can do with a function what you can do with an object.

This means they can be assigned key-value pairs, they can have constructors, contain other functions (methods) etc, etc.

Check out any of these helpful but rather chunky articles for a good understanding of object oriented JavaScript and how to make the most of functions as first-class objects.

5. Prototypes

If, like me, you are/were a complete novice then you may have already used prototypes without realising it. Admittedly, I hadn’t even heard of prototypes until I reached the end of my JavaScript Road Trip on Code School but wow, are they useful!

A prototype in JavaScript is an object that other objects will inherit properties from. By default, every object has a prototype and since prototypes are also objects, they have prototypes too!

A great example of a commonly used prototype is one that you may already be familiar with:

var myString = 'Hello World';
console.log(myString.length); // 11

That’s right, length is a prototype of the string primitive, just assum is a prototype of the integer primitive.

Not only can you simply call on existing prototypes such as length and sum, but you are also able to create your own prototypes or modify existing prototypes.

As you can imagine, this is extremely useful and a solid understanding of JavaScript prototypes will really begin to pay dividends as you delve more into the object oriented side of JavaScript.

CodeSchool does a wonderful job of explaining prototypes on Level 5 of their third road trip. Alternatively, I found these two articles particularly useful:

Conclusion

Whether you like it or not JavaScript is here to stay.

Understandably, as Jose Aguinaga quite hilariously points out, the thought of learning JavaScript can be a daunting prospect with all of the different frameworks that are available.

My advice: Try to resist the temptation of learning a framework first.

Keep it simple and learn the fundamentals of native JavaScript.

The skills that you ascertain from learning the native language will be a lot more transferrable than those picked up when learning a framework. As a result, any frameworks that you do decide to master later down the line will be that extra-bit easier to learn as you will be a far more robust developer for your troubles.

Finally, if you would like to talk about any of these points in more depth or would simply like to talk dev, hit me up on Twitter.

Tom Cash