JavaScript Tutorial - The Complete Beginner’s Guide

JavaScript Tutorial - The Complete Beginner’s Guide
✍️ Sanskar Gupta📅 2025-10-27

🧠 JavaScript Tutorial — Complete Guide in English

This tutorial covers everything from JavaScript fundamentals to modern ES6+ features, asynchronous programming, and browser interaction (DOM, events, fetch).
With simple explanations and small examples, you can quickly learn and practice JavaScript step by step.

🧩 Prerequisites

  • Basic understanding of HTML and CSS is helpful.
  • Any text editor (like VS Code) and browser (Chrome/Edge).
  • Node.js (optional) — for local projects and tool usage.

⚙️ Setup

You can run JavaScript directly in the browser console or via a file.

  • Add this to your index.html:

<script src="app.js"></script>

  • Or simply type code inside Chrome DevTools → Console.

1. First Example

index.html

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>JS Demo</title></head>
<body>
<script src="app.js"></script>
</body>
</html>

app.js

console.log("Hello, JavaScript!");
alert("Hello from JS");

2. Variables: var, let, const

  • var — function-scoped, old syntax
  • let — block-scoped, can be reassigned
  • const — block-scoped, cannot be reassigned

let name = "Asha";
const pi = 3.14159;
var legacy = "old";

3. Data Types

  • Primitive: number, string, boolean, null, undefined, symbol, bigint
  • Objects: Object, Array, Function, Date, etc.

typeof 42 // "number"
typeof "hello" // "string"
Array.isArray([])// true

4. Operators & Type Casting

  • == vs ===: Strict comparison checks type too
  • Arithmetic: + - * / % **
  • Logical: && || !
  • Advanced: ?? (nullish coalescing), ?. (optional chaining)

0 == '0' // true
0 === '0' // false
let a = obj?.prop?.subprop;
let b = value ?? "default";

5. Control Flow: if, switch, loops

if (age >= 18) {
console.log("Adult");
} else {
console.log("Minor");
}

for (let i = 0; i < 5; i++) console.log(i);

const arr = [1,2,3];
for (const item of arr) console.log(item);

6. Functions

Function declarations, expressions, arrow functions, default params, rest/spread.

function add(a, b = 0) {
return a + b;
}

const mul = (a, b) => a * b;

function sumAll(...nums) {
return nums.reduce((s, n) => s + n, 0);
}

7. Scope & Closures

Closures allow functions to “remember” variables from their outer scope.

function counter() {
let count = 0;
return function() {
count++;
return count;
}
}
const c = counter();
c(); // 1
c(); // 2

8. Objects & Prototypes

const person = {
name: "Ravi",
greet() { console.log("Hi, " + this.name); }
};

Object.create(person); // prototypal inheritance

Classes (syntactic sugar):

class Animal {
constructor(name) { this.name = name; }
speak() { console.log(this.name + " makes a noise."); }
}

9. Arrays & Common Methods

  • push, pop, map, filter, reduce, find, some, every, forEach, splice, slice, concat, includes

const nums = [1,2,3,4];
const doubled = nums.map(n => n * 2);
const even = nums.filter(n => n % 2 === 0);
const sum = nums.reduce((s, n) => s + n, 0);

10. ES6+ Features (Quick Overview)

  • Template literals: `Hello ${name}`
  • Destructuring
  • Default params, rest/spread
  • Modules: import / export
  • Promises, async/await
  • Optional chaining & nullish coalescing

const [a, b] = [1, 2];
const {name, age = 30} = person;

11. DOM (Document Object Model)

  • Selecting: getElementById, querySelector, querySelectorAll
  • Modify content: textContent, innerHTML
  • Modify attributes: setAttribute, classList.add/remove/toggle

const btn = document.querySelector("#myBtn");
btn.addEventListener("click", () => {
document.querySelector("#out").textContent = "Clicked!";
});

12. Events & Handling

Common events: click, submit, input, change, keydown, load

form.addEventListener("submit", (e) => {
e.preventDefault();
// process form
});

13. Timers: setTimeout & setInterval

const id = setTimeout(() => console.log("Delayed"), 1000);
clearTimeout(id);

const interval = setInterval(() => console.log("Every second"), 1000);
clearInterval(interval);

14. HTTP Requests: Fetch API

// Promise style
fetch("/api/data")
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error(err));

// async/await style
async function getData() {
try {
const res = await fetch("/api/data");
if (!res.ok) throw new Error("Network error");
const data = await res.json();
console.log(data);
} catch (err) {
console.error(err);
}
}

15. Promises & Error Handling

const p = new Promise((resolve, reject) => {
setTimeout(() => resolve("done"), 1000);
});
p.then(console.log).catch(console.error);

16. Modules (ES Modules)

// utils.js
export function add(a,b){ return a+b; }
export default function mul(a,b){ return a*b; }

// app.js
import mul, { add } from './utils.js';

17. Tooling & Build Setup

  • Node.js / npm
  • Bundlers: Vite, Webpack, Rollup
  • Transpiler: Babel
  • Linter/Formatter: ESLint, Prettier
  • Testing: Jest, Mocha, Playwright (E2E)

18. Debugging Tips

  • Use console.log, console.table, and debugger
  • Chrome DevTools: Sources, Breakpoints, Network
  • Enable source maps for bundled code

19. Best Practices

  • Keep functions small and single-purpose
  • Prefer immutability where possible
  • Always handle Promises properly (with .catch)
  • Avoid unnecessary global variables
  • Consider TypeScript for type safety

20. Mini Project — ToDo App (Summary)

  1. HTML: input, button, ul
  2. JS: manage items array, addItem(), render(), use localStorage
  3. Events: submit form, delete items

const form = document.querySelector("#form");
const list = document.querySelector("#list");
let todos = JSON.parse(localStorage.getItem("todos") || "[]");

function render() {
list.innerHTML = todos.map((t,i) => `<li data-i="${i}">${t.text} <button class="del">x</button></li>`).join("");
}

form.addEventListener("submit", e => {
e.preventDefault();
const txt = form.elements['todo'].value.trim();
if (!txt) return;
todos.push({text: txt, done: false});
localStorage.setItem("todos", JSON.stringify(todos));
render();
form.reset();
});

list.addEventListener("click", e => {
if (e.target.classList.contains("del")) {
const i = e.target.closest("li").dataset.i;
todos.splice(i, 1);
localStorage.setItem("todos", JSON.stringify(todos));
render();
}
});

render();

21. Where to Learn More