You’ve made the decision to learn JavaScript - one of the most popular and diverse programming languages in the world! Fantastic!
Now, where should you start? That’s exactly what we’re here to answer for you.
We want to provide the best way to learn JavaScript and we’re making no assumptions about what you know. Never programmed before? That’s no problem - think of this as the path for how to code for beginners with JavaScript! Know how to program, but not with JavaScript? Feel free to skip sections of the guide below.
We’re happy to help, but before diving right into JS, let’s talk about the recommended mindset when learning it.
The JavaScript mindset
Learning something new is hard. Point, blank, period. That also means it’s rewarding, the key is to enjoy the process! To do so, I recommend starting with “why”.
Why do you want to learn JavaScript?
Take a moment to define and write down the motivation you have for learning JavaScript. Is it because you want to create a new SaaS company using the web? Are you switching careers because you’ve caught the tech itch? Is this something you’ve always wanted to do, but never made time for?
Whatever your reason is - write it down, remember it, and have it readily available for the days you need that motivation.
Grit & Persistence
I mentioned in a previous article, Anyone Can be a Software Engineer, that my path to becoming a Software Engineer was not because I was smart, but because I kept pushing towards my goals.
When learning JavaScript, you will feel frustrated, irritated, and blame the computer when something isn’t working. I’ve known JavaScript for six years or so now, and that still happens to me. From bugs in Angular to a quirky JavaScript feature that is in small print, being a programmer means being a continuous learner.
When things go wrong, don’t work, or feel impossible - take a break, read your why, and get back in the learning game!
Join a community
Having other people that keep you accountable or enable shared learning makes a huge difference when learning a new skill. I recommend finding that community and I have listed a few options to check out in the extra resources section at the end of this article.
The way that web devs support, innovate, and assist each other makes it the fantastic community it is today. Additionally, by writing and explaining what you learn to others (👋 the Feynman Learning Technique), you can identify and discover improvement areas.
This takes us into our next topic for the guide.
Learning Process
Taking on the task of learning a brand new skill is daunting without a plan of attack. The point of this section is to provide you with one. As mentioned before, I believe in the Feynman Technique for learning; you can see its influence below.
The high-level process looks like this for each study session/topic:
Review a previously learned topic
Learn a new topic through a tutorial
Read through the official docs (MDN)
Take notes and summarize your understanding
Complete the tutorial without reading through it (testing your comprehension of the skill)
If you must look back to get back on track, do so, but only for that one place you're stuck, then continue on your own
Add extra bells and whistles if possible
Try using the learned topic in your own small project (can be anything you want)
Write your own tutorial based on that project (this is where gaps would be noticed and re-learning encouraged)
This can be in your own notebook, doesn’t have to be public if that isn’t comfortable for you
Use the summarized notes you have as a guide
Note: one topic may take multiple study sessions. I didn’t learn of the benefits of this process until later in my career, but of course, taking notes and having tests on programming topics had its own flavour during my university days.
The main reason I recommend this approach has to do with the risk of something called “tutorial calamity” (aka Tutorial Hell).
Avoid Tutorial Calamity
Have you ever watched a how-to video on something, and it made you feel like accomplishing this task will be easy. As you follow along, do exactly what the video says, and get decent results, it can be easy to mistake this as your own skill level. Being guided and independently doing a task are two very different things.
What happens sometimes for web devs is the mistake of only doing tutorials when learning something new. You spend time learning React with tutorial after tutorial, only to find out when trying to create your own React app, you’re not sure what to do.
That event and feeling of not knowing what to do after working through many tutorials is the moment of Tutorial Calamity! Following the learning process above will help you avoid that once you’ve learned each topic!
Scheduling and Planning
It’s widely accepted these days that small habits over time are what makes a difference and drive the results you want in life.
“Learn JavaScript” truly breaks down into pieces like:
Learn how variables work
Learn the difference between null and undefined
Learn how logical statements work
Etc.
In other words - you don’t just learn JavaScript. You learn pieces of JavaScript every day for a while which leads you to become competent.
Because of that, I recommend scheduling time each day to study. During these sessions, give studying your full attention as you go step by step through each of the topics below.
These topics can be learned by finding tutorials for each one with a quick google search, finding a course on Udemy, following the FreeCodeCamp curriculum, or buying a course from a well-known teacher in our community. I’ve listed a few resources in the last section of the guide and hope they help you on this journey!
Lastly, I truly encourage you to be kind to yourself while going through this process. It’s ok if you miss a day or two, it’s ok if you get overwhelmed, and it’s ok if you have trouble learning.
It’s all part of the process!
The Topics
1 - Just Getting Started
History of JS and how it was created (optional)
Difference between JavaScript and ECMAScript
How JS was invented by Brandon Eich and why it was created
Primitive Data Types
Boolean
String
Number
BigInt
Null
Undefined
NaN
Reference Types
Arrays & Loops
Objects
Maps
Sets
Expressions & Operators
Assignment operators
Comparison operators
Arithmetic operators
typeof and instance of operators
Explain the difference between primitive and reference types in JS
Pass by reference vs pass by value
Variables & Assignment
Scope
Global
Functional
Block
Types:
Var
Let
Const
Code comments
Single line comments
Multi-line comments
JavaScript Date Objects
Creating them and how they work
Modifying existing date objects
Formatting their output
2- Heating Up
Logical operators statements
If
Else
If else
Switch statements
How to use them and write them
When to use them?
Loops
For
While
Do while
When to use each one?
Array Methods
Filter
Find
Etc
Object methods
Entries, keys, values, etc
String methods
Replace
Contains
etc.
String templates vs regular strings
How interpolation works
Performance of template strings vs regular strings
Creating multi-line strings in JS
Functions
What are their purpose
How to create one
Array functions vs non array functions
How to call one
Returning a value and assigning it to the variable
Classes
How to write and use a class
Object Oriented programming basics
Static vs non static methods
Class properties: public vs private
Private vs public methods
Error handling
try
Catch
Finally
Destructuring Assignments
How to destructure an object
How to destructure an array
Renaming a destructured property
JSON
Its structure
Converting between strings and json with built in JSON methods
Why is JSON around and how is it used?
3 - All star
Spread and Rest operator
What are they used for?
Shallow vs deep copy for reference types
Data Types:
Weak map
Weak set
Symbols
Coercion
How it works and what it means in JS
Explain the difference between strongly typed languages vs JavaScript
Equality:
Equality operators, === vs ==
Closures
What is a closure?
Why are they important in JavaScript?
“This” in JS
What is “this” in js
How this works with the following methods
.bind
.call
.apply
Inheritance
Prototypical inheritance
How to use it with classes
How to use it with functions
Instance of
ES Modules
Why were they introduced?
How are they helpful?
The different types of exports and imports
Dynamic imports
Callbacks
Why they are used and their history
Callback hell
Promises
How they work and how to use them
Promise methods like Promise.all
Await and Async
How do they relate to promises?
Using them for async code
Generator Functions
What are they and why use them?
Currying
What is currying?
How to use it with JS?
When to use it?
Recursion
How to use it in JS
Tail end recursion in ES6
Bitwise operators (optional)
Extra Resources
Official Docs:
Recommended Courses:
Recommended Books
JavaScript the Good Parts (a bit outdated, but still a recommended book)
You Don’t Know JS (Recommend this after doing a course or two)
Recommended Communities:
Believe it or not, but Twitter! Follow top web developers and join in on the discussions! There are many to list, so a quick google for recommendations will lead the way here.
