Warming up the neural circuits...
is the programming language of the web. It makes your pages interactive — buttons that respond to clicks, forms that validate , animations, data fetching from servers, and full web applications.
Now you're learning the behavior layer. JavaScript is what turns a static page into an interactive app.
Variables store data so you can use it later. Think of them as labeled boxes where you put values.
let — Mutable (can change)let name = "Alice";
name = "Bob"; // ✅ Works — let allows reassignment
console.log(name); // "Bob"const — Immutable (cannot change)const age = 25;
age = 30; // ❌ Error! Cannot reassign a constBut: If the const is an object or array, you CAN modify its contents:
const person = { name: "Alice", age: 25 };
person.age = 26; // ✅ Works — modifying a property, not reassigning
person.city = "Delhi"; // ✅ Works — adding a new property
// person = {}; // ❌ Error — can't reassign the whole thingvar — Old way (avoid in modern code)var oldWay = "Don't use me"; // function-scoped, hoisted, can cause bugsModern rule: Use const by default. Use let only when you need to reassign.
// ✅ Do this
const PI = 3.14159;
let counter = 0;
// ❌ Not this
var oldSchool = "avoid this";JavaScript has 7 primitive types and 1 complex type. Everything that's not a primitive is an object.
const name = "Alice";
const greeting = 'Hello';
const template = `Hi, ${name}!`; // Template literal (backtick)
// String methods
console.log(name.length
const age = 25;
const price = 19.99;
const negative = -5;
// Math operations
const sum = 10 + 5; // 15
const difference = 10 - 5; //
const isLoggedIn = true;
const isAdmin = false;
// Comparison operators return booleans
const isEqual = (5 === 5); // true
const isGreater = (10 > 5); // true
let something;
console.log(something); // undefined
function doNothing() {}
console.log(doNothing()); // undefinedconst empty = null; // I explicitly set this to nothingImportant: null is an object type (typeof bug):
console.log(typeof null); // "object" — this is a famous JS bug!const bigNumber = 12345678901234567890n;const id = Symbol("id"); // Guaranteed uniqueconst person = {
name: "Alice",
age: 25,
isStudent: false
};
console.log(person.name); // "Alice"
console.log(person["
typeof to Check Typesconsole.log(typeof "hello"); // "string"
console.log(typeof 42); // "number"
console.log(typeof true); // "boolean"
console.log(
To check if something is an array:
const arr = [1, 2, 3];
console.log(Array.isArray(arr)); // trueJavaScript tries to convert types automatically. This can cause unexpected behavior:
// String + Number = String concatenation
console.log("5" + 3); // "53" (not 8!)
console.log("Hello " + 42); // "Hello 42"
// String - Number = Number subtraction (coerces string to number)
console.log
Rule: Always use === (strict equality) instead of == (loose equality).
Template literals (backticks) are the modern way to work with strings:
const name = "Alice";
const age = 25;
// Old way (concatenation)
const oldWay = "My name is " + name + " and I am " + age + " years old.";
// New way (template literal)
// ✅ camelCase (JavaScript standard)
const firstName = "Alice";
let itemCount = 0;
function getUserData() {}
// ❌ Not these in JS
// const first_name = "Alice"; // snake_case (used in Python)
// const FirstName = "Alice"; // PascalCase (used for classes)
// const first-name = "Alice"; // kebab-case (not valid in JS)Rules for valid names:
$, and _myVar ≠ myvar)let, const, function, class, etc.)Mistake 1: Using const for values that need to change
// ❌ Wrong
const counter = 0;
counter = counter + 1; // Error!
// ✅ Right
let counter = 0;
counter = counter + 1;Mistake 2: Assuming == is safe
// ❌ Wrong
if (5 == "5") { /* this runs — yikes */ }
// ✅ Right
if (5 === "5") { /* this doesn't run — correct */ }Mistake 3: Modifying const objects by reassignment
// ❌ Wrong
const user = { name: "Alice" };
user = { name: "Bob" }; // Error!
// ✅ Right
const user = { name: "Alice" };
Mistake 4: Not handling NaN checks
// ❌ Wrong
const result = "abc" / 5;
if (result === NaN) { /* this NEVER runs — NaN !== NaN */ }
// ✅ Right
if (isNaN(result)) { /* this runs To use JavaScript in an HTML page:
<!DOCTYPE html>
<html>
<head>
<title>JS Demo</title>
</head>
<body>
<h1 id="title">Hello</h1>
<!-- Option 1: Inline script -->
Open DevTools (F12) → Console tab to see console.log() output.
const (default) and let (when reassignment needed)typeof to check types, Array.isArray() for arrays=== is safer than ==${} and backticks