⬅ Menu

JavaScript Notes 2026

Complete Beginner to Pro Guide

1. Hello World & Console

JavaScript is the programming language of the web — adds interactivity to HTML pages.

// In browser console or <script> tag
console.log("Hello, World!");

// Alert (popup)
alert("Welcome Md!");

2. Variables (let, const, var)

Store data — const cannot be reassigned, let can, var is old style.

let age = 22;
const name = "Md";
var oldWay = "avoid this";

age = 23;      // OK
// name = "Ali"; // Error

3. Data Types

Primitive: string, number, boolean, null, undefined, bigint, symbol
Non-primitive: object (array, function, etc.)

let str = "Biratnagar";
let num = 25;
let bool = true;
let nothing = null;
let notDefined;
let arr = [1, 2, 3];
let obj = { city: "Biratnagar", country: "Nepal" };

4. Operators & Template Literals

Math, comparison, logical + modern string interpolation with backticks.

let a = 10, b = 3;
console.log(a + b);     // 13
console.log(a > b);     // true

let city = "Biratnagar";
console.log(`Hello from ${city} in 2026!`);

5. Conditionals (if / else, ternary, switch)

Make decisions in code.

let score = 85;

if (score >= 90) {
    console.log("A+");
} else if (score >= 60) {
    console.log("Pass");
} else {
    console.log("Try again");
}

// Ternary
let result = score >= 40 ? "Pass" : "Fail";

// Switch
let day = 3;
switch (day) {
    case 1: console.log("Sunday"); break;
    default: console.log("Weekday");
}

6. Loops (for, while, for...of, for...in)

Repeat actions — modern loops are cleaner.

for (let i = 1; i <= 5; i++) {
    console.log(i);
}

const fruits = ["apple", "mango", "banana"];
for (let fruit of fruits) {
    console.log(fruit);
}

const person = { name: "Md", city: "Biratnagar" };
for (let key in person) {
    console.log(key, person[key]);
}

7. Functions (Traditional & Arrow)

Reusable blocks of code — arrow functions are shorter & great for callbacks.

function greet(name) {
    return `Hello ${name}!`;
}

const add = (a, b) => a + b;

console.log(greet("Md"));     // Hello Md!
console.log(add(5, 7));        // 12

8. Arrays & Array Methods

Powerful methods: map, filter, reduce, find, forEach, etc.

const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map(n => n * 2);          // [2,4,6,8,10]
const evens = numbers.filter(n => n % 2 === 0);   // [2,4]
const sum = numbers.reduce((acc, n) => acc + n, 0); // 15

numbers.forEach(n => console.log(n));

9. Objects & Destructuring

Key-value pairs — modern syntax makes them easier to work with.

const user = {
    name: "Md",
    age: 22,
    city: "Biratnagar"
};

const { name, city } = user;
console.log(name, city);   // Md Biratnagar

// Spread operator
const updated = { ...user, age: 23 };

10. DOM Manipulation

JavaScript changes HTML/CSS dynamically.

// Select elements
const title = document.querySelector("h1");
title.textContent = "Updated Title";
title.style.color = "#8b5cf6";

// Create element
const btn = document.createElement("button");
btn.textContent = "Click me";
document.body.appendChild(btn);

11. Events

Respond to user actions (click, input, submit, etc.).

button.addEventListener("click", () => {
    alert("Button clicked!");
});

input.addEventListener("input", (e) => {
    console.log(e.target.value);
});

12. Promises, async/await

Handle asynchronous code (fetch data, timers, etc.) cleanly.

// Promise
const promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("Done!"), 1500);
});

// async/await
async function fetchData() {
    try {
        const res = await fetch("https://jsonplaceholder.typicode.com/posts/1");
        const data = await res.json();
        console.log(data);
    } catch (err) {
        console.error(err);
    }
}