📦 Section 1 – JavaScript on Objects and Arrays

🧠 Why I Learned This

Arrays and objects are fundamental building blocks in web development. They allow you to group and organize related data efficiently — a key skill for managing real-world applications like storing products, tasks, users, and much more.

🔍 What It Helps Me Do

• • Store multiple items such as products, usernames, and tasks using arrays
• • Define detailed information about each item using objects
• • Combine arrays and objects to represent complex data structures like shopping carts
• • Use loops, including nested loops, to display or manipulate data
• • Disable UI buttons after an action using JavaScript to improve user experience

📋 Arrays Overview

Arrays are ordered collections indexed starting from 0 and denoted by square brackets []. Use arrays when you need to store multiple items of data, for example:

      
      // Example array of common use cases
      const items = ["Tasks", "Usernames", "Jobs", "Shopping cart items"];
      
        

🧱 Objects Overview

Objects are collections of key-value pairs, enclosed in curly braces {}. They let you group related data into a single entity:

      
      // Example product object
      const product = {
        name: "T-Shirt",
        image: "tshirt.jpg",
        price: 25
      };
      
        

Example: A shopping cart or wishlist uses objects to represent each product with detailed info.

🛠️ Working with Arrays

JavaScript arrays come with many useful built-in methods to manage your data easily:

• array.length – Returns the number of elements
• array.sort() – Sorts elements alphabetically (for strings) or numerically with a compare function
• array.push() – Adds an item to the end
• array.pop() – Removes the last item
• array.unshift() – Adds an item to the beginning
• array.shift() – Removes the first item
• array.forEach() – Executes a function once for each item

      
      // Example:
      const fruits = ["apple", "banana"];
      
      // Add to end
      fruits.push("mango");       // ["apple", "banana", "mango"]
      
      // Remove from end
      fruits.pop();               // ["apple", "banana"]
      
      // Add to beginning
      fruits.unshift("orange");   // ["orange", "apple", "banana"]
      
      // Remove from beginning
      fruits.shift();             // ["apple", "banana"]
      
      // Loop through array using forEach
      fruits.forEach((fruit, index) => {
        console.log(`Item ${index + 1}: ${fruit}`);
      });
      
        

🧪 Example Use

      
      // Example array
      const cars = ["Toyota", "Honda", "BMW"];
      
      console.log(cars.length); // Output: 3
      cars.sort();              // Sorts alphabetically: ["BMW", "Honda", "Toyota"]
      
        

🔁 Looping with Arrays

Loops are essential to iterate through arrays — useful for rendering or processing each item:

      
      // Basic for loop
      for (let i = 0; i < array.length; i++) {
        console.log(array[i]);
      }
      
        

🔂 Nested Loops & Complex Data

Nested loops come in handy when working with more complex structures such as:

• • Arrays inside arrays
• • Arrays of objects
• • Objects containing other objects or arrays

Example: In an eCommerce store, each product may belong to multiple categories.

      
      // Nested loop example
      for (let i = 0; i < products.length; i++) {
        for (let j = 0; j < products[i].categories.length; j++) {
          console.log(products[i].categories[j]);
        }
      }
      
        

Whenever your data contains nested arrays or objects, nested loops become necessary to access all elements.

⏳ While Loop

A while loop repeatedly executes code while a condition remains true.

      
      // While loop syntax
      while (condition) {
        // Code to run repeatedly
      }
      
        

🚫 Disabling a Button After Click

Use the disabled property to prevent users from clicking a button multiple times, such as after submitting a form.

      
      // HTML
      <button id="submitBtn">Submit</button>
      
      // JavaScript
      document.getElementById("submitBtn").disabled = true;
      
        

🚀 Lessons Learned

• • Arrays store multiple values in one variable
• • Objects store detailed information using key-value pairs
• • Loops allow you to iterate through data efficiently
• • Nested loops are essential for deeply nested data structures
• • Built-in methods like length, sort(), and forEach() simplify array management
• • The disabled attribute improves user experience by preventing duplicate actions

🖼️ Screenshots of the Project

Below are two screenshots showing the code in action, demonstrating use of forEach() with arrays and objects.

🔗 View on GitHub

Explore the full source code or try the live version on GitHub:

Source: goodnotes.com

DOM will be explained later in my documentation