Arrays - Intro to Programming Tutorial

Quick Summary

Arrays store ordered lists accessed by index (starting at 0). They have built-in methods for adding, removing, searching, and transforming data. Arrays are one of the most commonly used data structures in programming.

What is an Array?

An array is an ordered collection of values. Each value has an index (position) starting from 0.

const fruits = ["apple", "banana", "cherry"];
//    index:      0         1         2

Creating Arrays

const empty = [];
const numbers = [1, 2, 3, 4, 5];
const mixed = ["text", 42, true, null];
const nested = [[1, 2], [3, 4]]; // 2D array

Accessing Elements

const colors = ["red", "green", "blue"];
colors[0];  // "red" (first element)
colors[2];  // "blue" (third element)
colors[-1]; // undefined (no negative indices in JS)
colors[99]; // undefined (out of bounds)

Array Properties

const items = [1, 2, 3];
items.length; // 3 (number of elements)

Common Array Methods

Adding/Removing:

const arr = [1, 2, 3];
arr.push(4);      // Add to end → [1, 2, 3, 4]
arr.pop();        // Remove from end → [1, 2, 3]
arr.unshift(0);   // Add to start → [0, 1, 2, 3]
arr.shift();      // Remove from start → [1, 2, 3]

Searching:

const nums = [1, 2, 3, 4, 5];
nums.includes(3);    // true
nums.indexOf(3);     // 2 (index of first match)
nums.find(n => n > 3); // 4 (first match)

Transforming:

const nums = [1, 2, 3];
nums.map(n => n * 2);      // [2, 4, 6]
nums.filter(n => n > 1);   // [2, 3]
nums.reduce((sum, n) => sum + n, 0); // 6

Other Useful Methods:

[1, 2].concat([3, 4]);   // [1, 2, 3, 4]
[3, 1, 2].sort();        // [1, 2, 3]
[1, 2, 3].reverse();     // [3, 2, 1]
[1, 2, 3].join("-");     // "1-2-3"
"a-b-c".split("-");      // ["a", "b", "c"]

Try It Yourself

Here's a practical example you can try. Copy this code and run it in your browser's console (press F12 to open developer tools) or in the Code Playground.

// Creating arrays
const fruits = ["apple", "banana", "cherry"];
const numbers = [10, 20, 30, 40, 50];

// Accessing by index (starts at 0)
console.log(fruits[0]);    // "apple"
console.log(fruits[2]);    // "cherry"
console.log(fruits.length); // 3

// Modifying arrays
fruits.push("date");        // Add to end
console.log(fruits);        // ["apple", "banana", "cherry", "date"]

fruits.pop();               // Remove from end
console.log(fruits);        // ["apple", "banana", "cherry"]

// Useful array methods
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [20, 40, 60, 80, 100]

const bigNumbers = numbers.filter(n => n > 25);
console.log(bigNumbers); // [30, 40, 50]

const total = numbers.reduce((sum, n) => sum + n, 0);
console.log(total); // 150

// Checking if array contains a value
console.log(fruits.includes("banana")); // true
console.log(fruits.indexOf("cherry"));  // 2

// Combining arrays
const moreFruits = ["elderberry", "fig"];
const allFruits = fruits.concat(moreFruits);
// or: const allFruits = [...fruits, ...moreFruits];

Key Takeaways

✓Store ordered lists of data that can grow or shrink.
✓Practice with real code examples to solidify your understanding
✓This concept builds the foundation for more advanced topics