Complete JavaScript Syllabus

📦 Chapter 1: Variables & Declarations

🧠 What are Variables?

Variables are containers that hold data. They help us store, reuse, and update information in JavaScript — from simple values like numbers to complex data like arrays and objects. Think of a variable as a box with a name on it. You can put something inside it (a value), and later check or change what's inside. In JavaScript, you create these boxes using keywords: var , let , or const .

🧪 var, let, and const – Line-by-Line Comparison

🧓 var – Old and risky

• Scoped to functions, not blocks
• Can be redeclared and reassigned
• Hoisted to the top with undefined value

var score = 10;
var score = 20; // OK

💻 let – Modern and safe

• Scoped to blocks ( {} )
• Can be reassigned but not redeclared
• Hoisted, but stays in the Temporal Dead Zone (TDZ)

let age = 25;
age = 30; // ✅
let age = 40; // ❌ Error (same block)

🔐 const – Constant values

• Scoped to blocks
• Cannot be reassigned or redeclared
• Value must be assigned at declaration
• TDZ applies here too

const PI = 3.14;
PI = 3.14159; // ❌ Error

👉 But: If const holds an object/array, you can still change its contents:

const student = { name: "Riya" };
student.name = "Priya"; // ✅ OK
student = {}; // ❌ Error

🔥 Scope in Real Life

• Block Scope → Code inside {} like in loops, if , etc.
• Function Scope → Code inside a function
• let and const follow block scope
• var ignores block scope — which leads to bugs.

{
 var x = 5;
 let y = 10;
 const z = 15;
}
console.log(x); // ✅ 5
console.log(y); // ❌ ReferenceError
console.log(z); // ❌ ReferenceError

🧨 Hoisting

JavaScript prepares memory before running code.It moves all declarations to the top — this is called hoisting.

But:

• var is hoisted and set to undefined
• let and const are hoisted but not initialized — so accessing them early gives ReferenceError

console.log(a); // undefined
var a = 10;

console.log(b); // ❌ ReferenceError
let b = 20;

️ ⚠️Common Confusions (JS Reality Checks)

• const doesn’t make things fully constant. It protects the variable, not the value
• var is outdated — it’s better to use let and const .
• let and const behave similarly, but const gives more safety — use it when you’re not planning to reassign.

🧠 Mindset Rule

Use const by default. Use let only when you plan to change the value.Avoid var — it belongs to the past.

🧪 Practice Zone

1. Declare your name and city using const , and your age using let .
2. Try this and observe the result:

let x = 5;
let x = 10;

3. Guess the output:

console.log(count);
var count = 42;

4. Create a const object and add a new key to it — does it work?
5. Try accessing a let variable before declaring it — what error do you see?
6. Change a const array by pushing a value. Will it throw an error?

🧠 Chapter 2: Data Types + Type System

📦 What Are Data Types?

In JavaScript, every value has a type. These types define what kind of data is being stored — a number, text, boolean, object, etc. There are two categories:

• Primitive types – stored directly
• Reference types – stored as memory references.

🔹 Primitive Data Types

1. String → Text “hello” , ‘Aditya’
2. Number → Any numeric value 3 , -99 , 3.14
3. Boolean → True or false true , false
4. Undefined → Variable declared but not assigned let x; → x is undefined
5. Null → Intentional empty value let x = null;
6. Symbol → Unique identifier (rarely used)
7. . BigInt → Very large integers 123456789012345678901234567890n

🔹 Reference Data Types

• Object → { name: “Harsh”, age: 26 }
• Array → [10, 20, 30]
• Function → function greet() {} These are not copied directly, but by reference.

🔍 typeof Operator

Used to check the data type of a value:

typeof "Your Name" // "string"
typeof 99 // "number"
typeof true // "boolean"
typeof undefined // "undefined"
typeof null // "object" ← known bug
typeof [] // "object"
typeof {} // "object"
typeof function(){} // "function"

Note: typeof null === “object” is a bug, but has existed since the early days of JS.

🔁 Type Coercion (Auto-Conversion)

JavaScript auto-converts types in some operations:

"5" + 1 // "51" → number converted to string
"5" - 1 // 4 → string converted to number
true + 1 // 2
null + 1 // 1
undefined + 1 // NaN

🚨 Loose vs Strict Equality

• == compares value with type conversion
• === compares value + type (no conversion)

5 == "5" // true
5 === "5" // false

Always prefer === for accurate comparisons

NaN – Not a Number

typeof NaN // "number"

Even though it means “Not a Number”, NaN is actually of type number . This is because operations like 0 / 0 or parseInt("abc") still produce a numeric result — just an invalid one.

🔦 Truthy and Falsy Values

Falsy values:

false , 0 , "" , null , undefined , NaN Everything else is truthy, including: “0” , “false” , [] , {} , function(){}

Practice Zone

🔄 Chapter 3: Operators

🔧 What are Operators?

Operators are special symbols or keywords in JavaScript used to perform operations on values (operands). Youʼll use them in calculations, comparisons, logic, assignments, and even type checks. Think of them as the verbs of your code — they act on data.

➕ Arithmetic Operators

Used for basic math.

+ // addition
- // subtraction
* // multiplication
/ // division
% // modulus (remainder)
** // exponentiation (power)

Example:

let a = 10, b = 3;
console.log(a + b); // 13
console.log(a % b); // 1
console.log(2 ** 3); // 8

🧮 Assignment Operators

Assign values to variables.

= // assigns value
+= // a += b => a = a + b
-= // a -= b
*=, /=, %=

Example:

let score = 5;
score += 2; // score = 7

🧾 Comparison Operators

== // equal (loose)
=== // equal (strict – value + type)
!= // not equal (loose)
!== // not equal (strict)
> < >= <=

Example:

console.log(5 == "5"); // true
console.log(5 === "5"); // false

✅ Logical Operators

Used to combine multiple conditions

&& // AND – both must be true
|| // OR – either one true
! // NOT – negates truthiness

Example:

let age = 20, hasID = true;
if (age >= 18 && hasID) {
 console.log("Allowed");
}

🌀 Unary Operators

Used on a single operand.

+ // tries to convert to number
- // negates
++ // increment
-- // decrement
typeof // returns data type

Example:

let x = "5";
console.log(+x); // 5 (converted to number)

❓ Ternary Operator (Conditional)

Shorthand for if…else

condition ? valueIfTrue : valueIfFalse

Example:

let score = 80;
let grade = score > 50 ? "Pass" : "Fail";

🧪 typeof Operator

typeof 123 // "number"
typeof "hi" // "string"
typeof null // "object" (JS bug)
typeof [] // "object"
typeof {} // "object"
typeof function(){} // "function"

🧠 Mindset

Operators make logic happen. They help you make decisions, combine values, and create expressions. Try to:

• Use === instead of == to avoid type bugs.
• se ternary for quick decisions, not complex ones
• Think in truthy/falsy when using && , || , ! .

❓ Common Confusions

• “5” + 1 is “51” (string concat), but “5” - 1 is 4 (number subtract)

• !!value is a quick trick to convert anything into a boolean

• Pre-increment ( ++i ) vs post-increment ( i++ ) return different results

🧭 Chapter 4: Control Flow

🚦 What is Control Flow?

Control flow decides which code runs, when it runs, and how many times it runs. It's like decision-making + direction in your JavaScript program. If operators are the verbs, control flow is the traffic signal.

🧱 if, else if, else

if (condition) {
 // runs if condition is true
} else if (anotherCondition) {
 // runs if first was false, second is true
} else {
 // runs if none are true
}

✅ Example:

if (condition) {
 // runs if condition is true
} else if (anotherCondition) {
 // runs if first was false, second is true
} else {
 // runs if none are true
}

🌀 switch-case

Great for checking one variable against many values

switch (value) {
 case value1:
 // code
 break;
 case value2:
 // code
 break;
 default:
 // fallback
}

Example:

let fruit = "apple";
switch (fruit) {
 case "banana":
 console.log("Yellow");
 break;
 case "apple":
 console.log("Red");
 break;
 default:
 console.log("Unknown");
}

🔁 Early Return Pattern

Used in functions to exit early if some condition fails.

function checkAge(age) {
 if (age < 18) return "Denied";
 return "Allowed";
}

This avoids deep nesting and makes logic cleaner.

️ Common Confusions

• switch-case executes all cases after a match unless you break

• else if chain works top-down — order matters

• You can use truthy/falsy values directly in if

🧠 Mindset

Control flow = conditional storytelling. It helps your program make choices and respond differently to different inputs. Write readable branches. Avoid nesting too deep — use early return if needed

🔁 Chapter 5: Loops

🔄 Why Loops?

Loops help us repeat code without rewriting it. If a task needs to be done multiple times (e.g., printing 1–10, going through an array, or checking each character in a string), loops are the backbone.

🔁 for Loop

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

• Start from i = 0
• Run till i < 5
• Increase i each time

🔁 while Loop

let i = 0;
while (i < 5) {
 console.log(i);
 i++;
}

🔁 do-while Loop

let i = 0;
do {
 console.log(i);
 i++;
} while (i < 5);

• Runs at least once, even if condition is false

⛔ break and continue

• break : Exit loop completely
• continue : Skip current iteration and move to next

for (let i = 1; i <= 5; i++) {
 if (i === 3) continue;
 console.log(i); // Skips 3
}

🌀 for-of – Arrays & Strings

for (let char of "Sheryians") {
 console.log(char);
}

• Works on anything iterable (arrays, strings)

🧱 forEach – Arrays

let nums = [10, 20, 30];
nums.forEach((num) => {
 console.log(num);
});

• Cleaner than for for arrays, but you canʼt break/return

🧱 for-in – Objects (and arrays if needed)

let user = { name: "Harsh", age: 26 };
for (let key in user) {
 console.log(key, user[key]);
}

• Goes over keys in objects

️ Common Confusions

• for-in is for objects, not arrays (may cause issues with unexpected keys)
• forEach can’t use break or continue
• while and do-while work best when number of iterations is unknown

🧠 Mindset

🧮 Chapter 6: Functions

🧠 What are Functions?

Functions are blocks of reusable logic. Instead of repeating the same task again and again, wrap it in a function and reuse it with different inputs.

Think of a function like a vending machine:

• Input: you give money + item code
• Output: it gives you the item
• Logic: hidden inside

🛠 Function Declarations

function greet() {
 console.log("Welcome to Sheryians!");
}
greet();

You define it once, then call it whenever needed.

🧾 Parameters vs Arguments

function greet(name) {
 console.log("Hello " + name);
}
greet("Harsh");

• name is a parameter
• “Harsh” is the argument you pass

🌀 Return Values

function sum(a, b) {
 return a + b;
}
let total = sum(5, 10); // total is 15

• return sends back a result to wherever the function was called
• After return , function exits

🧰 Function Expressions

const greet = function () {
 console.log("Hello!");
};

• Functions stored in variables
• Cannot be hoisted (you canʼt call them before theyʼre defined)

🏹 Arrow Functions

const greet = () => {
 console.log("Hi!");
};

• Cleaner syntax

• No own this , no arguments object

🧂 Default + Rest + Spread

unction multiply(a = 1, b = 1) {
 return a * b;
}
function sum(...nums) {
 return nums.reduce((acc, val) => acc + val, 0);
}
let nums = [1, 2, 3];
console.log(sum(...nums)); // Spread

• a = 1 → default parameter
• …nums → rest parameter
• …nums (in call) → spread operator

🎯 First-Class Functions

JavaScript treats functions as values:

• Assign to variables
• Pass as arguments
• Return from other functions

function shout(msg) {
 return msg.toUpperCase();
}
function processMessage(fn) {
 console.log(fn("hello"));
}
processMessage(shout);

🧠 Higher-Order Functions (HOF)

Functions that accept other functions or return functions.

nction createMultiplier(x) {
 return function (y) {
 return x * y;
 };
}
let double = createMultiplier(2);
console.log(double(5)); // 10

🔐 Closures & Lexical Scope

Closures = when a function remembers its parent scope, even after the parent has finished.

function outer() {
 let count = 0;
 return function () {
 count++;
 console.log(count);
 };
}
let counter = outer();
counter(); // 1
counter(); // 2

Even after outer is done, counter still remembers count .

⚡ IIFE – Immediately Invoked Function Expression

(function () {
 console.log("Runs immediately");
})();

Used to create private scope instantly

🚀 Hoisting: Declarations vs Expressions

hello(); // works
function hello() {
 console.log("Hi");
}
greet(); // error
const greet = function () {
 console.log("Hi");
};

• Declarations are hoisted
• Expressions are not

️ ️Common Confusions

• Arrow functions donʼt have their own this
• You canʼt break out of forEach
• Closures often trap old variable values
• Return vs console.log – don’t mix them up

️ ️🧠 Mindset

Functions are your logic blocks + memory holders (via closure). They keep your code clean, DRY, and reusable.

🧰 Chapter 7: Arrays

🧠 What is an Array?

An array is like a row of boxes, where each box holds a value and has an index (0, 1, 2…). Arrays help you store multiple values in a single variable — numbers, strings, or even objects/functions.

🏗 Creating & Accessing Arrays

let marks = [90, 85, 78];
console.log(marks[1]); // 85
marks[2] = 80; // Update index 2

• Indexing starts from 0
• You can access, update, or overwrite values by index

️ Common Array Methods

🧱 Modifiers (Change original array)

let arr = [1, 2, 3, 4];
arr.push(5); // Add to end
arr.pop(); // Remove last
arr.shift(); // Remove first
arr.unshift(0); // Add to start
arr.splice(1, 2); // Remove 2 items starting at index 1
arr.reverse(); // Reverse order

🔍 Extractors (Don’t modify original array)

let newArr = arr.slice(1, 3); // Copy from index 1 to 2
arr.sort(); // Lexical sort by default

🔄 Iteration Methods

map() Returns a new array with modified values.

let prices = [100, 200, 300];
let taxed = prices.map(p => p * 1.18);

filter() Filters out elements based on a condition.

let nums = [1, 2, 3, 4];
let even = nums.filter(n => n % 2 === 0);

reduce() Reduces the array to a single value.

let total = nums.reduce((acc, val) => acc + val, 0);

forEach() Performs an action for each element (but returns undefined).

nums.forEach(n => console.log(n));

find(), some(), every()

nums.find(n => n > 2); // First match
nums.some(n => n > 5); // At least one true
nums.every(n => n > 0); // All true

️ Destructuring & Spread

let [first, second] = ["a", "b", "c"];
let newArr = [...nums, 99]; // Spread to copy & add

🧱 Chapter 8: Objects

🧠 What is an Object?

Objects in JavaScript are like real-world records – a collection of key-value pairs. They help us store structured data (like a student, a product, or a user profile).

let student = {
 name: "Ravi",
 age: 21,
 isEnrolled: true
};

🔑 Key-Value Structure

• Keys are always strings (even if you write them as numbers or identifiers)

• Values can be anything – string, number, array, object, function, etc.

console.log(student["name"]); // Ravi
console.log(student.age); // 21

📍 Dot vs Bracket Notation

• Use dot notation for fixed key names

• Use bracket notation for dynamic or multi-word keys

student["full name"] = "Ravi Kumar"; // ✅
student.course = "JavaScript"; // ✅

🏗 Nesting and Deep Access

Objects can have nested objects (objects inside objects)

let user = {
 name: "Amit",
 address: {
 city: "Delhi",
 pincode: 110001
 }
};
console.log(user.address.city); // Delhi

️ Object Destructuring

You can extract values directly:

let { name, age } = student;

For nested objects:

let {
 address: { city }
} = user;

🔁 Looping Through Objects

for-in loop

for (let key in student) {
 console.log(key, student[key]);
}

Object.keys(), Object.values(), Object.entries()

Object.keys(student); // ["name", "age", "isEnrolled"]
Object.entries(student); // [["name", "Ravi"], ["age", 21], ...]

📦 Copying Objects

Shallow Copy (one level deep)

let newStudent = { ...student };
let newOne = Object.assign({}, student);

Deep Copy (nested levels)

let deepCopy = JSON.parse(JSON.stringify(user)); 

❗ Note: JSON-based copy works only for plain data (no functions, undefined, etc.)

❓ Optional Chaining

Avoids errors if a nested property is undefined:

console.log(user?.address?.city); // Delhi
console.log(user?.profile?.email); // undefined (no error)

🧠 Computed Properties

You can use variables as keys:

let key = "marks";
let report = {
 [key]: 89
};

️ Common Confusions

• Shallow copy copies only the first level
• for-in includes inherited keys (be cautious!)
• delete obj.key removes the property
• Spread ≠ deep copy

️ 🧠 Mindset

Objects are structured state – perfect for modeling anything complex: a user, a form, a product, etc. Use destructuring, chaining, and dynamic keys wisely.