<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Destructuring in JavaScript</title>
</head>
<body>
<h1>JavaScript Destructuring Examples</h1>
<script>
// ARRAY DESTRUCTURING
// 1. Basic Array Destructuring
const fruits = ["Apple", "Banana", "Cherry"];
const [firstFruit, secondFruit, thirdFruit] = fruits;
console.log("Basic Array Destructuring:");
console.log(firstFruit);
console.log(secondFruit);
console.log(thirdFruit);
console.log("------------");
// 2. Skipping Elements
const numbers = [1, 2, 3, 4, 5];
const [, secondNum, , fourthNum] = numbers;
console.log("Skipping Elements:");
console.log(secondNum);
console.log(fourthNum);
console.log("------------");
// 3. Default Values
const colors = ["Red"];
const [primaryColor, secondaryColor = "Green"] = colors;
console.log("Default Values:");
console.log(primaryColor);
console.log(secondaryColor);
console.log("------------");
// 4. Rest Operator with Arrays
const languages = ["JavaScript", "Python", "Ruby", "C++"];
const [firstLang, ...otherLangs] = languages;
console.log("Rest Operator with Arrays:");
console.log(firstLang);
console.log(otherLangs);
console.log("------------");
// OBJECT DESTRUCTURING
// 1. Basic Object Destructuring
const person = {
name: "Alice",
age: 25,
country: "USA"
};
const { name, age, country } = person;
console.log("Basic Object Destructuring:");
console.log(name);
console.log(age);
console.log(country);
console.log("------------");
// 2. Renaming Variables
const student = {
fullName: "John Doe",
grade: "A"
};
const { fullName: studentName, grade: finalGrade } = student;
console.log("Renaming Variables:");
console.log(studentName);
console.log(finalGrade);
console.log("------------");
// 3. Default Values in Objects
const settings = {
theme: "dark"
};
const { theme, fontSize = 16 } = settings;
console.log("Default Values in Objects:");
console.log(theme);
console.log(fontSize);
console.log("------------");
// 4. Rest Operator with Objects
const car = {
make: "Toyota",
model: "Corolla",
year: 2021,
color: "Blue"
};
const { make, model, ...otherDetails } = car;
console.log("Rest Operator with Objects:");
console.log(make);
console.log(model);
console.log(otherDetails);
console.log("------------");
// FUNCTION PARAMETERS DESTRUCTURING
// 1. Array Destructuring in Function Parameters
function printFirstTwo([first, second]) {
console.log("Array Destructuring in Function Parameters:");
console.log("First:", first);
console.log("Second:", second);
}
printFirstTwo(["Apple", "Banana", "Cherry"]);
console.log("------------");
// 2. Object Destructuring in Function Parameters
function displayUserInfo({ username, email }) {
console.log("Object Destructuring in Function Parameters:");
console.log("Username:", username);
console.log("Email:", email);
}
displayUserInfo({ username: "johndoe", email: "johndoe@example.com" });
console.log("------------");
</script>
</body>
</html>