Module 6: Arrays
Arrays are ordered collections of values and one of the most fundamental data structures in JavaScript. Master arrays, and you'll be able to handle most data manipulation tasks.
1. Creating Arrays
1.1 Array Literals
const emptyArray = [];
const numbers = [1, 2, 3, 4, 5];
const mixed = [1, 'hello', true, null, { name: 'John' }];
1.2 Array Constructor
const arr = new Array(); // []
const arr2 = new Array(5); // [empty × 5]
const arr3 = new Array(1, 2, 3); // [1, 2, 3]
Best Practice
Prefer array literals [] over the new Array() constructor.
1.3 Array.of() & Array.from()
// Array.of - creates array from arguments
Array.of(1, 2, 3); // [1, 2, 3]
Array.of(5); // [5] (not empty array of length 5)
// Array.from - creates array from iterable
Array.from('hello'); // ['h', 'e', 'l', 'l', 'o']
Array.from({ length: 3 }, (_, i) => i); // [0, 1, 2]
Array.from(new Set([1, 2, 2, 3])); // [1, 2, 3]
2. Accessing Elements
const fruits = ['apple', 'banana', 'orange'];
// By index (0-based)
fruits[0]; // 'apple'
fruits[2]; // 'orange'
fruits[fruits.length - 1]; // 'orange' (last element)
// at() method (ES2022) - supports negative indices
fruits.at(0); // 'apple'
fruits.at(-1); // 'orange' (last element)
fruits.at(-2); // 'banana'
3. Array Properties
const numbers = [1, 2, 3, 4, 5];
// length
console.log(numbers.length); // 5
// Modifying length
numbers.length = 3;
console.log(numbers); // [1, 2, 3]
numbers.length = 5;
console.log(numbers); // [1, 2, 3, empty × 2]
4. Adding & Removing Elements
4.1 End of Array
const fruits = ['apple', 'banana'];
// push() - add to end (mutates)
fruits.push('orange'); // ['apple', 'banana', 'orange']
fruits.push('grape', 'kiwi'); // Multiple elements
// pop() - remove from end (mutates)
const last = fruits.pop(); // 'kiwi'
4.2 Beginning of Array
const fruits = ['banana', 'orange'];
// unshift() - add to beginning (mutates)
fruits.unshift('apple'); // ['apple', 'banana', 'orange']
// shift() - remove from beginning (mutates)
const first = fruits.shift(); // 'apple'
4.3 Arbitrary Position
const fruits = ['apple', 'banana', 'orange', 'grape'];
// splice(start, deleteCount, ...items)
// Remove elements
fruits.splice(1, 2); // Removes 'banana', 'orange'
// Add elements
fruits.splice(1, 0, 'kiwi', 'mango'); // Insert at index 1
// Replace elements
fruits.splice(1, 1, 'pear'); // Replace element at index 1
5. Immutable Operations
5.1 Creating Copies
const original = [1, 2, 3];
// Spread operator
const copy1 = [...original];
// Array.from()
const copy2 = Array.from(original);
// slice()
const copy3 = original.slice();
5.2 Concatenation
const arr1 = [1, 2];
const arr2 = [3, 4];
// concat()
const combined1 = arr1.concat(arr2); // [1, 2, 3, 4]
// Spread operator (modern)
const combined2 = [...arr1, ...arr2]; // [1, 2, 3, 4]
const combined3 = [...arr1, 5, 6, ...arr2]; // [1, 2, 5, 6, 3, 4]
5.3 Slicing
const numbers = [1, 2, 3, 4, 5];
// slice(start, end) - doesn't mutate
numbers.slice(1, 3); // [2, 3]
numbers.slice(2); // [3, 4, 5]
numbers.slice(-2); // [4, 5]
numbers.slice(); // Copy entire array
6. Searching Arrays
6.1 indexOf() & lastIndexOf()
const fruits = ['apple', 'banana', 'orange', 'banana'];
fruits.indexOf('banana'); // 1 (first occurrence)
fruits.lastIndexOf('banana'); // 3 (last occurrence)
fruits.indexOf('grape'); // -1 (not found)
6.2 includes()
const numbers = [1, 2, 3, 4, 5];
numbers.includes(3); // true
numbers.includes(10); // false
numbers.includes(3, 3); // false (search from index 3)
6.3 find() & findIndex()
const users = [
{ id: 1, name: 'John', age: 25 },
{ id: 2, name: 'Jane', age: 30 },
{ id: 3, name: 'Bob', age: 22 }
];
// find() - returns first matching element
const user = users.find(u => u.age > 25);
// { id: 2, name: 'Jane', age: 30 }
// findIndex() - returns index of first match
const index = users.findIndex(u => u.age > 25); // 1
// findLast() & findLastIndex() (ES2023)
const lastUser = users.findLast(u => u.age > 20);
7. Iteration Methods
7.1 forEach()
const numbers = [1, 2, 3];
numbers.forEach((num, index, array) => {
console.log(num, index);
});
// 1 0
// 2 1
// 3 2
7.2 map()
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
// [2, 4, 6, 8, 10]
const users = [
{ firstName: 'John', lastName: 'Doe' },
{ firstName: 'Jane', lastName: 'Smith' }
];
const fullNames = users.map(u => `${u.firstName} ${u.lastName}`);
// ['John Doe', 'Jane Smith']
7.3 filter()
const numbers = [1, 2, 3, 4, 5, 6];
const evens = numbers.filter(num => num % 2 === 0);
// [2, 4, 6]
const users = [
{ name: 'John', age: 25, active: true },
{ name: 'Jane', age: 30, active: false },
{ name: 'Bob', age: 22, active: true }
];
const activeUsers = users.filter(u => u.active);
const adults = users.filter(u => u.age >= 25);
7.4 reduce()
const numbers = [1, 2, 3, 4, 5];
// Sum
const sum = numbers.reduce((acc, num) => acc + num, 0); // 15
// Max
const max = numbers.reduce((max, num) => num > max ? num : max); // 5
// Object from array
const users = [
{ id: 1, name: 'John' },
{ id: 2, name: 'Jane' }
];
const usersById = users.reduce((acc, user) => {
acc[user.id] = user;
return acc;
}, {});
// { 1: { id: 1, name: 'John' }, 2: { id: 2, name: 'Jane' } }
// Count occurrences
const fruits = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];
const count = fruits.reduce((acc, fruit) => {
acc[fruit] = (acc[fruit] || 0) + 1;
return acc;
}, {});
// { apple: 3, banana: 2, orange: 1 }
7.5 reduceRight()
const numbers = [1, 2, 3, 4];
const result = numbers.reduceRight((acc, num) => acc + num, 0);
// Processes: 4, 3, 2, 1
8. Testing Arrays
8.1 some()
const numbers = [1, 2, 3, 4, 5];
// At least one element matches
numbers.some(num => num > 4); // true
numbers.some(num => num > 10); // false
const users = [
{ name: 'John', active: false },
{ name: 'Jane', active: true }
];
const hasActiveUser = users.some(u => u.active); // true
8.2 every()
const numbers = [2, 4, 6, 8];
// All elements match
numbers.every(num => num % 2 === 0); // true
numbers.every(num => num > 5); // false
const users = [
{ name: 'John', age: 25 },
{ name: 'Jane', age: 30 }
];
const allAdults = users.every(u => u.age >= 18); // true
9. Sorting Arrays
9.1 sort()
const numbers = [3, 1, 4, 1, 5, 9, 2, 6];
// Default: converts to strings and sorts
numbers.sort(); // [1, 1, 2, 3, 4, 5, 6, 9]
// Numeric sort
numbers.sort((a, b) => a - b); // Ascending
numbers.sort((a, b) => b - a); // Descending
// String sort
const fruits = ['banana', 'apple', 'orange'];
fruits.sort(); // ['apple', 'banana', 'orange']
// Case-insensitive
fruits.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
// Object sort
const users = [
{ name: 'John', age: 30 },
{ name: 'Jane', age: 25 },
{ name: 'Bob', age: 35 }
];
users.sort((a, b) => a.age - b.age); // Sort by age
users.sort((a, b) => a.name.localeCompare(b.name)); // Sort by name
sort() Mutates
sort() mutates the original array. Use [...arr].sort() to avoid mutation.
9.2 reverse()
const numbers = [1, 2, 3, 4, 5];
numbers.reverse(); // [5, 4, 3, 2, 1]
// Immutable reverse
const reversed = [...numbers].reverse();
10. Transforming Arrays
10.1 flat()
const nested = [1, [2, 3], [4, [5, 6]]];
nested.flat(); // [1, 2, 3, 4, [5, 6]]
nested.flat(2); // [1, 2, 3, 4, 5, 6]
nested.flat(Infinity); // Flatten all levels
10.2 flatMap()
const sentences = ['hello world', 'foo bar'];
// map + flat
sentences.flatMap(s => s.split(' '));
// ['hello', 'world', 'foo', 'bar']
// Useful for transforming and flattening in one step
const users = [
{ name: 'John', skills: ['JS', 'React'] },
{ name: 'Jane', skills: ['Python', 'Django'] }
];
const allSkills = users.flatMap(u => u.skills);
// ['JS', 'React', 'Python', 'Django']
10.3 join()
const fruits = ['apple', 'banana', 'orange'];
fruits.join(); // 'apple,banana,orange'
fruits.join(', '); // 'apple, banana, orange'
fruits.join(' - '); // 'apple - banana - orange'
fruits.join(''); // 'applebananaorange'
11. Array Destructuring (ES6)
const colors = ['red', 'green', 'blue'];
// Basic destructuring
const [first, second] = colors;
// first = 'red', second = 'green'
// Skip elements
const [, , third] = colors;
// third = 'blue'
// Rest operator
const [primary, ...others] = colors;
// primary = 'red', others = ['green', 'blue']
// Default values
const [a, b, c, d = 'yellow'] = colors;
// d = 'yellow'
// Swapping variables
let x = 1, y = 2;
[x, y] = [y, x]; // x = 2, y = 1
12. Multi-dimensional Arrays
// 2D array
const matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
// Accessing elements
matrix[0][0]; // 1
matrix[1][2]; // 6
// Iterating
for (const row of matrix) {
for (const cell of row) {
console.log(cell);
}
}
// Using flat()
matrix.flat(); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
13. Array-like Objects
// NodeList, arguments, strings are array-like
function sum() {
// Convert array-like to array
const args = Array.from(arguments);
return args.reduce((a, b) => a + b, 0);
}
// Modern alternative: rest parameters
function sum(...numbers) {
return numbers.reduce((a, b) => a + b, 0);
}
14. Performance Considerations
// Cache length in loops
const len = arr.length;
for (let i = 0; i < len; i++) {
// process
}
// Prefer for...of for simple iterations
for (const item of arr) {
// process
}
// Use appropriate methods
// Don't use forEach if you need to break early
// Use find() instead of filter()[0]
// Use some() instead of filter().length > 0
15. Common Patterns
Removing Duplicates
const numbers = [1, 2, 2, 3, 3, 4];
// Using Set
const unique = [...new Set(numbers)]; // [1, 2, 3, 4]
// Using filter
const unique2 = numbers.filter((num, index) =>
numbers.indexOf(num) === index
);
Grouping
const users = [
{ name: 'John', role: 'admin' },
{ name: 'Jane', role: 'user' },
{ name: 'Bob', role: 'admin' }
];
const byRole = users.reduce((acc, user) => {
acc[user.role] = acc[user.role] || [];
acc[user.role].push(user);
return acc;
}, {});
// { admin: [...], user: [...] }
Chunking
function chunk(array, size) {
return Array.from(
{ length: Math.ceil(array.length / size) },
(_, i) => array.slice(i * size, i * size + size)
);
}
chunk([1, 2, 3, 4, 5, 6, 7], 3);
// [[1, 2, 3], [4, 5, 6], [7]]
Summary
In this module, you learned:
- ✅ Creating and accessing arrays
- ✅ Adding and removing elements (mutable & immutable)
- ✅ Searching: indexOf, includes, find
- ✅ Iteration: forEach, map, filter, reduce
- ✅ Testing: some, every
- ✅ Sorting and reversing arrays
- ✅ Transforming: flat, flatMap, join
- ✅ Array destructuring
- ✅ Common array patterns
Next Steps
In Module 7, you'll learn about Objects – the fundamental data structure for organizing complex data.
Practice Exercises
- Remove duplicates from an array
- Find the second largest number in an array
- Flatten a nested array of any depth
- Group objects by a specific property
- Implement array chunking
- Find intersection of two arrays
- Calculate average of numbers using reduce
- Sort an array of objects by multiple properties