A structured JavaScript learning repository by Hammad Siddique. It documents hands-on practice, concept notes, and mini projects, built one topic at a time from solid foundations.

Study, practice, build. Then move on only when the current topic is truly understood.

Table of Contents

• About
• Learning Approach
• How Every Topic Is Structured
• Progress
• Folder Structure
• How to Run
• Linting with ESLint
• Connect

About

This repo tracks my JavaScript path topic by topic, following a roadmap instead of jumping randomly between tutorials. The goal is deep understanding: knowing not only what a piece of code prints, but why the language behaves that way.

129 JavaScript files

13 Topic folders

3 Data structures built from scratch Stack, Queue, Linked List

1 Linting setup ESLint

Learning Approach

I follow roadmap.sh/javascript to decide what to learn next and in what order. For each topic I combine several sources to get a complete picture.

Source	Purpose
roadmap.sh	Topic selection and learning order
MDN Web Docs	Official reference and deep technical detail
W3Schools	Quick examples and syntax lookup
javascript.info	Structured explanations with examples
Claude (AI)	Concept clarification, debugging, and practice tasks

Once a topic is understood, I write the code myself, predict the output before running it, and finish with a small task before moving on.

How Every Topic Is Structured

Concept file  ->  Predict the output  ->  Run and compare  ->  Task  ->  Mini project

• Concept file: explains how the feature works, with inline comments on the reasoning.
• Predict first: each result is written as a guess before the code is executed. A wrong guess is the best learning moment.
• Task: a hands-on exercise that uses the concept in a realistic situation.
• Mini project: a small program that combines the concept with earlier ones.

Comment markers used across the files:

Marker	Meaning
//!	Section or topic heading
//?	Explanation, rule, or reasoning

Progress

Topic	Status
Variables: let, const, var
Hoisting and the Temporal Dead Zone
Variable Scope: Global, Function, Block
Scope Chain and Variable Shadowing
Data Types and typeof
Type Casting: Conversion and Coercion
Equality: ==, ===, Object.is, reference vs value
Equality: practical guidelines and ESLint eqeqeq
Equality: combined practice and mini project
Objects: simple, constructor
Built-in Objects and Date
Indexed Collections: Arrays and built-in methods
Destructuring: object and array
Keyed Collections: Map, Set, WeakMap, WeakSet
Stack, Queue, Linked List
Structured Data: JSON, fetch with JSON
Control Flow: conditionals and loops
Functions and Closures
DOM Manipulation and Events
Promises and Async/Await
Error Handling
ES6 Modules
Classes and Prototypes

Folder Structure

Foundations

Variables/
├── Variables/              ->  let, const, var: declaration and typeof
└── Hoisting/               ->  var hoisting, TDZ with let/const

Variable Task/              ->  Hospital management system task

Variable Scope/
├── Global/                 ->  Global scope and mutation risks
├── Function Scope/         ->  Function-level privacy
├── Block/                  ->  Block scope with let/const vs var
└── Task/                   ->  School marks system task

Scope Chain/
├── Chaining/               ->  Inner to outer scope lookup
└── Variable Shadowing/     ->  Local variable overriding global

Type-Casting/
├── Type Casting/           ->  What casting is and why it matters
├── Conversion/             ->  Explicit: Number(), String(), Boolean()
├── Coercion/               ->  Implicit: +, -, ==, if() coercion rules
└── Task/                   ->  Smart calculator and coercion challenge

Data-Types/
├── Boolean/                ->  Truthy and falsy values
├── Number/                 ->  Number methods, NaN, Infinity
├── String/                 ->  String methods, template literals
├── Bigint/                 ->  BigInt for large numbers
├── Typeof/                 ->  typeof operator in depth
├── Math Random/            ->  Math.random() usage
└── Undefined And Null/     ->  null vs undefined

Equality Comparisons

Equality Comparisons/
├── looseequality.js            ->  == and its coercion rules
├── strictequality.js           ->  === and why it is predictable
├── object-is.js                ->  Object.is: NaN and +0 / -0
├── referencevsvalue.js         ->  Why [1] == [1] is false
├── difftypeofcomparison.js     ->  Comparing mixed types
└── practicleguidelines.js      ->  == null exception, === rule, form validation, ESLint eqeqeq

Objects and Collections

Objects/
├── Simple Object/          ->  Creation, access, mutation
├── Constructor Object/     ->  Constructor functions with new
└── Object Task/            ->  Mega task combining object concepts

Objects-part-two/
├── Arrays Built in/        ->  map, filter, reduce and friends
├── Built In Object/        ->  Math, Number, String built-ins
├── Date Object/            ->  Date creation and formatting
└── Json/                   ->  JSON.stringify, JSON.parse

Indexed Collection/
├── basicarray.js                       ->  Array fundamentals
├── arraycreationutilities.js           ->  Array.from, Array.of, fill
├── arrayaddremovemethod.js             ->  push, pop, shift, unshift, splice
├── arraysearching&checkingmethod.js    ->  find, includes, some, every
├── arraytransforming(HOF).js           ->  Higher-order functions
├── arraycombined&checking.js           ->  Combining and checking arrays
├── multidimensionalarrays.js           ->  2D arrays
├── spreadarrays.js                     ->  Spread and rest with arrays
├── arraydestructuring.js               ->  Destructuring arrays
└── arrayperformancebehaviour.js        ->  How arrays behave internally

Data Structures

Data-Structure/
├── Data Structure/         ->  Overview of JS data structures
├── Array/                  ->  Arrays as a data structure
├── Object/                 ->  Objects as a data structure
├── Destructuring/          ->  Object and array destructuring, rename, defaults
├── Map/                    ->  Map vs Object, iteration, mini projects
├── Sets/                   ->  Set, unique values, set methods
├── Key Collection/         ->  Keyed collections, WeakMap, WeakSet
├── Stack/                  ->  LIFO: array, class, linked-list versions,
│                               undo/redo, parenthesis checker, palindrome
├── Queue/                  ->  FIFO: array, class, two stacks, call center,
│                               task scheduling, sliding window maximum
└── Linked List/            ->  Singly and doubly lists, core operations,
                                time complexity, mega task

Structured Data and Mega Tasks

Structure Data/
├── json.js                         ->  What JSON is
├── stringify.js                    ->  JSON.stringify
├── parse.js                        ->  JSON.parse
├── datatypesinjson.js              ->  Supported data types in JSON
├── nestedobjectarraysinjson.js     ->  Nested objects and arrays
├── error&edgecasesinjson.js        ->  Errors and edge cases
├── fetchapi&json.js                ->  fetch with JSON responses
└── jsonminiproject.js              ->  JSON mini project

JS- Mega-Task/                      ->  Combined task covering multiple concepts

How to Run

Make sure Node.js is installed.

# Run any file directly from the terminal
node Variables/Variables/variable.js

# Folder names with spaces need quotes
node "Data-Structure/Stack/stackreverse.js"

Linting with ESLint

The repo uses ESLint with the eqeqeq rule, so loose comparisons (==, !=) are flagged automatically. Files inside Equality Comparisons/ use == on purpose to demonstrate coercion, so ESLint reports errors there by design.

# One-time setup
npm install

# Lint a single file
npx eslint "Equality Comparisons/practicleguidelines.js"

Mode	Behaviour
["error", "always"]	== and != are never allowed, == null included
["error", "always", { null: "ignore" }]	Only == null and != null are allowed

On Windows PowerShell, if npm is blocked by the execution policy, run Set-ExecutionPolicy -Scope CurrentUser RemoteSigned once and reopen the terminal.

Connect

Built with consistency and a lot of console.log(). Abbottabad, Pakistan.