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
console.log(5 == "5"); // true (loose equality)
console.log(5 === "5"); // false (strict equality)
// Logical Operators
let isTrue = true && false; // false
Conditional Statements
// If-Else Statement
if (age >= 18) {
console.log("Adult");
} else {
console.log("Minor");
}
// Switch Case
let fruit = "apple";
switch (fruit) {
case "banana":
console.log("It's a banana!");
break;
case "apple":
console.log("It's an apple!");
break;
default:
console.log("Unknown fruit");
}
Loops
// For Loop
for (let i = 0; i < 5; i++) {
console.log("Iteration:", i);
}
// While Loop
let count = 0;
while (count < 3) {
console.log("Count:", count);
count++;
}
Functions
// Regular Function
function greet(name) {
return "Hello, " + name;
}
console.log(greet("Alice"));
// Arrow Function
const multiply = (a, b) => a * b;
console.log(multiply(4, 5));
Arrays and Methods
// Array Example
let numbers = [10, 20, 30, 40];
// Array Methods
numbers.push(50); // Adds to the end
numbers.pop(); // Removes last element
numbers.map(num => num * 2); // [20, 40, 60, 80]
Objects
// Object Example
let person = {
name: "Alice",
age: 25,
greet: function() {
return "Hello, " + this.name;
}
};
console.log(person.greet());
DOM Manipulation
// Selecting an Element
let heading = document.getElementById("title");
// Changing Content
heading.innerHTML = "New Title";
// Adding an Event Listener
document.getElementById("btn").addEventListener("click", function() {
alert("Button clicked!");
});
Asynchronous JavaScript
// Using setTimeout
setTimeout(() => console.log("This runs after 2 seconds"), 2000);
// Fetch API Example
fetch("https://jsonplaceholder.typicode.com/posts")
.then(response => response.json())
.then(data => console.log(data));
Closures and Lexical Scope
// Closure Example
function outerFunction(outerVar) {
return function innerFunction(innerVar) {
return `Outer: ${outerVar}, Inner: ${innerVar}`;
};
}
const newFunc = outerFunction("Hello");
console.log(newFunc("World")); // "Outer: Hello, Inner: World"
Prototype and Inheritance
// Prototype Example
function Person(name) {
this.name = name;
}
Person.prototype.greet = function() {
console.log("Hello, " + this.name);
};
let person1 = new Person("Alice");
person1.greet(); // "Hello, Alice"
this Keyword and Bindings
// this in Different Contexts
const obj = {
name: "Alice",
showName: function() {
console.log(this.name);
}
};
obj.showName(); // "Alice"
const anotherFunc = obj.showName.bind({ name: "Bob" });
anotherFunc(); // "Bob"
Higher-Order Functions
// Higher-Order Function Example
function higherOrderFunction(callback) {
return callback("Hello");
}
function callbackFunction(message) {
return message + " World!";
}
console.log(higherOrderFunction(callbackFunction)); // "Hello World!"
Web APIs
// Local Storage Example
localStorage.setItem("name", "Alice");
console.log(localStorage.getItem("name")); // "Alice"
// Fetch API Example
fetch("https://api.example.com/data")
.then(response => response.json())
.then(data => console.log(data));
Performance Optimization
// Debouncing Example
function debounce(func, delay) {
let timeout;
return function(...args) {
clearTimeout(timeout);
timeout = setTimeout(() => func(...args), delay);
};
}
const logMessage = debounce(() => console.log("Debounced Call"), 2000);
logMessage(); // Waits 2 seconds before executing
Node.js Basics
// Simple Node.js Server
const http = require("http");
const server = http.createServer((req, res) => {
res.writeHead(200, { "Content-Type": "text/plain" });
res.end("Hello, Node.js!");
});
server.listen(3000, () => console.log("Server running on port 3000"));
