Java Script
Back Next

JavaScript Arrays


An array in JavaScript is a special type of variable that can store multiple values in a single container. Think of it as a list or collection of items. Each item in an array is called an element, and each element has a position number called an index, starting from 0.


1️⃣ Creating an Array

You can create an array using square brackets [ ]:

let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits);
  • fruits is an array containing 3 elements.
  • Index positions:
  • fruits[0] → "Apple"
  • fruits[1] → "Banana"
  • fruits[2] → "Cherry"


2️⃣ Array Length

The length property tells you how many elements are in an array:

let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits.length); // 3


3️⃣ Accessing Elements

You can access array elements using their index:

let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[0]); // Apple
console.log(fruits[2]); // Cherry
  • Index starts at 0
  • The last element is at index length - 1


4️⃣ Modifying Elements

You can change, add, or remove elements:

let fruits = ["Apple", "Banana", "Cherry"];

// Modify element
fruits[1] = "Blueberry"; // Change "Banana" to "Blueberry"

// Add element at end
fruits.push("Mango");

// Remove last element
fruits.pop();

// Add element at beginning
fruits.unshift("Strawberry");

// Remove first element
fruits.shift();

console.log(fruits);


5️⃣ Looping Through an Array

Arrays are often processed using loops.

Using for loop

let fruits = ["Apple", "Banana", "Cherry"];

for(let i = 0; i < fruits.length; i++) {
  console.log("Fruit at index " + i + ": " + fruits[i]);
}

Using for...of loop (simpler)

for(let fruit of fruits) {
  console.log("Fruit: " + fruit);
}


Compilation of Entire Code

Explanation:

  • Creates an array fruits
  • Modifies and adds elements
  • Displays array length
  • Loops through each element using a for loop
  • Updates the page dynamically


Example Code:
<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Array Example</title>
  <style>
    body { font-family: Arial; padding: 20px; }
    button { padding: 10px 20px; margin: 5px; cursor: pointer; }
    p { font-size: 18px; color: darkblue; }
  </style>
</head>
<body>

  <h1>JavaScript Arrays Demo</h1>

  <p id="demo">Click the button to see array operations</p>
  <button onclick="arrayDemo()">Show Array</button>

  <script>
    function arrayDemo() {
      // Create array
      let fruits = ["Apple", "Banana", "Cherry"];

      // Modify elements
      fruits[1] = "Blueberry"; // Replace Banana with Blueberry
      fruits.push("Mango");     // Add Mango at end

      // Display length
      let message = "Array length: " + fruits.length + "<br>";

      // Loop through array
      message += "Fruits List:<br>";
      for(let i = 0; i < fruits.length; i++) {
        message += "Index " + i + ": " + fruits[i] + "<br>";
      }

      document.getElementById("demo").innerHTML = message;
    }
  </script>

</body>
</html>
Java Script
Introduction Application of JavaScript Defining JavaScript Client-Side JavaScript JavaScript Syntax JavaScript Varaibles JavaScript Operators JavaScript Statements JavaScript Arrays Sorting JavaScript Array JavaScript Functions JavaScript Objects JavaScript Switch Case & While Loops JavaScript For & For-In Loops JavaScript Cookies JavaScript Form Validation JavaScript Error and Exception Handling JavaScript Animation
All Courses
Bootstrap Content Writing CSS Cyber Security Data Analysis Deep Learning Email Marketing Excel HTML Java Script Machine Learning MySQLi PHP Power Bi Python for Analysis SEO SMM SQL