Frontend track

JavaScript Tutorial

The language of the web. Variables to closures, the DOM, async code, and modern patterns.

Beginner
0/49 complete
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

Prerequisites

You will get the most from this track if you already know:

Learning path

The recommended sequence, from beginner to advanced. Each stage builds on the one before.

  1. 1Getting Started · 6 topics · Beginner
    Introduction to JavaScript · JavaScript Setup · Variables: var, let, const · Data Types · Operators · Type Conversion
  2. 2Control Flow · 2 topics · Beginner
    Conditional Statements · Loops
  3. 3Functions · 2 topics · Beginner
    Functions · Arrow Functions
  4. 4Data Structures · 7 topics · Beginner
    Arrays · Array Methods · Objects · Object Methods · Strings · Numbers and Math · Dates
  5. 5How JavaScript Works · 5 topics · Beginner
    Scope · Hoisting · Closures · this Keyword · Call, Apply, and Bind
  6. 6Modern Syntax · 3 topics · Intermediate
    Destructuring · Spread and Rest Operators · Template Literals
  7. 7The DOM · 5 topics · Intermediate
    DOM Manipulation · Events · Event Bubbling · Event Delegation · Form Validation
  8. 8Async JavaScript · 5 topics · Intermediate
    Error Handling · Promises · Async and Await · Fetch API · JSON
  9. 9Browser Storage · 2 topics · Intermediate
    Local Storage · Session Storage
  10. 10Advanced · 10 topics · Intermediate → Advanced
    ES Modules · Classes · Prototypes · Map and Set · WeakMap and WeakSet · Iterators and Generators · Debouncing and Throttling · Memory Management Basics · JavaScript Performance · Security Best Practices
  11. 11Practice · 2 topics · Advanced
    Practical Projects · Interview Questions

Complete topic list

49 topics
1

Getting Started

6 topics
  1. Introduction to JavaScriptBeginner5m
  2. JavaScript SetupBeginner5m
  3. Variables: var, let, constBeginner5m
  4. Data TypesBeginner5m
  5. OperatorsBeginner5m
  6. Type ConversionBeginner5m
2

Control Flow

2 topics
  1. Conditional StatementsBeginner5m
  2. LoopsBeginner5m
3

Functions

2 topics
  1. FunctionsBeginner5m
  2. Arrow FunctionsBeginner5m
4

Data Structures

7 topics
  1. ArraysBeginner5m
  2. Array MethodsBeginner5m
  3. ObjectsBeginner5m
  4. Object MethodsBeginner5m
  5. StringsBeginner5m
  6. Numbers and MathBeginner5m
  7. DatesBeginner5m
5

How JavaScript Works

5 topics
  1. ScopeBeginner5m
  2. HoistingBeginner5m
  3. ClosuresBeginner5m
  4. this KeywordBeginner5m
  5. Call, Apply, and BindBeginner5m
6

Modern Syntax

3 topics
  1. DestructuringIntermediate5m
  2. Spread and Rest OperatorsIntermediate5m
  3. Template LiteralsIntermediate5m
7

The DOM

5 topics
  1. DOM ManipulationIntermediate5m
  2. EventsIntermediate5m
  3. Event BubblingIntermediate5m
  4. Event DelegationIntermediate5m
  5. Form ValidationIntermediate5m
8

Async JavaScript

5 topics
  1. Error HandlingIntermediate5m
  2. PromisesIntermediate5m
  3. Async and AwaitIntermediate5m
  4. Fetch APIIntermediate5m
  5. JSONIntermediate5m
9

Browser Storage

2 topics
  1. Local StorageIntermediate5m
  2. Session StorageIntermediate5m
10

Advanced

10 topics
  1. ES ModulesIntermediate5m
  2. ClassesIntermediate5m
  3. PrototypesAdvanced5m
  4. Map and SetAdvanced5m
  5. WeakMap and WeakSetAdvanced5m
  6. Iterators and GeneratorsAdvanced5m
  7. Debouncing and ThrottlingAdvanced5m
  8. Memory Management BasicsAdvanced5m
  9. JavaScript PerformanceAdvanced5m
  10. Security Best PracticesAdvanced5m
11

Practice

2 topics
  1. Practical ProjectsAdvanced5m
  2. Interview QuestionsAdvanced15m

Visual guides

4 diagrams

Code example

A taste of the track, from Introduction to JavaScript.

JavaScriptYour first program Runnable
console.log('Hello, Techie Babaji!');


const name = 'Asha';
console.log('Welcome, ' + name);


console.log(2 + 3);
Expected output
Hello, Techie Babaji!
Welcome, Asha
5
Opens this example in the full playground

Practice exercises

Show all 48 exercises
Conditional Statements

Write getDiscount(total): 20% for 5000+, 10% for 2000+, otherwise 0. Print results for 6000, 2500 and 500.

Loops

Print the 7 times table from 7 × 1 to 7 × 10 in the format "7 x 3 = 21".

Functions

Write celsiusToF(c) that returns c × 9/5 + 32. Print the result for 0, 37 and 100.

Arrow Functions

Rewrite function isEven(n) { return n % 2 === 0; } as an arrow function and use it with filter on [1, 2, 3, 4, 5, 6].

Arrays

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.

Array Methods

Calculate the average of the numbers [10, 20, 30, 40].

Objects

Create a product object with name, price and inStock. Increase the price by 10%, then print all keys and the new price.

Object Methods

Given scores = { asha: 82, ravi: 67, meera: 91 }, print each name with "pass" (≥ 70) or "retry".

Strings

Turn the title " Learn JavaScript Fast " into a URL slug: "learn-javascript-fast".

Numbers and Math

Calculate 18% GST on ₹499 and print the total formatted as Indian rupees.

Dates

Calculate how many days remain from 1 March 2026 until 15 August 2026.

Scope

Predict the output, then run it: let a = 1; function f() { let a = 2; return a; } console.log(f(), a);

Hoisting

Predict the output: console.log(a); var a = 5; console.log(a);

Closures

Write makeMultiplier(factor) that returns a function multiplying its argument by factor. Create double and triple.

this Keyword

Fix this bug so it prints "Counter: 1": const c = { n: 0, inc() { this.n++; console.log('Counter:', this.n); } }; setTimeout(c.inc, 0);

Call, Apply, and Bind

Use bind to create sayHiRavi from introduce so that sayHiRavi('!') prints "Hi, I am Ravi!".

Destructuring

From const product = { title: 'Desk', price: 12000 }, destructure title and price, with a default stock of 0, and print all three.

Spread and Rest Operators

Merge [1, 2] and [3, 4] into a new array, and write avg(...nums) that returns the average of any numbers.

Template Literals

Build the message "Order #102 for Ravi: 2 × Mouse = ₹1400" from variables orderId, customer, qty, product and price (700).

DOM Manipulation

Add a “Clear list” button that removes every item and resets the heading to “Shopping list (0)”.

Events

Make a character counter: show “12 / 100” under a textarea as the user types.

Event Bubbling

Add stopPropagation to the inner listener and predict what is logged when clicking the button.

Event Delegation

Extend the example: add a “done” button that toggles a line-through style on its item, using the same single listener.

Form Validation

Add a rule that the email must end with "@example.com", with the message “Use your company email”.

Error Handling

Write safeDivide(a, b) that throws a RangeError when b is 0, and call it inside try…catch.

Promises

Use Promise.all to load users 1, 2 and 3 in parallel with fetchUser and log all their names.

Async and Await

Rewrite this with async/await: fetchUser(1).then(u => console.log(u.name)).catch(e => console.log(e.message));

Fetch API

Fetch https://jsonplaceholder.typicode.com/todos?_limit=3 and log each todo’s title.

JSON

Store { theme: "dark", fontSize: 16 } as a JSON string, parse it back, and print fontSize + 2.

Local Storage

Count how many times the visitor has opened the page and show “Visit #3” on the third visit.

Session Storage

Store the current wizard step (1–3) in sessionStorage and restore it on reload.

ES Modules

Create greet.js exporting a named function hello(name), and import it in app.js to log hello("Asha").

Classes

Create a BankAccount class with a private #balance, deposit(amount), withdraw(amount) that refuses overdrafts, and a balance getter.

Prototypes

Create vehicle = { wheels: 4 } and car = Object.create(vehicle) with brand "Tata". Log car.wheels and whether wheels is car’s own property.

Map and Set

Count how many times each letter appears in "banana" using a Map, and print the counts.

WeakMap and WeakSet

Use a WeakSet to make a function process(obj) that only processes each object once.

Iterators and Generators

Write a generator evens() that yields 0, 2, 4, … forever, and log the first five values.

Debouncing and Throttling

Use debounce to log "Saved!" only once, 500 ms after the last of several rapid calls to save().

Memory Management Basics

Write startClock() that logs the time every second and returns a stop() function that clears the interval.

JavaScript Performance

Render 1,000 <li> elements efficiently into a <ul> using a DocumentFragment.

Security Best Practices

Write a function escapeHtml(str) that replaces & < > " ' with HTML entities.

Practical Projects

Extend the tip calculator with a “Round up per person” checkbox that rounds each share up to the next ₹10.

Common interview questions

Frequently asked questions

Is JavaScript the same as Java?
No. They share part of a name for historical marketing reasons but are different languages with different designs and uses.
Should I learn JavaScript before React?
Yes. React is JavaScript. Functions, arrays, objects, destructuring, modules and promises are used on almost every line of React code.
Can I run the examples here?
Yes. Examples labelled “Runnable” execute inside an isolated sandbox iframe in your browser. Nothing runs on our servers.