What is an Array?
-
- An array is like a numbered list where each element has an index that identifies its position.
- Every item has an index, and the index represents the position in the list, so you know exactly how data is organized.
- A car has a number, and that number can be compared to an index because both identify a specific element.
- Arrays work by using the index to access an element directly instead of checking every item one by one.
- You can Think of reading an array like taking a train to a chosen stop instead of a walk through every element, because the index points to the required position.
- Important: Arrays use zero-based indexing, so the first element is stored at index 0.
How to Create Arrays
Arrays are created by placing one or more values inside square brackets ([]), with each value separated by a comma.
Example:
// Example 1: Array of numbers let numbers = [10, 20, 30, 40]; // Example 2: Array of strings let fruits = ["Apple", "Banana", "Orange"]; // Example 3: Array of mixed values let data = [1, "Book", true, 3.5];
10
Arrays
Arrays store ordered lists of values. Reach any item by its index, starting at zero.
Output
Common Array Methods
| Method | Purpose | Example |
| push() | Adds a new value to the end of an array | colors.push(“Purple”) |
| pop() | Removes the last value from an array | colors.pop() |
| unshift() | Adds a new value to the beginning of an array | colors.unshift(“Black”) |
| shift() | Removes the first value from an array | colors.shift() |
| length | Returns the total number of values in an array | colors.length |
| indexOf() | Finds the index of a specified value | colors.indexOf(“Green”) |
| includes() | Returns true if a value exists in the array | colors.includes(“Blue”) |
Updating Array Elements
Change an array element by assigning a new value to its index.
let cities = ["London", "Paris", "Tokyo"]; // Update an existing element cities[0] = "Berlin"; console.log(cities); // ["Berlin", "Paris", "Tokyo"] // Add a new element using an index cities[3] = "Sydney"; console.log(cities); // ["Berlin", "Paris", "Tokyo", "Sydney"]
Iterating Over an Array
let scores = [85, 92, 78]; // for...of loop for (let score of scores) { console.log(score); } // forEach method scores.forEach(function(score, index) { console.log("Score " + index + ": " + score); }); // Traditional for loop for (let i = 0; i < scores.length; i++) { console.log(scores[i]); }
Useful Array Methods
map()
Creates a new array by applying a function to every element.
JavaScript let prices = [10, 20, 30]; let discounted = prices.map(price => price - 5); console.log(discounted); // [5, 15, 25]
filter()
Creates a new array containing only the elements that match a condition.
JavaScript let ages = [12, 18, 25, 15]; let adults = ages.filter(age => age >= 18); console.log(adults); // [18, 25]
find()
Returns the first element that satisfies a condition.
JavaScript let temperatures = [18, 22, 27, 30]; let hotDay = temperatures.find(temp => temp > 25); console.log(hotDay); // 27
reduce()
Combines all array elements into a single value.
JavaScript let marks = [70, 85, 90]; let totalMarks = marks.reduce((total, mark) => total + mark, 0); console.log(totalMarks); // 245
slice()
Returns a selected portion of an array without changing the original array.
JavaScript let months = ["Jan", "Feb", "Mar", "Apr"]; let firstTwoMonths = months.slice(0, 2); console.log(firstTwoMonths); // ["Jan", "Feb"]
splice()
Adds, removes, or replaces elements in the original array.
JavaScript let animals = ["Cat", "Dog", "Bird"]; animals.splice(1, 1, "Rabbit"); console.log(animals); // ["Cat", "Rabbit", "Bird"]
Arrays Quiz
Learn how arrays store ordered lists of values.
0%
What are the key takeaways?
- Arrays store multiple values in a single variable, making related items available through an index.
- Arrays are zero-indexed, so the first item uses index 0 instead of one.
- push() and pop() add/remove elements at the end of an array.
- The length property gets the number of items currently stored in an array.
- map(), filter(), and reduce() are powerful array methods that process data in different ways.
- Some methods modify the original array, while others return a new one with updated values.