JavaScript

The language that runs the web.

JavaScript is the only language that runs natively in browsers. It handles everything interactive — clicks, animations, data fetching, form validation. With Node.js, it also runs on servers.

Used for

Web interactivity
Frontend frameworks
Backend (Node.js)
APIs
Automation

You'll learn

Variables & data types
Functions & scope
Arrays & objects
DOM manipulation
Events
Async/await
Fetch API

Fundamentals

Core concepts

Variables

Use const for values that never change, let for values that might. Avoid var — it has scope quirks that cause bugs. Variables hold data so you can reference and reuse it throughout your code.

variables.js

const name = "Sibah"
const pi = 3.14
let count = 0

count = count + 1   // 1
count += 1          // 2

// const can't be reassigned
// name = "other"  // Error

Data types

JavaScript has seven primitive types: string, number, boolean, null, undefined, symbol, and bigint. Then there are objects — including arrays, which are objects with numeric keys. typeof tells you what something is.

types.js

const str = "hello"        // string
const num = 42             // number
const bool = true          // boolean
const nothing = null       // null
let undef                  // undefined

const arr = [1, 2, 3]     // array (object)
const obj = { x: 1 }      // object

console.log(typeof str)    // "string"
console.log(typeof arr)    // "object"
console.log(Array.isArray(arr)) // true

Functions

Functions let you package logic and reuse it. Arrow functions are the modern syntax and are used throughout modern JavaScript codebases. Functions can accept parameters and return values.

functions.js

// Function declaration
function add(a, b) {
  return a + b
}

// Arrow function (preferred)
const multiply = (a, b) => a * b

// With multiple statements
const greet = (name) => {
  const msg = `Hello, ${name}`
  return msg
}

console.log(add(2, 3))       // 5
console.log(multiply(4, 5))  // 20
console.log(greet("Sibah"))  // "Hello, Sibah"

Arrays and objects

Arrays are ordered lists. Objects are key-value stores. Most real programs use both constantly. Arrays have built-in methods like map, filter, and forEach that let you transform data without manual loops.

arrays-objects.js

const skills = ["JS", "Lua", "Java"]

// Access
skills[0]          // "JS"
skills.length      // 3

// Methods
skills.push("CSS") // add to end
skills.map(s => s.toLowerCase()) // ["js", "lua", "java", "css"]
skills.filter(s => s.length > 2) // ["Lua", "Java", "CSS"]

// Object
const user = {
  name: "Sibah",
  age: 17,
  skills: ["JS", "Lua"]
}

user.name          // "Sibah"
user["age"]        // 17
user.location = "Indonesia"  // add property

Conditions and loops

if/else lets your code make decisions. for...of and forEach loop over arrays. for...in loops over object keys. Most of the time, forEach or map is cleaner than a traditional for loop.

conditions-loops.js

const score = 85

if (score >= 90) {
  console.log("A")
} else if (score >= 80) {
  console.log("B")
} else {
  console.log("C or below")
}

// for...of (arrays)
const langs = ["JS", "Lua", "Java"]
for (const lang of langs) {
  console.log(lang)
}

// forEach
langs.forEach((lang, index) => {
  console.log(`${index}: ${lang}`)
})

DOM manipulation

The DOM is the browser's live representation of your HTML. JavaScript can read, change, add, or remove any element. querySelector gives you one element; querySelectorAll gives you all matches.

dom.js

// Select elements
const title = document.querySelector("h1")
const buttons = document.querySelectorAll(".btn")

// Read and change content
console.log(title.textContent)
title.textContent = "New title"

// Change styles
title.style.color = "red"

// Add/remove classes
title.classList.add("highlight")
title.classList.remove("highlight")
title.classList.toggle("active")

// Create and insert elements
const newEl = document.createElement("p")
newEl.textContent = "A new paragraph"
document.body.appendChild(newEl)

Events

Events let your code respond to user actions. addEventListener attaches a handler to any element. The event object carries information about what happened — which key was pressed, where the mouse was, which element was clicked.

events.js

const btn = document.querySelector("#btn")

btn.addEventListener("click", (event) => {
  console.log("Clicked:", event.target)
})

// Form submit
const form = document.querySelector("form")
form.addEventListener("submit", (event) => {
  event.preventDefault()  // stop page reload
  const input = form.querySelector("input")
  console.log("Submitted:", input.value)
})

// Keyboard
document.addEventListener("keydown", (e) => {
  if (e.key === "Escape") {
    closeModal()
  }
})

Async / Await

Most real JavaScript involves waiting — for API responses, file reads, timers. async/await lets you write that code in a readable, top-to-bottom style. Always wrap it in try/catch to handle failures.

async.js

// Fetch data from an API
const getUser = async (id) => {
  try {
    const response = await fetch(`/api/users/${id}`)

    if (!response.ok) {
      throw new Error("Request failed")
    }

    const user = await response.json()
    return user
  } catch (error) {
    console.error("Error:", error)
    return null
  }
}

// Use it
const user = await getUser(1)
console.log(user.name)

Watch

JavaScript Crash Course for Beginners

Explore another language

All languages →