📜 Introduction to JavaScript:
History & Evolution
📜 What is JavaScript?
JavaScript is a high-level, interpreted programming
language used to create dynamic and interactive effects on web
pages.
It is one of the core technologies of the web alongside HTML and
CSS.
JavaScript runs directly in the browser, enabling real-time
interactions without requiring server reloads.
Modern JavaScript can also run on servers (using environments
like [Link]).
🧪 Why Was JavaScript Created?
JavaScript was created in just 10 days by Brendan Eich in 1995 at
Netscape.
The goal was to provide a lightweight scripting language for client-
side browser interactions.
Initially called Mocha, then LiveScript, and finally renamed
to JavaScript to ride the popularity wave of Java.
🕰️JavaScript Through the Years
1997 – JavaScript was standardized as ECMAScript (ES1) by ECMA
International.
2009 – ES5 brought features like strict mode and JSON support.
2015 – ES6 (ES2015) revolutionized JavaScript with let/const,
arrow functions, classes, promises, and modules.
Subsequent versions (ES7 to ES14+) continue to add features like
async/await, optional chaining, nullish coalescing, and more.
🧰 Core Features of JavaScript
Supports multiple programming paradigms: object-
oriented, functional, and event-driven.
First-class functions and closures make it powerful for callbacks and
higher-order functions.
Can manipulate the DOM (Document Object Model) directly to
update UI dynamically.
Supports asynchronous operations via callbacks,
promises, and async/await.
🌐 JavaScript in the Modern Web
Used in both frontend (React, Vue, Angular)
and backend ([Link], Deno) development.
Powers single-page applications (SPAs), progressive web apps
(PWAs), and real-time apps like chats and games.
JavaScript has a vast ecosystem of libraries and frameworks, and a
strong developer community.
Tools like Webpack, Babel, ESLint, and TypeScript enhance the
development experience.
🚀 How JavaScript Changed the Web
JavaScript brought interactivity to otherwise static websites,
enabling features like dropdowns, modals, sliders, and more.
It led to the evolution of complex web applications that feel like
native apps.
The shift toward full-stack JavaScript has made it possible to build
entire applications using a single language.
🧠 JavaScript Variables & Data
Types
In JavaScript, variables are used to store information that can be referenced
and manipulated later.
Data types represent the type of data a variable holds — such as numbers,
strings, booleans, objects, etc.
📦 What is a Variable?
A variable is a named container used to store data in a program. In
JavaScript, you can declare variables using `var`, `let`, or `const`.
let name = "John";
const age = 30;
var isStudent = true;
🔠 What is a Data Type?
A data type defines the kind of value a variable can hold, such as
numbers, strings, booleans, etc.
let number = 100; // Number
let name = "Alice"; // String
let isOnline = false; // Boolean
🔄 var vs let vs const
`var` is function-scoped and can be redeclared, while `let` and
`const` are block-scoped. `const` is used for constants and cannot
be reassigned.
var x = 10;
let y = 20;
const z = 30;
🔢 Primitive Data Types
Primitive types in JavaScript include Number, String, Boolean,
Undefined, Null, Symbol, and BigInt.
let a = 42; // Number
let b = "Hello"; // String
let c = true; // Boolean
let d; // Undefined
let e = null; // Null
let f = Symbol("id"); // Symbol
let g = 12345678901234567890n; // BigInt
📚 Non-Primitive (Reference) Data Types
Objects, Arrays, and Functions are non-primitive data types that
store references to memory locations.
let person = { name: "Bob", age: 25 }; // Object
let numbers = [1, 2, 3, 4]; // Array
function greet() { [Link]("Hello!"); } // Function
🔍 typeof Operator
Use the `typeof` operator to check the type of a variable.
typeof "Hello" // "string"
typeof 123 // "number"
typeof true // "boolean"
typeof {} // "object"
typeof undefined // "undefined"
typeof null // "object" (this is a known quirk)
🧮 JavaScript Operators &
Expressions
Operators are symbols used to perform operations on values and variables.
Expressions are combinations of values, variables, and operators that
result in a single value.
➕ Arithmetic Operators
Used to perform basic mathematical operations.
let x = 10;
let y = 5;
[Link](x + y); // 15
[Link](x - y); // 5
[Link](x * y); // 50
[Link](x / y); // 2
[Link](x % y); // 0
🧭 Comparison Operators
Used to compare two values and return a boolean.
[Link](5 == "5"); // true (loose equality)
[Link](5 === "5"); // false (strict equality)
[Link](10 > 5); // true
[Link](10 <= 5); // false
🔁 Logical Operators
Used to combine multiple conditions or values.
let a = true, b = false;
[Link](a && b); // false (AND)
[Link](a || b); // true (OR)
[Link](!a); // false (NOT)
🎯 Assignment Operators
Used to assign values to variables.
let x = 10;
x += 5; // x = x + 5
x -= 2; // x = x - 2
x *= 3; // x = x * 3
x /= 2; // x = x / 2
🧪 Type Operators
`typeof` checks the type, and `instanceof` checks instance
relationship.
typeof 123; // "number"
typeof "hello"; // "string"
[1, 2, 3] instanceof Array; // true
🧠 Expressions
Any valid unit of code that resolves to a value is an expression.
3 + 4 * 2; // 11
let message = "Hi " + "there"; // "Hi there"
true && false; // false
🔄 Conditionals & Loops
Conditionals help make decisions based on logic.
Loops are used to execute code repeatedly until a condition is false.
🔍 if, else if, else
Executes code blocks based on conditions. Used for decision
making.
let age = 20;
if (age < 18) {
[Link]("Minor");
} else if (age >= 18 && age < 60) {
[Link]("Adult");
} else {
[Link]("Senior");
🔁 for Loop
Used to run a block of code a specific number of times.
for (let i = 1; i <= 5; i++) {
[Link]("Count:", i);
🌀 while Loop
Executes as long as the condition is true (checked before each
iteration).
let count = 1;
while (count <= 3) {
[Link]("Hello", count);
count++;
♻️do...while Loop
Like while, but runs the block at least once before checking
condition.
let i = 1;
do {
[Link]("Run", i);
i++;
} while (i <= 3);
📦 switch Statement
Alternative to many if-else conditions. Matches cases to run specific
code.
let fruit = "apple";
switch (fruit) {
case "apple":
[Link]("Red fruit");
break;
case "banana":
[Link]("Yellow fruit");
break;
default:
[Link]("Unknown fruit");
🧮 Functions & Scope
Functions help you write reusable code blocks.
Scope determines which variables can be accessed in which parts of the
code.
🧠 What is a Function?
A function is a reusable block of code that performs a specific task.
function greet(name) {
return "Hello, " + name + "!";
[Link](greet("Alice")); // Output: Hello, Alice!
⚡ Arrow Function
A concise syntax for writing functions using `=>`.
const add = (a, b) => a + b;
[Link](add(3, 4)); // Output: 7
🔁 Function Expression
A function can also be assigned to a variable.
const sayHi = function() {
[Link]("Hi there!");
};
sayHi();
🔍 Scope (Global vs Local)
Scope defines where variables are accessible within your code.
let globalVar = "I'm global";
function example() {
let localVar = "I'm local";
[Link](globalVar); // ✅
[Link](localVar); // ✅
}
example();
[Link](globalVar); // ✅
[Link](localVar); // ❌ Error
📦 Block Scope with let/const
`let` and `const` are block-scoped. They are limited to `{}` they’re
defined in.
{
let blockVar = "inside block";
[Link](blockVar); // ✅
[Link](blockVar); // ❌ Error
