# Comprehensive JavaScript Revision Notes
JavaScript is a powerful, versatile programming language widely used to create interactive and dynamic
web content. This guide offers a structured overview of JavaScript concepts, practical examples, and real-
world applications for thorough revision.
---
## 1. Basics of JavaScript
### Introduction
JavaScript is the backbone of modern web development, enabling dynamic updates, interactive
elements, and seamless server communication.
### Key Concepts
#### Variables
JavaScript uses `let`, `const`, and `var` to declare variables for storing data.
```javascript
let name = "John"; // Block-scoped
const age = 30; // Immutable
var city = "New York"; // Function-scoped
```
#### Data Types
JavaScript supports primitive types like `String`, `Number`, `Boolean`, and complex types like `Object`
and `Array`.
```javascript
let isAvailable = true; // Boolean
let score = 95.5; // Number
let user = { name: "Alice", age: 25 }; // Object
```
#### Operators
Operators are used for value manipulation and comparison.
```javascript
let sum = 10 + 5; // Arithmetic
let isEqual = 10 === 5; // Comparison
let result = true && false; // Logical
```
#### Control Structures
Control the execution flow with conditional statements.
```javascript
if (age > 18) {
console.log("Adult");
} else {
console.log("Minor");
```
---
## 2. Functions
### Definition
Functions are reusable blocks of code designed to perform specific tasks.
### Types of Functions
#### Function Declaration
```javascript
function greet(name) {
return `Hello, ${name}`;
console.log(greet("John")); // Hello, John
```
#### Function Expression
```javascript
const greet = function(name) {
return `Hi, ${name}`;
};
console.log(greet("Alice"));
```
#### Arrow Functions
Concise syntax introduced in ES6.
```javascript
const add = (a, b) => a + b;
console.log(add(5, 10)); // 15
```
---
## 3. Objects and Arrays
### Objects
Objects use key-value pairs to represent real-world entities.
```javascript
let car = { brand: "Tesla", model: "Model 3", year: 2023 };
console.log(car.brand); // Tesla
```
### Arrays
Ordered collections of values accessed by index.
```javascript
let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[1]); // Banana
```
### Iterating
Use loops or higher-order functions to process arrays.
```javascript
fruits.forEach(fruit => console.log(fruit));
```
---
## 4. DOM Manipulation
### Selecting Elements
Access and modify DOM elements dynamically.
```javascript
const header = document.querySelector("h1");
header.textContent = "Welcome to JavaScript";
```
### Event Handling
Respond to user interactions.
```javascript
const button = document.querySelector("button");
button.addEventListener("click", () => {
alert("Button clicked!");
});
```
### Modifying Styles
Update CSS properties programmatically.
```javascript
document.body.style.backgroundColor = "lightblue";
```
---
## 5. ES6+ Features
### Template Literals
Embed expressions within strings using backticks.
```javascript
const name = "John";
console.log(`Hello, ${name}!`); // Hello, John!
```
### Destructuring
Extract values from objects or arrays.
```javascript
const user = { name: "Alice", age: 25 };
const { name, age } = user;
console.log(name); // Alice
```
### Spread/Rest Operators
Expand arrays/objects or gather arguments.
```javascript
const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4];
console.log(arr2); // [1, 2, 3, 4]
```
### Modules
Modularize and organize JavaScript code.
```javascript
// myModule.js
export const greet = () => "Hello!";
// main.js
import { greet } from "./myModule.js";
console.log(greet());
```
---
## 6. Promises and Async/Await
### Promises
Manage asynchronous operations with `.then` and `.catch`.
```javascript
const fetchData = new Promise((resolve, reject) => {
setTimeout(() => resolve("Data Loaded"), 2000);
});
fetchData.then(data => console.log(data));
```
### Async/Await
Simplify asynchronous code with a synchronous-like syntax.
```javascript
const getData = async () => {
const response = await fetch("https://api.example.com/data");
const data = await response.json();
console.log(data);
};
getData();
```
---
## 7. Error Handling
### Try-Catch
Gracefully manage runtime errors.
```javascript
try {
JSON.parse("Invalid JSON");
} catch (error) {
console.error("Error:", error.message);
```
---
## 8. Real-Life Applications
### API Interaction
Fetch and display data from APIs.
```javascript
const getWeather = async (city) => {
const response = await fetch(`https://api.weatherapi.com/v1/current.json?key=API_KEY&q=${city}`);
const data = await response.json();
console.log(`${city} Temp: ${data.current.temp_c} °C`);
};
getWeather("New York");
```
### Form Validation
Ensure user inputs meet specified criteria.
```javascript
const form = document.querySelector("form");
form.addEventListener("submit", (e) => {
e.preventDefault();
const email = form.querySelector("input[type=email]").value;
if (!email.includes("@")) {
alert("Invalid Email");
} else {
alert("Form submitted");
});
```
### Interactive UI
Dynamically toggle UI themes.
```javascript
const toggleTheme = () => {
document.body.classList.toggle("dark-mode");
};
document.querySelector("#theme-button").addEventListener("click", toggleTheme);
```
---
## 9. Summary
This guide comprehensively covers JavaScript's foundational concepts, advanced features, and practical
applications. Practice these examples regularly to solidify your understanding and enhance your
programming skills.
