How to Learn JavaScript in 2026

Set up your environment

You don't need a complex setup. Two things are enough: a browser with DevTools and VS Code.

Open Chrome or Firefox. Press F12 to open DevTools. The Console tab is where you'll run your first JavaScript. No installation needed.

For writing code, download VS Code. It's free, has excellent JavaScript support, and works on all platforms. Skip build tools, bundlers, and frameworks for now.

// In your browser console:
console.log("Hello, World!");

// Or in a .js file linked to HTML:
// <script src="app.js"></script>

Variables & types

JavaScript has three ways to declare variables: var, let, and const. Use const by default, let when you need to reassign, and avoid var.

const name = "Alice";       // string — can't reassign
let age = 30;               // number — can reassign
const isMember = true;      // boolean
let email = null;           // null — intentional absence
let phone;                  // undefined — not yet assigned

→ Related: includes() reference

Control flow

Control flow is where your programs start making decisions and repeating work.

// if / else
const score = 85;
if (score >= 90) {
  console.log("A");
} else if (score >= 80) {
  console.log("B");
} else {
  console.log("C");
}

// for loop
for (let i = 0; i < 5; i++) {
  console.log(i);
}

// while loop
let count = 0;
while (count < 3) {
  console.log(count);
  count++;
}

→ Related: forEach() reference

Functions

Functions package logic into reusable blocks. JavaScript has three ways to write them — know all three, but prefer arrow functions for modern code.

// Function declaration
function greet(name) {
  return `Hello, ${name}!`;
}

// Function expression
const greet2 = function(name) {
  return `Hello, ${name}!`;
};

// Arrow function (modern, preferred)
const greet3 = (name) => `Hello, ${name}!`;

console.log(greet3("Alice"));  // "Hello, Alice!"

Arrays & objects

Arrays store ordered lists. Objects store named data. These two structures are 90% of real JavaScript.

// Array
const fruits = ["apple", "banana", "cherry"];
fruits.push("date");                    // add
fruits.map(f => f.toUpperCase());      // transform
fruits.filter(f => f.startsWith("b")); // filter
fruits.find(f => f === "cherry");      // find one

// Object
const user = { name: "Alice", age: 30 };
user.email = "alice@example.com";       // add property
Object.keys(user);                      // ["name", "age", "email"]

→ Related: map() · filter() · find()

DOM manipulation

This is where JavaScript connects to actual web pages. The DOM (Document Object Model) is your page's structure, and JavaScript can read and change it.

// Select elements
const button = document.querySelector("#myButton");
const output = document.querySelector("#output");

// Respond to clicks
button.addEventListener("click", () => {
  output.textContent = "Button clicked!";
});

// Change styles
output.style.color = "blue";

Async JavaScript

This is where most beginners hit a wall. JavaScript is single-threaded but handles slow operations (like fetching data) without freezing the page. Understanding this changes everything.

// Promises
fetch("/api/users")
  .then(response => response.json())
  .then(data => console.log(data));

// async / await (modern, cleaner)
async function loadUsers() {
  const response = await fetch("/api/users");
  const data = await response.json();
  console.log(data);
}

Build your first project

Pick one of these three projects. Don't skip this step — building is where learning sticks.