JavaScript Learning Path
Module 1: JavaScript Fundamentals
1.1 Introduction to JavaScript
What to Learn:
● What is JavaScript and its role in web development
- cross-platform,
- object-oriented
- scripting language used to make webpages interactive
- complex animations, clickable buttons, popup menus, etc
● JavaScript engines (V8, SpiderMonkey)
- V8 developed by Google for Chrome
- SpriderMonkey developed by Mozilla Foundation for Firefox
● Where JavaScript runs (browser vs [Link])
- [Link] is designed for server-side development
- Browsers are for client-side applications.
● Adding JavaScript to HTML (inline, internal, external)
● Script tag attributes (defer, async)
- Defer: This attribute makes sure that all the scripts are downloaded but it will not be
executed until the DOM is ready.
- Async: This attribute is preferred when the scripts included in the page are not
dependent on each other. It is also very useful for loading scripts in the middle of the
DOM that are already there.
● Console and debugging basics
● Strict mode ('use strict')
Resources:
● 📝 Blog: [Link]
● 🎥 Video: [Link] (JavaScript Tutorial -
Programming with Mosh)
● 📝 Blog: [Link]
🔥 Tricky Concepts:
● Question: What's the difference between <script>, <script defer>, and
<script async>?
<script> Adds JavaScript
code to a page
<script defer> Executes after execute in the Best for scripts that
HTML parsing is order they appear manipulate the
complete. in the document. DOM or depend on
other scripts.
<script async> executes as soon Execution order is Ideal for
as the script is not guaranteed independent
ready scripts like
analytics
● Question: What does 'use strict' do?
- Turns silent errors into thrown errors
- Improves engine optimisations for faster code
- Blocks future-reserved or unsafe syntax
1.2 Variables and Data Types
What to Learn:
● var, let, const declarations
- var: declares function-scoped or globally-scoped variables, optionally initialising
each to a value.
- let: declares re-assignable, block-scoped local variables, optionally initialising each
to a value.
- const: declares a block-scoped, read-only named constant.
● Primitive types (string, number, boolean, null, undefined, symbol, bigint)
● typeof operator
● Type coercion and conversion
Type coercion is the automatic or implicit conversion of values from one data type to
another (such as strings to numbers).
● Template literals
`string text`
`string text line 1
string text line 2`
`string text ${expression} string text`
tagFunction`string text ${expression} string text`
● Variable naming conventions
- only letters, digits, or the symbols $ and _
- first character must not be a digit.
- case sensitive
- camelCase commonly used
● Hoisting
- default behavior of moving all declarations to the top of the current scope
Resources:
● 📝 Blog:
[Link]
s
● 🎥 Video: [Link] (JavaScript Variables - Web
Dev Simplified)
● 📝 Blog: [Link]
🔥 Tricky Concepts:
● Question: What's the difference between var, let, and const?
var let const
Functional or global scope Block scope Block scope
Can be updated in the Can be updated in the Cannot be undated
same scope same scope
Can be redeclared in the Cannot be declared in the Cannot be redeclared
same scope same scope
Can be declared without Can be declared without cannot
initialisation initialisation
Can be accessed as Cannot be accessed cannot
undefined without initialisation, gives
Reference error
● Question: What's the difference between null and undefined?
Null Undefined
Represents an intentional absence of A variable that has been declared but
any value. not assigned a value.
● Question: Why does 0.1 + 0.2 !== 0.3 in JavaScript?
- due to floating point arithmetic
● Question: What is hoisting?
- default behavior of moving all declarations to the top of the current scope
1.3 Operators
What to Learn:
● Arithmetic operators (+, -, *, /, %, **)
● Assignment operators (=, +=, -=, etc.)
● Comparison operators (==, ===, !=, !==, >, <, >=, <=)
● Logical operators (&&, ||, !)
● Ternary operator (?:)
● Nullish coalescing (??)
- returns its right-hand side operand when its left-hand side operand is null or
undefined, and otherwise returns its left-hand side operand.
● Optional chaining (?.)
- If the object accessed or function called using this operator is undefined or null, the
expression short circuits and evaluates to undefined instead of throwing an error.
Precedence Name Sign
… … …
14 unary plus +
14 unary negation -
13 exponentiation **
12 multiplication *
12 division /
11 addition +
11 subtraction -
… … …
2 assignment =
… … …
● Operator precedence
Resources:
● 📝 Blog: [Link]
Operators
● 🎥 Video: [Link] (JavaScript Operators)
● 📝 Blog: [Link]
🔥 Tricky Concepts:
● Question: What's the difference between == and ===?
== Returns true if the operands are equal
does not check the type
=== Returns true if the operands are equal
and are of the same type
● Question: What's the difference between || and ?? operators?
|| returns true if both operands are true;
otherwise, returns false.
?? returns expr1 if it is neither null nor
undefined; otherwise, returns expr2.
● Question: What's optional chaining (?.) and when to use it?
instead of causing an error if a reference is nullish (null or undefined), the expression
short-circuits with a return value of undefined.
- that allows you to access properties or methods of nested objects or arrays without
checking each property for null or undefined values. It is particularly useful when you
are not sure if a property exists at every level of the hierarchy.
1.4 Control Flow
What to Learn:
● if/else statements
● else if chains
● switch statements
● Ternary operator for simple conditions
● Short-circuit evaluation
falsy && anything: falsy value.
truthy || anything: truthy value.
nonNullish ?? anything: non-nullish value.
● Guard clauses pattern
Resources:
● 📝 Blog:
[Link]
ror_handling
● 🎥 Video: [Link] (JavaScript Control Flow)
● 📝 Blog: [Link]
🔥 Tricky Concepts:
● Question: When should you use switch vs if/else?
Switch Statements: Use when dealing with a single expression that needs to be
evaluated against multiple possible values.
If/Else Statements: Use when you need to check conditions that return true or false,
allowing for flexible comparisons using logical or relational operators.
● Question: What is short-circuit evaluation?
falsy && anything - falsy value.
truthy || anything - truthy value.
nonNullish ?? anything - non-nullish value.
● Question: What are guard clauses?
a Guard Clause is a programming pattern that uses conditional statements at the
beginning of a function to check for specific conditions. When these conditions are
met, the function returns early, preventing the rest of the code from executing.
1.5 Loops and Iteration
What to Learn:
● for loop
● while and do...while loops
● for...in (objects)
● for...of (iterables)
● break and continue
● Loop performance considerations
● forEach, map, filter, reduce (array methods)
Resources:
● 📝 Blog:
[Link]
● 🎥 Video: [Link] (JavaScript Loops)
● 📝 Blog: [Link]
🔥 Tricky Concepts:
● Question: What's the difference between for...in and for...of?
Feature for...in for...of
Purpose Iterates over enumerable Iterates over iterable objects like
properties of an object arrays, strings, maps, etc.
Type of Returns the keys (property Returns the values of the
Values names) iterable
Use Case Best for iterating over object Best for iterating over array
properties elements or any iterable
Question: When should you use forEach vs for loop vs map?
forEach: Use when you need to iterate over an array and perform side effects (e.g.,
logging, updating external state, or manipulating the DOM). It's ideal for operations
that require side effects and do not return a new array.
forloop: Use when you need to iterate over an array and do not require side effects.
For loops are more efficient for iterating over millions of elements and can be chained
with other array methods like filter, reduce, and sort.
map: Use when you need to transform the array into a new array (e.g., formatting
data, extracting properties, or converting types). It's designed for pure, side-effect-
free operations and returns a new array with the transformed elements.
● Question: Why can't you break out of forEach?
The forEach method in JavaScript is designed to iterate through each element of an
array, executing a block of code for each element. It is not intended to be broken out
of, as it is a function call that takes a callback function as an argument. The callback
function is executed for each element in the array, and the forEach method itself is
not a loop but a function that returns the result of the loop. Therefore, it is not
possible to use a break statement within a forEach loop.
Module 2: Functions and Scope
2.1 Functions Basics
What to Learn:
● Function declarations vs expressions
● Function parameters and arguments
● Default parameters
● Rest parameters (...)
● Return statements
● Function naming conventions
● IIFE (Immediately Invoked Function Expression)
Resources:
● 📝 Blog: [Link]
● 🎥 Video: [Link] (JavaScript Functions)
● 📝 Blog: [Link]
🔥 Tricky Concepts:
● Question: What's the difference between function declaration and function
expression?
- function declaration: To create a function we can use a function declaration.
function name(parameter1, parameter2, ... parameterN) {
// body
}
- function expression: a function, created inside an expression or inside another
syntax construct. As the function creation happens in the context of the assignment
expression (to the right side of =), this is a Function Expression. Omitting a name is
allowed for Function Expressions.
let sayHi = function() {
alert( "Hello" );
};
● Question: What are rest parameters, and how do they differ from arguments?
The rest parameter syntax allows us to represent an indefinite number of arguments
as an array.
● Question: What is an IIFE and why use it?
functions that are executed immediately after they are defined
(function (){
// Function Logic Here.
})();
typically used to create a local scope for variables to prevent them from polluting the
global scope.
2.2 Arrow Functions
What to Learn:
● Arrow function syntax
● Implicit vs explicit return
- Explicit return: requires curly braces and 'return'
- Implicit return: You omit the return keyword — the value of the expression is
returned automatically. This works only when the function body is a single expression
without curly braces.
● Arrow functions and this binding
● When to use arrow functions vs regular functions
● Lexical this
Resources:
● 📝 Blog: [Link]
Functions/Arrow_functions
● 🎥 Video: [Link] (Arrow Functions
Explained)
● 📝 Blog: [Link]
🔥 Tricky Concepts:
● Question: What's the main difference between arrow functions and regular
functions?
- regular functions: A regular function is defined using the function keyword and can
have its own this, arguments, and prototype.
- arrow functions: Uses concise => syntax.
● Question: When should you NOT use arrow functions?
● Question: What's implicit return in arrow functions?
2.3 Scope and Closures
What to Learn:
● Global, function, and block scope
● Lexical scope
- lexical scope is the scope of a variable or function determined at compile time by its
physical location in the code.
● Scope chain
- When a variable is called, JavaScript resolves it by searching within the local scope
first, then progressively moving outward through parent scopes until it reaches the
global scope. This process is known as the scope chain.
● Closures and how they work
A closure is formed when a function is declared inside another function, allowing the
inner function to access variables from the outer function's scope.
● Practical closure use cases
● Module pattern
● Private variables with closures
Resources:
● 📝 Blog: [Link]
● 🎥 Video: [Link] (JavaScript Closures
Explained)
● 📝 Blog: [Link]
🔥 Tricky Concepts:
● Question: What is a closure?
a closure gives a function access to its outer scope
● Question: What's the common closure loop problem?
the behavior of closures inside loops
● Question: How do closures create private variables?
2.4 Higher-Order Functions
What to Learn:
● Functions as first-class citizens
● Passing functions as arguments
● Returning functions from functions
● Callback functions
● Function composition
● Currying and partial application
Resources:
● 📝 Blog: [Link]
● 🎥 Video: [Link] (Higher Order Functions)
● 📝 Blog: [Link]
🔥 Tricky Concepts:
● Question: What is a higher-order function?
- Higher-order functions (HOFs) in JavaScript are functions that can accept other
functions as arguments, return functions, or both.
● Question: What's the difference between currying and partial application?
- Currying: Breaks a function into a chain of single-argument functions.
- Partial Application: Pre-fills some arguments, returns a function for the rest.
● Question: What is function composition?
- allows you to combine multiple functions into a single function
2.5 this Keyword
What to Learn:
● What is this?
● this in different contexts (global, function, method, arrow function)
● this in event handlers
● Explicit binding (call, apply, bind)
● this in classes
● Common this pitfalls
Resources:
● 📝 Blog: [Link]
Operators/this
● 🎥 Video: [Link] (JavaScript "this"
Explained)
● 📝 Blog: [Link]
🔥 Tricky Concepts:
● Question: How is this determined in JavaScript?
- it’s determined at runtime based on how a function is called, not where it’s defined.
● Question: What's the difference between call, apply, and bind?
- The bind() method returns a new function with a permanently set “ this “ value.
- The call() method invokes the function immediately and sets “ this “ to the first
argument.
- The apply() method calls a function immediately and sets this to the first argument
passed. Unlike call(), the additional arguments must be provided as an array, which
are then passed to the function.
● Question: Why does this lose binding in callbacks?
“this” loses its original binding in callbacks because the value of this is determined by
how a function is called, not where it’s defined.
When you pass a method as a callback, you’re passing a reference to the function,
but not the object it belongs to. When that function is later invoked (e.g., by an event
handler, timer, or another function), it’s called without an owning object,
so this defaults to: undefined in strict mode or window (or global object) in non-strict
mode
Module 3: Objects and Arrays
3.1 Objects Basics
What to Learn:
● Object literal syntax
const obj = {
property1: value1, // property name may be an identifier
2: value2, // or a number
"property n": value3, // or a string
};
● Accessing properties (dot vs bracket notation)
// Dot notation
[Link] = "Ford";
// Bracket notation
myCar["make"] = "Ford";
● Adding/modifying/deleting properties
● Computed property names
● Property shorthand
● Object methods
● [Link], [Link], [Link]
● Object destructuring
Resources:
● 📝 Blog:
[Link]
ts
● 🎥 Video: [Link] (JavaScript Objects)
● 📝 Blog: [Link]
🔥 Tricky Concepts:
● Question: What's the difference between dot notation and bracket notation?
dot Best used when the property name is known and is a valid JavaScript
identifier (e.g., no spaces, special characters, or starting with a
number).
bracket Useful when property names are dynamic, stored in variables, or not
valid identifiers (e.g., contain spaces or special characters).
● Question: What's the difference between delete and setting to undefined?
Use delete when you truly want to remove a property from an object (e.g., cleanup
before serialization).
Use undefined (or null) when you want to keep the property but indicate “no value” or
“not set yet”.
● Question: What are computed property names?
3.2 Arrays Basics
What to Learn:
● Array creation and literals
● Accessing array elements
● Array length property
● Adding/removing elements (push, pop, unshift, shift)
● splice vs slice
● indexOf, includes, find, findIndex
● Array destructuring
● Spread operator with arrays
Resources:
● 📝 Blog: [Link]
Global_Objects/Array
● 🎥 Video: [Link] (JavaScript Arrays)
● 📝 Blog: [Link]
🔥 Tricky Concepts:
● Question: What's the difference between splice and slice?
Slice Splice
used to get a new array by selecting a used to add/remove an item from the
sub-array of a given array given array.
The original array is not modified Modifies the original array
● Question: What's the difference between find and filter?
The find method looks for a single (first) element that makes the function return true.
The filter() method returns a new array containing only the elements that pass a
given test.
● Question: Why does array length = 0 clear the array but length = 5 doesn't?
array length = 0: clears the array completely
length = 5: increases array size and leaves empty slots
3.3 Array Methods - Iteration
What to Learn
● forEach(): executes a provided function once for each array element.
● map(): returns a new array with results from applying a function to each element.
● filter(): returns a new array with elements that pass a test function.
● reduce(): allows you to iterate over an array and accumulate its values into a single
result.
● some(): returns true if it finds one element in the array that satisfies the provided
testing function, otherwise false.
● every(): returns false if it finds one element in the array that does not satisfy the
provided testing function, otherwise true.
● find(): returns the first element in the provided array that satisfies the provided testing
function, otherwise returns undefined.
● findIndex(): returns the index of the first element in an array that satisfies the
provided testing function, otherwise returns -1.
● Method chaining (filter, map, reduce, find, sort): mechanism for calling a method on
another method of the same object.
● When to use each method
Resources:
● 📝 Blog: [Link]
Global_Objects/Array#instance_methods
● 🎥 Video: [Link] (Array Methods - Web
Dev Simplified)
● 📝 Blog: [Link]
🔥 Tricky Concepts:
● Question: What's the difference between map and forEach?
map() forEach()
Returns a new array after performing a Does not return a new array, executes
function at each element of the array function on each array element
● Question: How does reduce work and when to use it?’
[Link]((accumulator, currentValue, currentIndex, array) => {
// return the updated accumulator
}, initialValue);
● Question: What's the difference between some and every?
Some() Every()
returns true if it finds one element in the returns false if it finds one element in
array that satisfies the provided testing the array that does not satisfy the
function, otherwise false. provided testing function, otherwise
true.
3.4 Array Methods - Advanced
What to Learn:
● Flat: flattens nested arrays
and flatMap: indentical to map() and flat() with depth 1.
● sort (and its pitfalls)
● reverse
● concat vs spread
● join and split (array ↔ string)
● [Link]
● [Link]
● fill and copyWithin
fill(value)
fill(value, start)
fill(value, start, end)
Resources:
● 📝 Blog: [Link]
Global_Objects/Array
● 🎥 Video: [Link] (Advanced Array
Methods)
● 📝 Blog: [Link]
🔥 Tricky Concepts:
● Question: Why does [1, 2, 10].sort() give [1, 10, 2]?
because all elements are converted to strings for comparisons and lexicographic
ordering is applied
● Question: What's the difference between flat and flatMap?
flat() flatMap()
only flattens arrays transforms elements first (like map()),
no transformation then flattens the result one level.
● Question: What's the difference between [Link] and the spread operator?
3.5 Object and Array Destructuring
What to Learn:
● Object destructuring syntax
● Array destructuring syntax
● Default values in destructuring
● Rest in destructuring
● Nested destructuring
● Destructuring in function parameters
● Renaming during destructuring
Resources:
● 📝 Blog: [Link]
Operators/Destructuring_assignment
● 🎥 Video: [Link] (Destructuring Explained)
● 📝 Blog: [Link]
🔥 Tricky Concepts:
● Question: How do you rename variables during destructuring?
● Question: What's the difference between ...rest in arrays vs objects?
…rest in arrays …rest in objects
Collects the remaining elements into a Collects the remaining properties into a
new array. new object.
● Question: How does nested destructuring work?
With nested destructuring, the left-hand pattern mirrors the structure of the right-hand
data, allowing you to extract values from inside nested arrays or objects in one step.
Module 4: Asynchronous JavaScript
4.1 Introduction to Asynchronous JavaScript
What to Learn:
● Synchronous vs asynchronous code
● JavaScript event loop: async operations are handled using the event loop
● Call stack: Keeps track of function calls. Uses Last In, First Out
● Task queue (macrotasks): queued async tasks (setTimeout, setInterval, DOM events
like click, scroll)
● Microtask queue: Microtasks have higher priority than macrotasks.
promises
● setTimeout and setInterval
● Understanding async behavior
Resources:
● 📝 Blog: [Link]
● 🎥 Video: [Link] (Event Loop Explained)
● 📝 Blog: [Link]
🔥 Tricky Concepts:
● Question: What is the JavaScript event loop?
- event loop manages the execution of multiple tasks without blocking the main
thread.
● Question: What's the difference between macrotasks and microtasks?
Macrotasks microtasks
setTimeout and setInterval. Promises: .then, .catch, .finally
I/O operations. callbacks.
UI rendering events.
Lower priority Higher priority
● Question: Why does setTimeout(fn, 0) not execute immediately?
4.2 Callbacks
What to Learn:
● Callback functions
- A callback function is a function passed into another function as an argument, which
is then invoked inside the outer function to complete some kind of routine or action.
● Asynchronous callbacks
● Error-first callbacks ([Link] convention)
● Callback hell/pyramid of doom
- Too many nested callbacks make code unreadable.
- This creates Callback Hell, making it hard to read and maintain. Use Promises or
async/await instead.
● Why callbacks are problematic
Resources:
● 📝 Blog: [Link]
● 🎥 Video: [Link] (Callbacks Explained)
● 📝 Blog: [Link]
🔥 Tricky Concepts:
● Question: What is callback hell, and why is it bad?
makes the code hard to read and maintain
● Question: What is the error-first callback pattern?
The first arg is reserved for an error, and the second arg returns the successful result
if no error is found
4.3 Promises
What to Learn:
● What is a Promise?
- represents the eventual completion (or failure) of an asynchronous operation and its
resulting value.
● Promise states (pending, fulfilled, rejected)
- pending: initial state, neither fulfilled nor rejected.
- fulfilled: meaning that the operation was completed successfully.
- rejected: meaning that the operation failed.
● Creating Promises
● then, catch, finally
● Promise chaining
● Returning Promises vs values in then
● [Link], [Link], [Link], [Link]
● Error handling with Promises
Resources:
● 📝 Blog: [Link]
Global_Objects/Promise
● 🎥 Video: [Link] (Promises Explained)
● 📝 Blog: [Link]
🔥 Tricky Concepts:
● Question: What are the three states of a Promise? Pending, fulfilled, rejected
● Question: What's the difference between then and catch?
-then: 1st arg handles a successful result but 2nd arg handles an errors
-catch: used for error handling
● Question: What's the difference between [Link] and [Link]?
- [Link] waits for all promises to resolve, while [Link] resolves or rejects
as soon as the first promise settles.
● Question: Why does returning a value in then work like return
[Link](value)?
4.4 Async/Await
What to Learn:
● async functions
● await keyword
● Error handling with try/catch
● async/await vs Promises
● Sequential vs parallel async operations
● Top-level await
● Awaiting non-Promises
Resources:
● 📝 Blog: [Link]
Statements/async_function
● 🎥 Video: [Link] (Async Await Tutorial)
● 📝 Blog: [Link]
🔥 Tricky Concepts:
● Question: What does the async keyword do?
The async keyword in JavaScript is used to declare a function as asynchronous.
When a function is marked with async, it automatically returns a Promise.
● Question: What's the difference between sequential and parallel async operations?
Sequential Parallel
ordered, predictable flow. faster total runtime but tasks run without
waiting for each other.
adds up task times. bounded by the longest task.
● Question: How do you handle errors in async/await?
try…catch
finally
● Question: Can you use await outside async functions?
NO
4.5 Fetch API and AJAX
What to Learn:
● What is AJAX?
● fetch() method
● Request and Response objects
● HTTP methods (GET, POST, PUT, DELETE)
● Headers and CORS
● Handling JSON data
● Error handling with fetch
● AbortController for canceling requests
Resources:
● 📝 Blog: [Link]
● 🎥 Video: [Link] (Fetch API Tutorial)
● 📝 Blog: [Link]
🔥 Tricky Concepts:
● Question: Why doesn't fetch reject on HTTP error status (404, 500)?
Answer: fetch only rejects on network failures. HTTP errors fulfil the Promise! Must check
[Link] or [Link]:
const response = await fetch(url);
if (![Link]) throw new Error(`HTTP ${[Link]}`);
const data = await [Link]();
Common mistake: Always check [Link]!
● Question: Why do you need two awaits with fetch?
- First await (Waiting for the Response)
- Second await (Parsing the Body):
● Question: What is CORS and why does fetch fail sometimes?
- CORS (Cross-Origin Resource Sharing) is a security feature in browsers that
controls whether JavaScript running on one website can access resources from
another website.
