Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Indexed collections in JavaScript
JavaScript provides indexed collections that allow you to store and access elements using numeric indices. Arrays are the most common indexed collection, where each element has a position (index) starting from 0.
What are Indexed Collections?
Indexed collections are data structures where elements are accessed using numerical indices. In JavaScript, arrays are the primary indexed collection type, allowing you to store multiple values and retrieve them using their position.
Basic Array Creation and Access
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Indexed Collections</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
padding: 20px;
}
.result {
font-size: 18px;
font-weight: 500;
color: blueviolet;
margin: 10px 0;
}
button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Indexed Collections in JavaScript</h1>
<div class="result"></div>
<button class="btn">Show Array Elements</button>
<script>
let resEle = document.querySelector(".result");
let btnEle = document.querySelector(".btn");
btnEle.addEventListener("click", () => {
// Clear previous results
resEle.innerHTML = "";
// Create an array
let fruits = ["apple", "banana", "orange", "grape", "mango"];
// Display array elements with their indices
resEle.innerHTML += "<h3>Array Elements:</h3>";
fruits.forEach((item, index) => {
resEle.innerHTML += `fruits[${index}] = ${item}<br>`;
});
// Show array length
resEle.innerHTML += `<br><strong>Array Length: ${fruits.length}</strong>`;
});
</script>
</body>
</html>
Different Ways to Create Arrays
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Array Creation Methods</title>
</head>
<body>
<h1>Array Creation Methods</h1>
<div id="output"></div>
<script>
let output = document.getElementById("output");
// Method 1: Array literal
let numbers = [1, 2, 3, 4, 5];
// Method 2: Array constructor
let colors = new Array("red", "green", "blue");
// Method 3: Array.from()
let letters = Array.from("hello");
// Method 4: Array.of()
let mixed = Array.of(1, "two", true, null);
output.innerHTML = `
<h3>Array Literal:</h3>
${numbers.map((num, i) => `numbers[${i}] = ${num}`).join("<br>")}
<h3>Array Constructor:</h3>
${colors.map((color, i) => `colors[${i}] = ${color}`).join("<br>")}
<h3>Array.from():</h3>
${letters.map((letter, i) => `letters[${i}] = ${letter}`).join("<br>")}
<h3>Array.of():</h3>
${mixed.map((item, i) => `mixed[${i}] = ${item}`).join("<br>")}
`;
</script>
</body>
</html>
Common Array Operations
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Array Operations</title>
<style>
.operation {
margin: 15px 0;
padding: 10px;
background-color: #f8f9fa;
border-left: 4px solid #007bff;
}
</style>
</head>
<body>
<h1>Array Operations</h1>
<button onclick="performOperations()">Perform Array Operations</button>
<div id="results"></div>
<script>
function performOperations() {
let results = document.getElementById("results");
let arr = [10, 20, 30];
results.innerHTML = `
<div class="operation">
<strong>Original Array:</strong> [${arr.join(", ")}]
</div>
`;
// Adding elements
arr.push(40);
results.innerHTML += `
<div class="operation">
<strong>After push(40):</strong> [${arr.join(", ")}]
</div>
`;
arr.unshift(5);
results.innerHTML += `
<div class="operation">
<strong>After unshift(5):</strong> [${arr.join(", ")}]
</div>
`;
// Accessing elements
results.innerHTML += `
<div class="operation">
<strong>First element (index 0):</strong> ${arr[0]}<br>
<strong>Last element:</strong> ${arr[arr.length - 1]}
</div>
`;
// Removing elements
let removed = arr.pop();
results.innerHTML += `
<div class="operation">
<strong>After pop():</strong> [${arr.join(", ")}] (removed: ${removed})
</div>
`;
}
</script>
</body>
</html>
Key Features of Indexed Collections
- Zero-based indexing: Array indices start from 0
- Dynamic size: Arrays can grow and shrink during runtime
- Mixed data types: Arrays can store different types of values
- Built-in methods: Rich set of methods for manipulation and iteration
Conclusion
Indexed collections, primarily arrays, are fundamental data structures in JavaScript. They provide efficient storage and access to elements using numeric indices, making them essential for organizing and manipulating data in web applications.
Updated on: 2026-03-15T23:18:59+05:30
4K+ Views
Advertisements