Bytebook Compiler

The Web

JavaScript Essentials

The language of the web: variables, types, functions, arrays and objects, loops, and making pages interactive with the DOM and events — with runnable examples.

4 min read5 runnable examplesInteractive4-question quiz

JavaScript (JS) is the programming language every web browser runs. It makes pages interactive — buttons, form validation, live updates — and with Node.js it also runs on servers. Despite the name, it is unrelated to Java.

Variables and types

JavaScript
let name = "Asha";        // can be reassigned
const year = 2026;        // cannot be reassigned
let cgpa = 9.1;
let enrolled = true;
let nothing = null;
let notSet;               // undefined

console.log(typeof name, typeof year, typeof enrolled, typeof notSet);
console.log(`${name} joined in ${year} with a CGPA of ${cgpa}`);   // template literal
Output
string number boolean undefined
Asha joined in 2026 with a CGPA of 9.1
Try it Yourself

Use const by default and let when the value changes. Avoid the old var.

JavaScript
console.log("5" == 5, "5" === 5);
console.log(0 == "", 0 === "");
console.log(0.1 + 0.2);                  // the same floating-point behaviour as C and Python
console.log("3" + 4, "3" * 4);           // + joins strings; * converts to numbers
Output
true false
true false
0.30000000000000004
34 12
Try it Yourself

Functions

JavaScript
function area(length, width = length) {        // default parameter
  return length * width;
}
const square = x => x * x;                       // arrow function
const greet = (name) => `Hello, ${name}!`;

console.log(area(4, 5), area(3), square(9), greet("Ravi"));
Output
20 9 81 Hello, Ravi!
Try it Yourself

Arrays and objects

JavaScript
const marks = [78, 92, 65, 88];
marks.push(71);
const total = marks.reduce((sum, m) => sum + m, 0);
const passed = marks.filter(m => m >= 70);
const curved = marks.map(m => Math.min(100, m + 5));
console.log(marks.length, total, passed, curved);
console.log([...marks].sort((a, b) => a - b));   // numeric sort needs a compare function

const student = { name: "Meera", roll: 12, skills: ["C", "JS"] };
student.city = "Hyderabad";
console.log(student.name, student["roll"], student.skills.join(", "));
console.log(JSON.stringify(student));
for (const [key, value] of Object.entries(student)) console.log(`  ${key}: ${value}`);
Output
5 394 [ 78, 92, 88, 71 ] [ 83, 97, 70, 93, 76 ]
[ 65, 71, 78, 88, 92 ]
Meera 12 C, JS
{"name":"Meera","roll":12,"skills":["C","JS"],"city":"Hyderabad"}
  name: Meera
  roll: 12
  skills: C,JS
  city: Hyderabad
Try it Yourself

Control flow

JavaScript
for (let i = 1; i <= 15; i++) {
  if (i % 15 === 0) console.log("FizzBuzz");
  else if (i % 3 === 0) console.log("Fizz");
  else if (i % 5 === 0) console.log("Buzz");
  else console.log(i);
}
Output
1
2
Fizz
4
Buzz
Fizz
7
8
Fizz
Buzz
11
Fizz
13
14
FizzBuzz
Try it Yourself

if/else, for, while, switch, break and continue work just like in C.

The DOM: making pages interactive

In the browser, JavaScript sees the page as a tree of objects — the Document Object Model (DOM). You can select elements, change them and react to events:

HTML
<button id="like">♥ Like</button>
<p id="count">0 likes</p>

<script>
  const button = document.querySelector("#like");
  const count = document.querySelector("#count");
  let likes = 0;
  button.addEventListener("click", () => {
    likes++;
    count.textContent = `${likes} like${likes === 1 ? "" : "s"}`;
  });
</script>

Try it — click the button, then change the code:

DOM task Code
Select one element document.querySelector(".card")
Select many document.querySelectorAll("li")
Change text el.textContent = "Hi"
Change a style el.style.color = "red" or el.classList.add("active")
React to events el.addEventListener("click", handler)
Create elements document.createElement("li") + parent.append(li)

Fetching data

Web apps load data from APIs without reloading the page:

JavaScript
const response = await fetch("https://api.github.com/users/octocat");
const user = await response.json();
console.log(user.name, user.public_repos);

await waits for the network without freezing the page — JavaScript is asynchronous.

Where to go next

JavaScript is the gateway to full-stack development: React for user interfaces, Node.js and Express for servers, and TypeScript for typed JavaScript in large projects.

Test yourself

4 questions · pick an answer to check it instantly

  1. 1

    Which keyword declares a variable that cannot be reassigned?

  2. 2

    What does "5" === 5 evaluate to?

  3. 3

    What does [1, 2, 3].map(x => x * 2) return?

  4. 4

    Which method runs a function when a button is clicked?

Esc
↑↓ move↵ open