What is an Array?
An [array] is an ordered list of values. Instead of declaring individual variables for fifty product names, we can group them together in a single, indexable array container.
To read the technical standards, refer to the ECMAScript Array Specifications.
---
Array Basics: Creating and Accessing
Arrays are created using square brackets []. Elements are zero-indexed, meaning the very first item is at index position 0.
#### Code Example: Indexing arrays
let shoppingList = ["Apples", "Bananas", "Coffee", "Bread"];
console.log("First Item:", shoppingList[0]);
console.log("Array Length:", shoppingList.length);
// Update an item
shoppingList[1] = "Blueberries";
console.log("Updated List:", shoppingList);
#### Visual Output Demonstration:
First Item: Apples
Array Length: 4
Updated List: [ 'Apples', 'Blueberries', 'Coffee', 'Bread' ]
---
Core Array Manipulation Methods
JavaScript provides dynamic methods to insert or remove items from arrays:
* .push(): Add item to the end of the array.
* .pop(): Remove the last item from the array.
* .unshift(): Add item to the beginning of the array.
* .shift(): Remove the first item from the array.
#### Code Example: Adding/Removing Elements
let trackList = ["Track 1", "Track 2"];
trackList.push("Track 3");
console.log("After Push:", trackList);
trackList.shift();
console.log("After Shift:", trackList);
#### Visual Output Demonstration:
After Push: [ 'Track 1', 'Track 2', 'Track 3' ]
After Shift: [ 'Track 2', 'Track 3' ]
---
Advanced Iteration Methods: map and filter
In modern JS, instead of manually looping over arrays using for loops, we use built-in array methods to transform and filter data.
#### Code Example: Map and Filter in Action
let numericValues = [1, 2, 3, 4, 5, 6];
// Map: Double all numeric values
let doubledValues = numericValues.map(num => num * 2);
console.log("Doubled:", doubledValues);
// Filter: Keep only numbers greater than 3
let filteredValues = numericValues.filter(num => num > 3);
console.log("Filtered:", filteredValues);
#### Visual Output Demonstration:
Doubled: [ 2, 4, 6, 8, 10, 12 ]
Filtered: [ 4, 5, 6 ]
---
Frequently Asked Questions (FAQs)
#### Q1: What happens if I try to access an index that doesn't exist in an array?
* JavaScript will return undefined instead of throwing an error. For example, if an array has 3 items, accessing arr[10] returns undefined.
#### Q2: Can a single JavaScript array store different types of data?
* Yes! JavaScript arrays are heterogeneous, meaning you can mix numbers, strings, booleans, and even other arrays or objects within a single array container.
#### Q3: What is the difference between .map() and .forEach()?
* .forEach() runs a function on every item in the array but does not return anything. .map() runs a function on every item and returns a new array containing the transformed values, leaving the original array unchanged.
