JavaScript Tutorial
The language of the web. Variables to closures, the DOM, async code, and modern patterns.
- Topics
- 49
- Full lessons
- 49
- Est. hours
- ~9
- Interview Qs
- 33
Overview
JavaScript is the programming language that runs in every browser and, through Node.js, on servers too. It makes pages interactive, talks to APIs and powers frameworks like React and Angular.
This is the largest track on Techie Babaji. Lessons marked “Runnable” execute in a sandbox so you can edit the code and see the output instantly.
What you will learn
- Master variables, types, functions, arrays and objects
- Understand scope, hoisting, closures and this
- Manipulate the DOM and handle events efficiently
- Write asynchronous code with promises and async/await
Learning path
The recommended sequence, from beginner to advanced. Each stage builds on the one before.
- 1Getting Started · 6 topics · BeginnerIntroduction to JavaScript · JavaScript Setup · Variables: var, let, const · Data Types · Operators · Type Conversion
- 2Control Flow · 2 topics · BeginnerConditional Statements · Loops
- 3Functions · 2 topics · BeginnerFunctions · Arrow Functions
- 4Data Structures · 7 topics · BeginnerArrays · Array Methods · Objects · Object Methods · Strings · Numbers and Math · Dates
- 5How JavaScript Works · 5 topics · BeginnerScope · Hoisting · Closures · this Keyword · Call, Apply, and Bind
- 6Modern Syntax · 3 topics · IntermediateDestructuring · Spread and Rest Operators · Template Literals
- 7The DOM · 5 topics · IntermediateDOM Manipulation · Events · Event Bubbling · Event Delegation · Form Validation
- 8Async JavaScript · 5 topics · IntermediateError Handling · Promises · Async and Await · Fetch API · JSON
- 9Browser Storage · 2 topics · IntermediateLocal Storage · Session Storage
- 10Advanced · 10 topics · Intermediate → AdvancedES Modules · Classes · Prototypes · Map and Set · WeakMap and WeakSet · Iterators and Generators · Debouncing and Throttling · Memory Management Basics · JavaScript Performance · Security Best Practices
- 11Practice · 2 topics · AdvancedPractical Projects · Interview Questions
Complete topic list
49 topicsGetting Started
6 topics- Introduction to JavaScriptBeginner5m
- JavaScript SetupBeginner5m
- Variables: var, let, constBeginner5m
- Data TypesBeginner5m
- OperatorsBeginner5m
- Type ConversionBeginner5m
Control Flow
2 topics- Conditional StatementsBeginner5m
- LoopsBeginner5m
Functions
2 topics- FunctionsBeginner5m
- Arrow FunctionsBeginner5m
Data Structures
7 topics- ArraysBeginner5m
- Array MethodsBeginner5m
- ObjectsBeginner5m
- Object MethodsBeginner5m
- StringsBeginner5m
- Numbers and MathBeginner5m
- DatesBeginner5m
How JavaScript Works
5 topics- ScopeBeginner5m
- HoistingBeginner5m
- ClosuresBeginner5m
- this KeywordBeginner5m
- Call, Apply, and BindBeginner5m
Modern Syntax
3 topics- DestructuringIntermediate5m
- Spread and Rest OperatorsIntermediate5m
- Template LiteralsIntermediate5m
The DOM
5 topics- DOM ManipulationIntermediate5m
- EventsIntermediate5m
- Event BubblingIntermediate5m
- Event DelegationIntermediate5m
- Form ValidationIntermediate5m
Async JavaScript
5 topics- Error HandlingIntermediate5m
- PromisesIntermediate5m
- Async and AwaitIntermediate5m
- Fetch APIIntermediate5m
- JSONIntermediate5m
Browser Storage
2 topics- Local StorageIntermediate5m
- Session StorageIntermediate5m
Advanced
10 topics- ES ModulesIntermediate5m
- ClassesIntermediate5m
- PrototypesAdvanced5m
- Map and SetAdvanced5m
- WeakMap and WeakSetAdvanced5m
- Iterators and GeneratorsAdvanced5m
- Debouncing and ThrottlingAdvanced5m
- Memory Management BasicsAdvanced5m
- JavaScript PerformanceAdvanced5m
- Security Best PracticesAdvanced5m
Practice
2 topics- Practical ProjectsAdvanced5m
- Interview QuestionsAdvanced15m
Visual guides
4 diagramsArray Methods
reduce() carries an accumulator from item to item until one value remains.
Event Delegation
One listener on the parent handles clicks from every child, because events bubble up.
Promises
A promise settles exactly once — fulfilled or rejected — and the matching handler runs.
Async and Await
await unwraps a fulfilled promise; a rejected promise makes await throw into your catch block.
Code example
A taste of the track, from Introduction to JavaScript.
console.log('Hello, Techie Babaji!');
const name = 'Asha';
console.log('Welcome, ' + name);
console.log(2 + 3);
Hello, Techie Babaji! Welcome, Asha 5
Practice exercises
Print your name, your city and the result of 12 × 12 on three separate lines.
Create a page with a button that logs the current time to the console when clicked.
Declare a constant for a product price (499) and a variable for quantity (1). Increase the quantity to 3 and log the total cost.
Write a function describe(value) that returns "array", "null" or the typeof result for anything else.
Given const n = 17, print "even" or "odd" using the % and ternary operators.
Two inputs gave "250" and "3". Calculate and print the total cost (250 × 3) and the sum (253) correctly.
Show all 48 exercises
Write getDiscount(total): 20% for 5000+, 10% for 2000+, otherwise 0. Print results for 6000, 2500 and 500.
Print the 7 times table from 7 × 1 to 7 × 10 in the format "7 x 3 = 21".
Write celsiusToF(c) that returns c × 9/5 + 32. Print the result for 0, 37 and 100.
Rewrite function isEven(n) { return n % 2 === 0; } as an arrow function and use it with filter on [1, 2, 3, 4, 5, 6].
Start with [10, 20, 30]. Add 40 at the end and 5 at the start, then print the array, its length and whether it includes 25.
Calculate the average of the numbers [10, 20, 30, 40].
Create a product object with name, price and inStock. Increase the price by 10%, then print all keys and the new price.
Given scores = { asha: 82, ravi: 67, meera: 91 }, print each name with "pass" (≥ 70) or "retry".
Turn the title " Learn JavaScript Fast " into a URL slug: "learn-javascript-fast".
Calculate 18% GST on ₹499 and print the total formatted as Indian rupees.
Calculate how many days remain from 1 March 2026 until 15 August 2026.
Predict the output, then run it: let a = 1; function f() { let a = 2; return a; } console.log(f(), a);
Predict the output: console.log(a); var a = 5; console.log(a);
Write makeMultiplier(factor) that returns a function multiplying its argument by factor. Create double and triple.
Fix this bug so it prints "Counter: 1": const c = { n: 0, inc() { this.n++; console.log('Counter:', this.n); } }; setTimeout(c.inc, 0);
Use bind to create sayHiRavi from introduce so that sayHiRavi('!') prints "Hi, I am Ravi!".
From const product = { title: 'Desk', price: 12000 }, destructure title and price, with a default stock of 0, and print all three.
Merge [1, 2] and [3, 4] into a new array, and write avg(...nums) that returns the average of any numbers.
Build the message "Order #102 for Ravi: 2 × Mouse = ₹1400" from variables orderId, customer, qty, product and price (700).
Add a “Clear list” button that removes every item and resets the heading to “Shopping list (0)”.
Make a character counter: show “12 / 100” under a textarea as the user types.
Add stopPropagation to the inner listener and predict what is logged when clicking the button.
Extend the example: add a “done” button that toggles a line-through style on its item, using the same single listener.
Add a rule that the email must end with "@example.com", with the message “Use your company email”.
Write safeDivide(a, b) that throws a RangeError when b is 0, and call it inside try…catch.
Use Promise.all to load users 1, 2 and 3 in parallel with fetchUser and log all their names.
Rewrite this with async/await: fetchUser(1).then(u => console.log(u.name)).catch(e => console.log(e.message));
Fetch https://jsonplaceholder.typicode.com/todos?_limit=3 and log each todo’s title.
Store { theme: "dark", fontSize: 16 } as a JSON string, parse it back, and print fontSize + 2.
Count how many times the visitor has opened the page and show “Visit #3” on the third visit.
Store the current wizard step (1–3) in sessionStorage and restore it on reload.
Create greet.js exporting a named function hello(name), and import it in app.js to log hello("Asha").
Create a BankAccount class with a private #balance, deposit(amount), withdraw(amount) that refuses overdrafts, and a balance getter.
Create vehicle = { wheels: 4 } and car = Object.create(vehicle) with brand "Tata". Log car.wheels and whether wheels is car’s own property.
Count how many times each letter appears in "banana" using a Map, and print the counts.
Use a WeakSet to make a function process(obj) that only processes each object once.
Write a generator evens() that yields 0, 2, 4, … forever, and log the first five values.
Use debounce to log "Saved!" only once, 500 ms after the last of several rapid calls to save().
Write startClock() that logs the time every second and returns a stop() function that clears the interval.
Render 1,000 <li> elements efficiently into a <ul> using a DocumentFragment.
Write a function escapeHtml(str) that replaces & < > " ' with HTML entities.
Extend the tip calculator with a “Round up per person” checkbox that rounds each share up to the next ₹10.
Common interview questions
- What are the differences between var, let and const?
- What does typeof [] return and how do you check for an array?
- What is the difference between == and ===?
- What is hoisting?
- What are truthy and falsy values?
- What are the primitive data types in JavaScript?
- null vs undefined?
- Function declaration vs function expression?
- How do map, filter and reduce differ?
- How do you copy an object, and what is a shallow copy?
- What is a closure? Give a practical use.
- What is event delegation?
- Why does await inside forEach not wait?
- How does the this keyword work?
- Explain call, apply and bind.
- What is prototypal inheritance?
- Debouncing vs throttling?
- localStorage vs sessionStorage vs cookies?
- What is the temporal dead zone?
- What is the difference between event bubbling and capturing?
- Promise.all vs allSettled vs race vs any?
- How do you handle errors with async/await?
- Why does fetch not reject on a 404 or 500?
- What are ES modules and how are they different from scripts?
- How do JavaScript classes relate to prototypes?
- In what order do synchronous code, promise callbacks and setTimeout callbacks run?
- How do you prevent XSS in JavaScript applications?
- What causes memory leaks in JavaScript?
- What are generators and when would you use one?
- Map vs object, Set vs array — when do you use them?
- How do you find and fix slow JavaScript in the browser?
- What does "use strict" change?
- What is the difference between microtasks and macrotasks?