Arrays | Basic Coding Concepts

What if you need to store a list of things—like names, scores, or shopping items? Arrays let you keep multiple values together in a single variable, making it easy to organize and work with collections of data.

What is an Array?

An array is like a numbered list of values. Each item in the array has an index—its position in the list.

📋

Real-World Analogy

Think of a train with numbered cars. Each car (element) has a number (index), and you can walk to any car directly if you know its number. That's exactly how arrays work!

Interactive Array Explorer

Creating Arrays

You create an array using square brackets []:

// Array of strings
let fruits = ["apple", "banana", "cherry"];

// Array of numbers
let scores = [85, 90, 78, 92];

// Array of mixed types
let mixed = ["hello", 42, true, null];

// Empty array
let empty = [];

Array Indexing

Important: Arrays are zero-indexed. The first item is at index 0, not 1!

"apple"

"banana"

"cherry"

index 0

index 1

index 2

let fruits = ["apple", "banana", "cherry"];

console.log(fruits[0]);  // "apple"
console.log(fruits[1]);  // "banana"
console.log(fruits[2]);  // "cherry"
console.log(fruits[3]);  // undefined (doesn't exist)

// Get the last item
console.log(fruits[fruits.length - 1]);  // "cherry"

Try It Yourself

Common Array Methods

Method	What It Does	Example
push()	Add to end	fruits.push("grape")
pop()	Remove from end	fruits.pop()
unshift()	Add to beginning	fruits.unshift("kiwi")
shift()	Remove from beginning	fruits.shift()
length	Get number of items	fruits.length
indexOf()	Find item's position	fruits.indexOf("banana")
includes()	Check if item exists	fruits.includes("apple")

Modifying Array Items

let colors = ["red", "green", "blue"];

// Change an item
colors[1] = "yellow";
console.log(colors);  // ["red", "yellow", "blue"]

// Add at specific position
colors[3] = "purple";
console.log(colors);  // ["red", "yellow", "blue", "purple"]

Looping Through Arrays

let fruits = ["apple", "banana", "cherry"];

// for...of (most readable)
for (let fruit of fruits) {
  console.log(fruit);
}

// forEach method
fruits.forEach(function(fruit, index) {
  console.log(index + ": " + fruit);
});

// Traditional for loop (when you need index control)
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

Useful Array Methods

let numbers = [1, 2, 3, 4, 5];

// map - transform each element
let doubled = numbers.map(n => n * 2);
// [2, 4, 6, 8, 10]

// filter - keep only matching elements
let evens = numbers.filter(n => n % 2 === 0);
// [2, 4]

// find - get first matching element
let firstBig = numbers.find(n => n > 3);
// 4

// reduce - combine into single value
let sum = numbers.reduce((total, n) => total + n, 0);
// 15

// slice - get a portion (doesn't modify original)
let firstThree = numbers.slice(0, 3);
// [1, 2, 3]

// splice - add/remove items (modifies original)
numbers.splice(2, 1, 10);  // At index 2, remove 1 item, add 10
// [1, 2, 10, 4, 5]

map, filter, slice

Return a new array, original unchanged

push, pop, splice

Modify the original array

Quick Quiz

Key Takeaways

Arrays store multiple values in a single variable
Arrays are zero-indexed (first item is at index 0)
Use push() and pop() to add/remove from the end
Use length to get the number of items
map(), filter(), and reduce() are powerful array methods
Some methods modify the array, others return a new one

What's Next?

Arrays are great for lists, but what about more complex data? Next, learn about objects—how to group related data with named properties!