Learn JavaScript

Where JavaScript is used

Web pages and front ends

Every interactive thing a web page does — a menu that opens, a form that checks itself as you type, a chart that redraws — is JavaScript changing the page through the DOM, whether written by hand or with a library such as React or Vue.

Servers and APIs

Node.js runs JavaScript outside the browser, so the same language can answer HTTP requests, talk to a database and serve the pages it was also used to build.

Command-line and build tools

Much of the tooling web developers use daily — bundlers, formatters, test runners — is itself JavaScript, installed and run through npm.

Desktop and mobile apps

Frameworks such as Electron and React Native wrap JavaScript so one codebase can become a desktop or phone app, at some cost in size and speed compared with a native one.

Browser extensions and automation

Browser extensions are JavaScript, and headless browsers driven by JavaScript fill in forms, take screenshots and test websites without anyone clicking.

Your first JavaScript program

Saved as hello.js. You can paste it straight into the playground to see it run.

const student = "Asha";
const scores = [72, 88, 95];
let total = 0;
for (const score of scores) {
  total += score;
}
console.log(`Hello, ${student}!`);
console.log(`Average score: ${total / scores.length}`);

What it prints

Hello, Asha!
Average score: 85

1. Line 1 stores the text "Asha" in a constant called student. const means the name cannot be pointed at a different value later, and anything in quotes is a string.
2. Line 2 makes an array — an ordered list — of three numbers. Square brackets create it and commas separate the items.
3. Line 3 declares total with let rather than const, because the loop is about to change it. It starts at zero.
4. Lines 4 to 6 are a for...of loop: each pass takes the next item from scores, calls it score, and adds it to total. The braces mark which lines are repeated.
5. Line 7 prints a line. The backticks make a template literal, and whatever is inside ${...} is worked out and dropped into the text — here the value of student.
6. Line 8 divides the total, 255, by the array's length, 3, inside the template literal and prints the result. JavaScript has a single number type, so 255 / 3 is simply 85 with no separate integer division to think about.

Try it in the JavaScript playground →

Run JavaScript on your own computer

JavaScript is the one language you already have: every browser ships with it, and the developer tools in any browser include a console where you can type a line and see the result. To run files from a terminal and build anything larger, you install Node.js.

1. 1

   Install Node.js

   Download the current LTS (long-term support) release from nodejs.org and run the installer; it puts both node and the npm package manager on your PATH. On macOS and Linux you can also use your package manager or a version manager, but the installer is the simplest start.

2. 2

   Check it works

   Open a terminal (Command Prompt or PowerShell on Windows, Terminal on macOS/Linux) and print the version. Any currently supported LTS line is fine for everything in this guide.

   Shell

   node --version

3. 3

   Save a file and run it

   Put the program above in a file called hello.js and run it from the folder it is in. The two lines of output appear in the terminal.

   Shell

   node hello.js

4. 4

   Try it in the browser too

   Open any web page, press F12 (or right-click and choose Inspect) and pick the Console tab. Paste the same lines there and press Enter; console.log writes to that console instead of the terminal.

5. 5

   Use an editor with JavaScript support

   Any text editor works. One that understands JavaScript will underline mistakes as you type and can run the current file with a click, which saves a lot of switching back and forth.

A learning order for JavaScript

Stages, not a timetable. Each one exists because the next would not make sense without it, and how long each takes depends on how much you write.

1. Stage 1. Values, variables and output

   • console.log()
   • let and const
   • numbers, strings and booleans
   • template literals
   • arithmetic and operators

   Every program stores values and shows results. Being comfortable with const, let and the console is enough to start experimenting on the first day.

2. Stage 2. Decisions and loops

   • if / else if / else
   • === and comparison
   • truthy and falsy values
   • for, while and for...of
   • break and continue

   Choosing and repeating are what turn a calculator into a program. JavaScript's loose comparison rules also live here, so this is the stage to adopt === and never look back.

3. Stage 3. Functions, arrays and objects

   • function declarations and arrow functions
   • parameters, return values and scope
   • array methods: map, filter and reduce
   • objects and properties
   • JSON

   Real data comes in lists and records. Arrays and objects are how JavaScript holds it, and the array methods are how idiomatic code processes it without writing every loop by hand.

4. Stage 4. The browser and the DOM

   • selecting elements
   • changing text, styles and classes
   • events and event listeners
   • forms and input
   • the browser developer tools

   This is where JavaScript becomes visible. Making a page react to a click is the moment most learners feel they are building something real.

5. Stage 5. Asynchronous code

   • callbacks and the event loop
   • Promises
   • async / await
   • fetch and APIs
   • timers and error handling

   Fetching data from a server takes time, and JavaScript does not wait for it. Understanding why a log line appears before the result is the biggest conceptual hurdle in the language, and it deserves a stage of its own.

6. Stage 6. Modules, tooling and a first project

   • ES modules: import and export
   • npm and package.json
   • Node.js basics
   • classes
   • writing tests
   • a project of your own

   Once you can split code across files and pull in a library, you can build a complete application. From here the road forks towards front-end frameworks, Node servers, or TypeScript for a stricter safety net.

Mistakes beginners make in JavaScript

Comparing with == instead of ===

Two equals signs convert the values before comparing, so "5" == 5 is true and so is 0 == "". Three equals signs compare without conversion, which is almost always what you meant. Use === and !== everywhere and the surprises disappear.

Calling a method on something that is undefined

TypeError: Cannot read properties of undefined (reading 'length') means the thing before the dot did not exist — usually a misspelt property name, an array index past the end, or a function that returned nothing. Log the value before the dot and the cause is normally obvious.

Expecting asynchronous code to finish in order

Printing the result of fetch() shows Promise { <pending> } rather than data, because the request has not completed when the next line runs. The result only exists inside .then() or after await inside an async function, and any code that needs it has to live there too.

Reassigning a const

TypeError: Assignment to constant variable. appears the moment a const name is pointed at a new value. Note that const prevents reassignment, not modification: you can still push onto a const array or change a property of a const object.

Trusting decimal arithmetic to be exact

0.1 + 0.2 evaluates to 0.30000000000000004 because numbers are stored as binary floating point, as they are in most languages. Compare with a small tolerance, round for display with toFixed(), or work in whole units such as pence rather than pounds.

Strengths and trade-offs

Who JavaScript is for

JavaScript is the right first language for anyone who wants to build things people can open in a browser, and a sensible next language for almost every programmer, because sooner or later most software grows a web front end. It rewards learners who like to see results immediately. If your interest is data analysis, scientific computing or machine learning, Python will serve you better; if you want systems programming, game engines or embedded devices, look at C++ or Rust. And if a language that silently turns "5" into 5 bothers you, learn the basics here and move to TypeScript early.

Questions about learning JavaScript

Is JavaScript related to Java?

No, beyond the name, which was a marketing choice in the 1990s. They have different syntax, different type systems and different uses. Knowing one does not make the other easier in any special way; if anything, assuming they are similar causes confusion.

Do I need Node.js to learn JavaScript?

Not to start. Every browser has a JavaScript console and can run a script tag in an HTML file. You want Node.js as soon as you want to run a file from the terminal, use npm packages or write code that runs on a server — which, for most learners, is within the first few projects.

Should I learn JavaScript or TypeScript first?

JavaScript, at least through functions, arrays, objects and asynchronous code. TypeScript is JavaScript with a type layer on top; every TypeScript error is about a JavaScript value, so the type layer only makes sense once you know what the values are. Many learners switch after their first small project and find the move easy.

Do I need a framework like React to build a web page?

No. Plain JavaScript and the DOM are enough for a great deal, and the frameworks assume you already know that layer. Learn the language and the browser first; a framework is then much quicker to pick up, because you can see what it is doing for you.

The primary source

When this guide and the official documentation disagree, the documentation is right and we would like to hear about it.

• MDN JavaScript Guide ↗
• MDN JavaScript Reference ↗
• Download Node.js ↗