How to learn JavaScript, step by step

JavaScript's biggest strength is that all it needs is a browser. Every computer and every phone already has something built in that runs JavaScript. There are surprisingly few languages you can write and see results from immediately without installing anything.

Its other strength is that it sits at the center of web development. Press a button on a web page and something happens; type into a box and the screen updates instantly — most of that movement is written in JavaScript. If you want web development to be your job, you will pass through this language one way or another.

Fulfledge lets you pick either JavaScript or Python as your first language. Whichever you choose, the underlying ideas — variables, branching, repetition, functions, classes — are the same.

• If you want to head into web development, choose JavaScript. It connects directly to HTML & CSS and the to-do app project that come next
• If you want to focus on the ideas with less punctuation in the way, choose Python. It also suits people interested in data analysis or automation

If you are unsure, starting with JavaScript is fine. Finish either one and the other comes much faster.

The first three chapters cover the foundation of programming. This is the most important part, and it is fine to take your time here.

Chapter 1, the basics, starts with showing text and numbers on screen, then moves on to giving values names with variables and splitting work by condition with if statements. The three basic actions of any program — telling the computer to do things in order, making it remember, and making it decide — all appear here.

Chapter 2, repetition and holding data, covers doing the same work over and over (for and while loops) and holding many values together (arrays and objects). Put those two together and you can write things close to a real app: "average 100 people's scores" or "pull out only the products that match".

Chapter 3, functions, shows how to give a chunk of work a name so you can use it again and again. Take values in through parameters, hand a result back with a return value. Once this clicks, you can think of a long program as small parts.

By the end of these three chapters you can put together programs that do simple calculations and decisions on your own. Do not rush — working through every practice question before moving on is the recommended pace.

Chapters 4 through 7 cover how to organize the code you write so it still holds up in larger programs.

Chapter 4, classes, shows how to make one blueprint and create many things of the same shape from it. Game characters, shop products, user details — classes shine wherever lots of data share the same fields.

Chapter 5, splitting files, stops putting everything in one file: you split files by role, and learn to borrow parts (packages) that other people have made. Real apps are assembled from dozens or hundreds of files.

Chapter 6, array tools, and chapter 7, passing functions, are best learned together. Finding, filtering and transforming items in an array can be done with a for loop, but dedicated tools (find, filter, map, reduce and so on) do it in one line. And you use those tools by passing them the work itself — a function. Handing functions around as values is unavoidable once you start reading and writing real JavaScript.

Chapters 8 through 12 cover what you need to read and write real-world web code. They are not required, but if you plan to move on to TypeScript or a framework, they are well worth doing.

• Chapter 8, modern syntax: for...of, destructuring, spread syntax, optional chaining (?.). Things you will see in real code every day
• Chapter 9, Map and Set: a container of key-value pairs, and a collection with no duplicates
• Chapter 10, preparing for failure: catching errors with try / catch and throwing your own with throw
• Chapter 11, the data toolbox: passing data around as text with JSON, working with dates using Date, and checking the shape of text with regular expressions
• Chapter 12, waiting for slow work: Promise and async / await. Essential whenever you fetch data from a server

Asynchronous code in chapter 12 is where many people stumble, because it breaks the assumption that code runs from top to bottom. Get past it and the basic flow of a web app — receive data from a server, put it on the screen — finally makes sense.

Most people learning JavaScript trip over the same things. Just knowing them in advance makes a big difference.

1. Mixing up = and ===
= means "put the value on the right into the left"; === means "check whether they are equal". Write a single = in an if condition and instead of comparing, you overwrite the value. The two-equals == compares "loosely" even across types, which leads to surprising results. Decide now to use only === when comparing.

2. Numbering that starts at 0
The first item in an array is [0], the second is [1]. The last is [array.length - 1]. Going past the end does not error — it gives back undefined, which makes for bugs that are easy to miss.

3. undefined showing up
undefined means "no value is here". You forgot to put a value in a variable, forgot to write return in a function, or read a property that does not exist — the cause is almost always one of these. When you log something and see undefined, suspect those three.

4. Forgetting to keep a return value
map and filter return a new array and leave the original untouched. If you do not catch the returned value in a variable, the result goes nowhere. When "it runs but nothing changes", check whether you threw away the return value.

5. The order of asynchronous work
Forget await and the next line runs before the result arrives. If logging the return value of an asynchronous function shows Promise, check whether you printed the Promise itself before waiting for its result.

Compare the results with code

This example compares string concatenation with numeric addition, and checks what happens to a copied number after an update.

console.log("100" + "20");console.log(100 + 20);let score = 10;let saved = score;score = 50;console.log(score);console.log(saved);

The output is 10020, 120, 50, then 10. saved holds the number copied at the time of assignment, so updating score does not update it. Add saved = score; at the end and print saved again to see 50. Try changing one line at a time in the playground and compare the results.

Once you have worked through JavaScript, several paths open up.

The top recommendation is HTML & CSS. With JavaScript alone you can do calculations and decisions, but you cannot yet build what a screen looks like. Once you can lay out a page's structure with HTML and style it with CSS, the to-do app project that follows lets you combine them with JavaScript into an app that genuinely works. That is the first moment everything you learned takes a single shape.

The other path is TypeScript, JavaScript with types added, which catches mistakes before your code runs. In real JavaScript development, writing TypeScript is fast becoming the norm. It is not required, but it is a good unit to pass through before building apps with a framework.

Whichever way you go, the way of thinking you built with JavaScript stays the same. Each time you learn a new language or tool, you will find yourself thinking, "this is just like that thing in JavaScript."