Javacript Under The Hood For Beginners

Oct 01, 2019 Freelancing

When I first started learning how to code I began with HTML and CSS, sensible choice right? The common advice for any rookie Front-End Developer is to start with these and then move on to Javascript.

The great thing about learning HTML and CSS is you can quickly see what's happening from a visual point of view for e.g. You add a color to your HTML element and you can see the visual appearance straight away. You get the idea.

When you start learning Javascript you can also see some quick visual reflections of your code for e.g. You may add an alert box like so:

alert('Hello World');

Refresh your browser and you see the resulting alert box with 'Hello World' inside.

The problems start once you start trying your hand at small applications built in Vanilla Javascript. You might try something like a to do list, which in reality is a very simple application to build, but you end up tearing your hair out over how hard you're finding completing such a minor exercise.

Vanilla Before Frameworks

I'm as guilty as anyone for trying to use Javascript frameworks such as Angular and React before actually having a good grasp of Vanilla Javascript. It's a tough lesson to make but it's important to understand that there's no substitute for learning the core of Javascript first before moving on to a framework.

Save yourself the frustration. Let's be honest, if you can't code a simple to-do list application in Vanilla Javascript you sure as hell can't do it within a framework either.

The Basics

Ok let's start with some of the basics of Javascript under the hood so we can get a general idea of what's happening.

First of all one common misconception of Javascript is that it's an interpreted language. It's actually a compiled language.

What's the difference between an interpreted and compiled language?

Well an interpreted language runs line by line, whereas a compiled language will run through the code first before executing line by line.

What this means in Javascript is when line 1 executes it's already ran through the code to look through the variables and functions.

Look at this piece of code:

var a = 1;

var b = 2;

var c = 3;

You would think the script would first run var a = 1, then var b = 2 and finally var c = 3.

But in reality this is what happens:

var a;

var b;

var c;

a = 1;

b = 2;

c =3;

So before var a even executes var b and c have been declared as undefined.

The same happens for functions:

greeting();

function greeting() {

alert('Hello!');

}

You might think 'greeting()' gets invoked first, and then the function is declared. If this was the case you would run into an error as you're trying to invoke a function that doesn't exist yet.

But in reality this is what happens:

function greeting() {

alert('Hello!');

}

greeting();

Because all variables and functions get read in the initial phase before anything gets executed. This is called hoisting.

There's a great talk on this subject by Tyler McGinnis which provides an extremely clear and concise explanation of this:

The Ultimate Guide to Execution Contexts, Hoisting, Scopes, and Closures in JavaScript

Event Loop

Another important concept of Javacript is the event loop, which is essentially the process in which everything runs behind the scenes.

In Javascript you can only ever run one piece of code at a time, whether that be invoking a function, logging a console message or storing data in a variable.

What this means is there's an event stack, when you run a function nothing else runs until the function has completed and then it pops off the stack and the next piece of code runs.

There's also some interesting querks that you might not have realised for e.g The setTimeout method which is an extremely common method isn't actually a part of Javascript, it's a simply an api provided by the browser.

To understand these concepts in more detail there's a very informative talk by Phillip Roberts:

What the heck is the event loop anyway?

Putting These Concepts In To Practise

These two concepts alone helped me understand Javascript on a much higher level than before, and made it much easier for me to build simple applications in Vanilla Javascript.

I would recommend watching both videos and then trying to build smaller programs in Vanilla Javascript.

Once you can do that and grow your understanding of Javascript even deeper, then you can start tackling frameworks like React and Angular.

But for now, master the basics and the rest will take care of itself.