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!
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 your 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 flavor 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, doing exactly what the video says, and getting 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 drives 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
- 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
- Single line comments
- Multi-line comments
- Creating them and how they work
- Modifying existing date objects
- Formatting their output
2- Heating Up
Logical operators statements
- If else
- How to use them and write them
- When to use them?
- Do while
- 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
- 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
- Weak map
- Weak set
- 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
- Prototypical inheritance
- How to use it with classes
- How to use it with functions
- Instance of
- Why were they introduced?
- How are they helpful?
- The different types of exports and imports
- Dynamic imports
- Why they are used and their history
- Callback hell
- 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)