How to Learn Javascript

I am a self-taught web developer. I have learned Javascript on my own and I feel pretty comfortable with it. That took a lot of time for me. I have watched a lot of online courses, done the projects. After some time it just started to click.

If you take these courses (in this order), you can achieve a good understanding fast:

Andrew Mead’s Udemy Courses

The best introductory course in my opinion is Andrew Mead‘s Modern Javascript Bootcamp. It will not teach you everything there is to know about Javascript, but it will teach you the most often used features of the language. What I particularly like about Andrew’s courses is they are all packed with exercises and he is very motivating. So you will actually do all the exercises and by the end of the course, you will feel quite confident.

Andrew’s Node course is also a good one.

He doesn’t teach you everything though. That’s not even possible given the size of Javascript and the many possible applications of it. So you will have to supplement that knowledge with other courses.

Will Sentance’s Pluralsight Courses

Will Sentance is running Codesmith, a coding bootcamp company. He also has some awesome courses on Pluralsight. Andrew Mead’s course gives you practice with the tools of the language, Will’s course will help you understand how things work. At first sight Javascript is just like any other programming language, but under the hood it has quite a few weird features.

The Hard Parts, The New Hard Parts, The Hard Parts of Object Oriented Programming are all great from Will. I was not that impressed with his Node course, and I have not taken the functional programming one yet.

Bogdan Stashchuk’s Javascript Bible on Udemy

Bogdan is from Ukraine if I am not mistaken and he has put together an awesome course. It will deepen the understanding of all the basics of the language, how OOP is working and more. It also has lots of exercises that are actually interesting. A word of warning, he has a thick accent. It was not a problem for me as I am a non-native English speaker as well. Some of you may have trouble with that but in my opinion it’s worth to work through the course. I cannot praise it enough.

Asim Hussain’s Asynchronous Javascript Course on Udemy

Bogdan’s course doesn’t cover asynchronous Javascript. Javascript is the language of the web, and web is about making network requests. Javascript handles that with asynchronicity. The best course I have found on that is created by Asim Hussain. It uses Node as the instrument of teaching, so the fetch API is not covered but that’s covered pretty well in Andrew Mead’s course. Hussain’s course also has numerous exercises.

Other Resources

While you are going through these courses, you will start using MDN and Stackoverflow. W3Schools is also good for a quick check, but if you want real deep documentation of certain features, you will end up on MDN.

As you can see, the courses that worked for me are the ones that stress exercises. If you take these courses in this order, I am pretty sure you will succeed in learning Javascript. The next steps would be learning a front-end framework like React or Vue, or getting deep into backend programming with Node.

A Look at Javascript Nodelist vs. HTMLCollection vs. DOMTokenList

Working with the DOM using vanilla Javascript has never been easier. You no longer need JQuery to select parts of a website.

Still, there are a few things you should know before you can confidently select and modify HTML elements.

The Nodelist

When you use document.querySelector, you get back a Nodelist. A Nodelist is simply a list of nodes. It can be in the DOM, but not necessarily.

A node is the basic building block of a webpage.

A Nodelist not only contains elements but also textnodes. It’s not live most of the time, meaning that e.g. if you add a new node after you have got your Nodelist, your Nodelist will not necessarily update.

A live Nodelist is, for example, .childNodes. It means that if you append a new child, your childNodes Nodelist will be updated to reflect the change without you having to get the Nodelist again.

You can loop through a nodelist via forEach or a for loop using its index.

The HTMLCollection

An HTMLCollection is always live and it’s always in the DOM.

document.getElementsByClassname and document.getElementsBytagname both return an HTMLCollection.

The main differenve between a Nodelist and an HTMLCollection is that an HTMLCollection can only contain HTML elements. So for example line breaks you put into your HTML code will not show up in an HTMLCollection but it will in a Nodelist.

You can loop through an HTMLCollection using either it’s index or the tag name.

The DOMTokenlist

The DOMTokenlist is a special type of list. You mostly encounter it as the return value of .classList. It is a space separated list that is also index.

A DOMTokenlist has its own methods, like add(), remove(), replace(), and so on.

In contrast, .className will also return all classes but in String format and you don’t have those special methods available. You do have String methods though.

Javascript Limitations

When a programming language changes as fast as Javascript, browsers need time to catch up with it. That’s why support for some of the ES6 (ECMA2016) is spotty on some browsers.

The biggest limitation I see with Javascript is the way it handles numbers. If you do anything with floating numbers, the result won’t be correct. Javascript will add some random decimals to the result.

There is also a limit to how long numbers can be. It’s around fifteen characters. Above that what happens?

Javascript is also an (arguably) interpreted language. Although there is some Just in Time compiling, from a performance point of view, it’s safe to say that it won’t ever be as performant as some of the compiled languages.

Leaked globals are often an issue. Some think it’s a design fallacy that Javascript allows it.

let myVar = "some text";

let myFunction = function () {
  ...
  myvar = "some new text";
  ...
}

In this short example, I have made a typo by using a lowercase v in myvar inside the function. Javascript won’t give an error message and sets up a new myvar variable in the global scope.