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.

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”.

Your “Why”

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!

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:

1. Review a previously learned topic

2. Learn a new topic through a tutorial

3. Read through the official docs (MDN)

   1. Take notes and summarize your understanding

4. Complete the tutorial without reading through it (testing your comprehension of the skill)

   1. 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
   2. Add extra bells and whistles if possible

5. Try using the learned topic in your own small project (can be anything you want)

6. Write your own tutorial based on that project (this is where gaps would be noticed and re-learning encouraged)

   1. This can be in your own notebook, doesn’t have to be public if that isn’t comfortable for you
   2. 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 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:

• ECMAScript Spec
• Mozilla Developer Network
• W3 Schools

Recommended Courses:

• Code Academy
• JavaScript for Beginners
• Free Code Camp
• Javascript.info

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:

• DEV Community
• Free Code Camp Forums
• 100 Days of Code
• 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.