JavaScript Reference Guide With Examples

1. const, let, var — what's the difference

All three keywords create a variable, but they behave differently.

var — the outdated option

var is the oldest way. It has "leaky" function scope, which means a variable can accidentally "leak" outside a { } block. It's not recommended today.

let — a variable that can be reassigned

let count = 0;
count = count + 1; // the value can be changed
console.log(count); // 1

let lives strictly inside the { } block it was declared in — that's called block scope.

const — a variable that can't be reassigned

const name = "John";
name = "Peter"; // ❌ Error: Assignment to constant variable

const user = { name: "John" };
user.name = "Peter"; // ✅ this is fine

Default rule: use const everywhere a variable won't be reassigned. If the value will change, use let. var is barely used anymore.

2. How to select an element on the page

To change something in HTML through JavaScript, you first need to "find" that element.

querySelector — finds the first matching element

const btn = document.querySelector(".my-button");
const title = document.querySelector("#main-title");

Works like a CSS selector: .class — by class, #id — by id, tag — by tag name.

querySelectorAll — finds all matching elements

const items = document.querySelectorAll(".list-item");
items.forEach(function (item) {
    console.log(item.textContent);
});

getElementById — a quick lookup by id

const box = document.getElementById("box");

querySelector is more universal and enough for 99% of cases — we recommend starting with it.

3. onclick, onchange, addEventListener

Events are reactions to user actions: a click, typing text, submitting a form.

onclick — the click event

const btn = document.querySelector(".btn");
btn.onclick = function () {
    console.log("Button clicked!");
};

onchange — the value-change event

Fires when a user changes the value of an input, select, or checkbox and moves focus away from the element.

const select = document.querySelector("select");
select.onchange = function () {
    console.log("Selected:", select.value);
};

addEventListener — a more flexible approach

btn.addEventListener("click", function () {
    console.log("Click via addEventListener");
});

4. Template literals

They let you embed variables directly into a string, using backticks ` instead of regular quotes.

const name = "Maria";
const age = 20;

// the old way
console.log("Hi, " + name + "! You're " + age + " years old.");

// template literal
console.log(`Hi, ${name}! You're ${age} years old.`);

Inside ${ } you can write any expression, not just a variable: `Next year: ${age + 1}`.

5. Arrow functions vs regular functions

// regular function
function sum(a, b) {
    return a + b;
}

// arrow function
const sum2 = (a, b) => a + b;

Arrow functions are shorter — if the body is a single expression, you can drop the return and curly braces.

The key difference is that arrow functions don't have their own this — they take it from the surrounding code. Not critical when you're starting out, but good to know that this difference exists.

6. Looping over arrays: forEach, map, filter

forEach — just "walk through" an array

const fruits = ["apple", "banana", "pear"];
fruits.forEach(function (fruit) {
    console.log(fruit);
});

map — create a new array based on an old one

const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6]

filter — keep only the elements you need

const numbers = [1, 2, 3, 4, 5];
const even = numbers.filter(n => n % 2 === 0);
console.log(even); // [2, 4]

A simple rule: forEach — when you just need to do something with every element; map — when you need a new, transformed array; filter — when you need to pick out some of the elements.

7. Working with objects

const user = {
    name: "Anna",
    age: 22,
    isStudent: true
};

console.log(user.name);       // dot notation
console.log(user["age"]);     // bracket notation

user.city = "Boston";         // add a new property
delete user.isStudent;        // remove a property

Bracket notation is handy when the property name is stored in a variable: user[key].

8. JSON: stringify and parse

JSON is a data exchange format. In JavaScript, an object and a JSON string aren't the same thing — you need to convert between them.

const user = { name: "Oliver", age: 30 };

// object → JSON string
const json = JSON.stringify(user);
console.log(json); // '{"name":"Oliver","age":30}'

// JSON string → object
const parsed = JSON.parse(json);
console.log(parsed.name); // "Oliver"

JSON.stringify is most often needed to send data to a server or save it in localStorage, and JSON.parse converts it back.

What's next