Is Vanilla JavaScript worth learning? Absolutely.

The purpose of this post is to emphasize the importance of JavaScript fundamentals for every front-end developer. I’m going to tell you why you should have a good knowledge of pure (Vanilla) JavaScript. This means JavaScript without any additional frameworks or libraries.

I’ll also mention a couple of resources that helped me to learn these basics.

Another reason behind this post is that many aspiring web developers tend to skip learning core JavaScript concepts such as hoisting, closures, or prototypes. They go straight to the hottest frameworks such as React or Angular 2. I’ll show you why this approach is not the most convenient one.

Everybody wants developers with knowledge of ${addTheHotFramework}…

So, is there any reason why you should bother learning Vanilla JavaScript?

It’s hard to become a strong developer without knowledge of the core of the language itself. Just as you need to understand fundamental principles of the law before you can jump into a particular field of law. This comparison is purely accidental. 😉

I understand that the majority of aspiring web developers want to get hired as soon as possible. I wanted this as well.

It seems much easier to do a crash course on JavaScript basics, jump into some fancy framework, make a ToDo list (let a puppy die), upload it to GitHub, then start looking for a job.

##…but investing time in Vanilla JavaScript will pay off in the long run

Don’t get me wrong here. I am not biased against JavaScript frameworks in any way. It’s exactly the opposite. Many of them help you to write more readable and maintainable code. They let you write more abstract code that is often easier to debug.

But the JavaScript ecosystem is evolving pretty fast. New frameworks are being created. New functionalities are being added to the existing ones. And most important, many of today’s hottest frameworks will eventually be replaced, such as Angular 1.

In such circumstances, do you still think that knowledge of a particular JavaScript framework is sufficient for a web developer?

Or is it better to understand how the language which all these libraries and frameworks are based on works under the hood?

If you possess a solid knowledge of JavaScript fundamentals, the only thing you need to get yourself familiar with when starting to work with a new framework is its syntax. The basic rules will be the same since under all the layers of abstractions. It is still just plain ol’ JavaScript.

If your knowledge is limited only to a single JavaScript framework, you will have a hard time learning a new one. Different frameworks are often based on a different set of JavaScript principles. In the long run you will spend more time trying to understand various frameworks and debugging the code you write in them.

All the JavaScript frameworks and libraries are inevitably based on its Vanilla core.

This should convince anyone that knowledge of a pure JavaScript is a must in the long run. It is a prerequisite for any successful developer, especially for one working mainly in the JavaScript ecosystem.

Personal experience

Not long ago, I looked back at my journey from a lawyer to a web developer. It has already been 18 months since I wrote my first JavaScript function, and my 10th month working as a professional front-end developer.

I still remember how challenging it was for me to discover the right way of learning JavaScript, since I had no prior programming experience. I have tried (and am still trying) many different ways to become an effective learner. Some of them were more rewarding, some of them less.

Most important, I cannot stress enough how helpful it was for me that I put emphasis on learning pure JavaScript from the beginning. Frameworks came later.

At the moment, I am working with a React-Redux stack. Even so, I often come across a problem that I can solve thanks to my knowledge of Vanilla JavaScript. These bugs would be much more challenging to solve with only the knowledge of a particular framework.

Learning React or Angular 2 won’t teach you that objects are passed by reference or how closures works. Trying to understand these concepts under the abstractions brought by the framework is much harder. This makes simple JavaScript concepts more difficult to understand.

Furthermore, if you are working with JSX (React, Vue, Inferno) or TypeScript (Angular 2), you have an another layer of abstraction on top of it.

If you want to understand how these frameworks work under the hood, you need to know how JavaScript itself works first.

You can test your knowledge of pure JavaScript by reading the source code of your favorite framework. Not only will this give you a picture of how it works under the hood, it will also teach you a lot about its logic, which you can use in your own code. You will see that framework’s functions that seems to be doing a lot of magic in your application are just compositions of basic JavaScript concepts.

Give me something I can learn from

The question you might be asking now is “What are some good resources that can help me to acquire decent knowledge of Vanilla JavaScript?”.

There are tons of courses and books about JavaScript and its frameworks. Yet few of them aim to teach you Vanilla JavaScript in a comprehensive way. Most of them specialize for a particular JavaScript technology.

But there are still some good ones…

Eloquent JavaScript will teach you not only basics of JavaScript, but also basics of programming in general. If you are already an advanced developer, this book will provide you a fresh perspective on JavaScript and on its core principles.

Another great resource is the book series You Don’t Know JavaScript (YDKJS) by Kyle Simpson. Kyle really knows how to teach. His explanations of advanced JavaScript concepts are beginner-friendly and he covers them in-depth. The mere titles of the books will give you a hint about what you are going to learn. “Up & Going”, “Scope & Closures”, “this & Object Prototypes”, “Types & Grammar”, “Async & Performance”, “ES6 & Beyond”. There is also a new 7th book about functional programming in JavaScript.

One of the great things about Eloquent JavaScript and YDKJS is that you can get them for free (check the provided links). But if you really find them useful, don’t forget to support the authors by buying them.

If you’re more a video course person, you can watch Kyle’s online courses. I guess the best thing you can do is to watch them as a companion to his books since the topics are the same. However, these courses are paid.

Another video course that I find useful is JavaScript: Understanding the Weird Parts by Anthony Alicea. It explains what happens under the hood of JavaScript in an approachable way. It covers advanced concepts such as prototypical inheritance, functional programming and scope chains.

Learn Vanilla JavaScript, now

If you invest your precious time in learning Vanilla JavaScript, you won’t regret it. Not only does it contains the word vanilla, but it will have a beneficial impact on programming skills.

For me, the best trade-off is that learning pure JavaScript will give you much more in the long run than investing time in a particular framework. Frameworks are just shortcuts. Under the hood it’s all JavaScript.

You’ll see for yourself in a situation where a framework you’re using has some unexpected behavior. In such case, you’ll be forced to investigate this bug by going through the source code. Did I mention that although many frameworks lack decent documentation, they have a pretty complex code? But hey, piece of cake, right? You surely already spent a lot of time learning Vanilla JavaScript. Or not yet?

Should you remember only one thing from this post:

Always keep it mind that knowledge of Vanilla JavaScript will help you to become a much better developer. Period.