Now, where should you start? That’s exactly what we’re here to answer for you.
We’re happy to help, but before diving right into JS, let’s talk about the recommended mindset when learning it.
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”.
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 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.
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 how variables work
Learn the difference between null and undefined
Learn how logical statements work
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!
1 - Just Getting Started
History of JS and how it was created (optional)
How JS was invented by Brandon Eich and why it was created
Primitive Data Types
Arrays & Loops
Expressions & 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
Single line comments
Creating them and how they work
Modifying existing date objects
Formatting their output
2- Heating Up
Logical operators statements
How to use them and write them
When to use them?
When to use each one?
Entries, keys, values, etc
String templates vs regular strings
How interpolation works
Performance of template strings vs regular strings
Creating multi-line strings in JS
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
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
How to destructure an object
How to destructure an array
Renaming a destructured property
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
How it works and what it means in JS
Equality operators, === vs ==
What is a closure?
“This” in JS
What is “this” in js
How this works with the following methods
How to use it with classes
How to use it with functions
Why were they introduced?
How are they helpful?
The different types of exports and imports
Why they are used and their history
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
What are they and why use them?
What is currying?
How to use it with JS?
When to use it?
How to use it in JS
Tail end recursion in ES6
Bitwise operators (optional)
You Don’t Know JS (Recommend this after doing a course or two)