JavaScript Arrays

---

A JavaScript array is an ordered collection of values that allows you to store multiple elements in a single variable. Arrays provide a structured way to handle and manipulate data efficiently.

---

🖇️ Visualizing an Array

• An array can be visualized like a column in a spreadsheet where:
  • The array name acts as the column header.
  • Each element in the array has an index (position number), starting from 0.

---

🛠️ Creating an Array

You can create an array in different ways:

🔹 Using the Array Constructor:

var myArray = new Array("Apple", "Banana", "Cherry");
🔹 Using Square Brackets (Recommended):
javascript
var myArray = ["Apple", "Banana", "Cherry"];
🔍 Accessing Elements in an Array
Array elements can be accessed using their index number, which starts from 0.

Example:
javascript
var fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[0]); // Output: Apple
console.log(fruits[1]); // Output: Banana
console.log(fruits[2]); // Output: Cherry
🔄 Modifying an Array
You can modify an element by accessing it via its index:

Example:
javascript
var fruits = ["Apple", "Banana", "Cherry"];
fruits[1] = "Blueberry"; // Replaces 'Banana' with 'Blueberry'
console.log(fruits); // Output: ["Apple", "Blueberry", "Cherry"]
🔢 Array Length Property
The .length property returns the total number of elements in an array:

Example:
javascript
var cars = ["Tesla", "BMW", "Mercedes"];
console.log(cars.length); // Output: 3
🔄 Looping Through an Array
Using a for loop to iterate over array elements:

Example:
javascript
var colors = ["Red", "Green", "Blue"];

for (var i = 0; i < colors.length; i++) {
    console.log(colors[i]);
}
🏗️ Multi-Dimensional Arrays
Arrays can hold multiple arrays, creating a grid-like structure:

Example:
javascript
var emailList = [
    ["President", "Paul Smith", "psmith@domain.com"],
    ["Vice President", "Laura Stevens", "lstevens@domain.com"],
    ["General Manager", "Mary Larsen", "mlarsen@domain.com"]
];

// Accessing "Vice President's" email
console.log(emailList[1][2]); // Output: lstevens@domain.com
⚡ Common Array Methods
Method	Description	Example
.push()	Adds an element to the end	array.push("NewItem")
.pop()	Removes the last element	array.pop()
.shift()	Removes the first element	array.shift()
.unshift()	Adds an element to the beginning	array.unshift("NewItem")
.splice()	Adds/Removes elements at a position	array.splice(1, 1, "NewItem")
.slice()	Extracts a section of an array	array.slice(1, 3)
.indexOf()	Finds index of an element	array.indexOf("Item")
.includes()	Checks if an element exists	array.includes("Item")
🎯 Example: Rotating Banner Using Arrays
JavaScript Code:
javascript
var bannerImg = ["image-1.jpg", "image-2.jpg", "image-3.jpg"];
var index = 0;

function cycleBanner() {
    document.getElementById("banner").src = bannerImg[index];
    index = (index + 1) % bannerImg.length; // Loops back to first image
    setTimeout(cycleBanner, 3000); // Change every 3 seconds
}

window.onload = cycleBanner;
HTML Code:
html
<img id="banner" src="image-1.jpg">
🚀 Conclusion
Arrays are powerful and flexible for handling lists of data.

They can store multiple data types in a single variable.

Built-in methods make data manipulation easy and efficient.

💡 Mastering JavaScript arrays is essential for handling dynamic data in modern web development!