Complete JavaScript Guide: Basics to Advanced
Introduction to JavaScript
JavaScript is a versatile programming language primarily used for web development. It enables
dynamic and interactive web applications.
Variables and Data Types
// Using var, let, and const
var oldVar = "This is var"; // Function-scoped
let newVar = "This is let"; // Block-scoped
const constVar = "This is const"; // Cannot be reassigned
// Data Types
let number = 42;
let string = "Hello, World!";
let boolean = true;
let array = [1, 2, 3];
let object = {name: "John", age: 25};
Operators
// Arithmetic Operators
let sum = 10 + 5;
let product = 10 * 5;
// Comparison Operators
[Link](5 == "5"); // true (loose equality)
[Link](5 === "5"); // false (strict equality)
// Logical Operators
let isTrue = true && false; // false
Conditional Statements
// If-Else Statement
if (age >= 18) {
[Link]("Adult");
} else {
[Link]("Minor");
}
// Switch Case
let fruit = "apple";
switch (fruit) {
case "banana":
[Link]("It's a banana!");
break;
case "apple":
[Link]("It's an apple!");
break;
default:
[Link]("Unknown fruit");
}
Loops
// For Loop
for (let i = 0; i < 5; i++) {
[Link]("Iteration:", i);
}
// While Loop
let count = 0;
while (count < 3) {
[Link]("Count:", count);
count++;
}
Functions
// Regular Function
function greet(name) {
return "Hello, " + name;
}
[Link](greet("Alice"));
// Arrow Function
const multiply = (a, b) => a * b;
[Link](multiply(4, 5));
Arrays and Methods
// Array Example
let numbers = [10, 20, 30, 40];
// Array Methods
[Link](50); // Adds to the end
[Link](); // Removes last element
[Link](num => num * 2); // [20, 40, 60, 80]
Objects
// Object Example
let person = {
name: "Alice",
age: 25,
greet: function() {
return "Hello, " + [Link];
}
};
[Link]([Link]());
DOM Manipulation
// Selecting an Element
let heading = [Link]("title");
// Changing Content
[Link] = "New Title";
// Adding an Event Listener
[Link]("btn").addEventListener("click", function() {
alert("Button clicked!");
});
Asynchronous JavaScript
// Using setTimeout
setTimeout(() => [Link]("This runs after 2 seconds"), 2000);
// Fetch API Example
fetch("[Link]
.then(response => [Link]())
.then(data => [Link](data));
Closures and Lexical Scope
// Closure Example
function outerFunction(outerVar) {
return function innerFunction(innerVar) {
return `Outer: ${outerVar}, Inner: ${innerVar}`;
};
}
const newFunc = outerFunction("Hello");
[Link](newFunc("World")); // "Outer: Hello, Inner: World"
Prototype and Inheritance
// Prototype Example
function Person(name) {
[Link] = name;
}
[Link] = function() {
[Link]("Hello, " + [Link]);
};
let person1 = new Person("Alice");
[Link](); // "Hello, Alice"
this Keyword and Bindings
// this in Different Contexts
const obj = {
name: "Alice",
showName: function() {
[Link]([Link]);
}
};
[Link](); // "Alice"
const anotherFunc = [Link]({ name: "Bob" });
anotherFunc(); // "Bob"
Higher-Order Functions
// Higher-Order Function Example
function higherOrderFunction(callback) {
return callback("Hello");
}
function callbackFunction(message) {
return message + " World!";
}
[Link](higherOrderFunction(callbackFunction)); // "Hello World!"
Web APIs
// Local Storage Example
[Link]("name", "Alice");
[Link]([Link]("name")); // "Alice"
// Fetch API Example
fetch("[Link]
.then(response => [Link]())
.then(data => [Link](data));
Performance Optimization
// Debouncing Example
function debounce(func, delay) {
let timeout;
return function(...args) {
clearTimeout(timeout);
timeout = setTimeout(() => func(...args), delay);
};
}
const logMessage = debounce(() => [Link]("Debounced Call"), 2000);
logMessage(); // Waits 2 seconds before executing
[Link] Basics
// Simple [Link] Server
const http = require("http");
const server = [Link]((req, res) => {
[Link](200, { "Content-Type": "text/plain" });
[Link]("Hello, [Link]!");
});
[Link](3000, () => [Link]("Server running on port 3000"));