JavaScript Arrays
An array is an ordered collection that lets you store many values in a single variable and access them by their numeric position.
What is an array?
When you need to keep a list of related values together, creating a separate variable for each one quickly becomes unmanageable. An array solves this by holding an ordered sequence of values inside one variable. Each value is called an element, and every element has a numbered position known as its index. JavaScript arrays are zero-based, which means the first element sits at index 0, the second at index 1, and so on.
Arrays in JavaScript are flexible. A single array can mix numbers, strings, booleans, objects, and even other arrays, and it can grow or shrink at runtime. Because arrays are objects under the hood, they come with a rich set of built-in properties and methods for working with their contents.
Creating and reading arrays
<!DOCTYPE html>
<html>
<body>
<h2>Creating and reading arrays</h2>
<script>
// The array literal is the most common way to create an array
const fruits = ["apple", "banana", "cherry"];
// Access elements by their zero-based index
console.log(fruits[0]); // "apple"
console.log(fruits[2]); // "cherry"
// length tells you how many elements the array holds
console.log(fruits.length); // 3
// The last element is always at index length - 1
console.log(fruits[fruits.length - 1]); // "cherry"
</script>
</body>
</html>Changing array contents
You can add, replace, or remove elements after an array is created. Assigning to an index replaces the value at that position, push and pop work at the end of the array, and unshift and shift work at the beginning. Notice that even though fruits is declared with const, you can still modify its contents; const only prevents reassigning the variable to a different array.
Adding and removing elements
<!DOCTYPE html>
<html>
<body>
<h2>Adding and removing elements</h2>
<script>
const colors = ["red", "green"];
colors.push("blue"); // add to the end -> ["red", "green", "blue"]
colors.unshift("yellow"); // add to the start -> ["yellow", "red", "green", "blue"]
const last = colors.pop(); // remove from the end, returns "blue"
const first = colors.shift(); // remove from the start, returns "yellow"
console.log(colors); // ["red", "green"]
console.log(first, last); // "yellow" "blue"
</script>
</body>
</html>- Arrays are zero-indexed: the first element is at index 0.
- The length property reflects the number of elements and updates automatically.
- A single array can hold values of different types.
- Use Array.isArray(value) to reliably check whether something is an array.
Exercise: JavaScript Arrays
Does Array.prototype.map() modify the original array?
