Destructuring on arrays and objects

PHOTO EMBED

Sun Nov 03 2024 09:44:31 GMT+0000 (Coordinated Universal Time)

Saved by @login123 

<!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>
content_copyCOPY