JavaScript Mastery - Arrays

Introduction to Arrays

Arrays in JavaScript are reference-type data structures that store ordered collections of items. Unlike arrays in some other programming languages, JavaScript arrays are dynamic and can hold heterogeneous data types, making them extremely flexible for various use cases.

Key Characteristics:

• Heterogeneous: Can store different data types in a single array

• Dynamic: Size can change during runtime

• Zero-indexed: First element is at index 0

• Reference type: Variables store references, not actual values

Basic Array Creation

// Different ways to create arrays
let fruits = ["apple", "mango", "grapes"];
let numbers = [1, 2, 3, 4];
let mixed = [1, 2.3, "string", true, null, undefined, {id: 1}];

console.log(typeof fruits); // "object"
console.log(Array.isArray(fruits)); // true

Array Characteristics and Types

Checking Array Type

JavaScript provides several methods to identify arrays since the typeof operator returns "object" for arrays.

Syntax:

Array.isArray(arrayName)

Examples:

let arr = [1, 2, 3];
let obj = {a: 1, b: 2};

console.log(Array.isArray(arr)); // true
console.log(Array.isArray(obj)); // false
console.log(typeof arr); // "object"

Array Length Property

The length property returns the number of elements in an array and is automatically updated when elements are added or removed.

Examples:

let colors = ["red", "green", "blue"];
console.log(colors.length); // 3

colors.push("yellow");
console.log(colors.length); // 4

Array Creation and Indexing

Array Indexing

Arrays use zero-based indexing, meaning the first element is at index 0. You can access elements using square bracket notation.

Syntax:

arrayName[index]

Examples:

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

console.log(fruits[0]); // "apple" (first element)
console.log(fruits[2]); // "cherry" (third element)
console.log(fruits[fruits.length - 1]); // "date" (last element)
console.log(fruits[10]); // undefined (non-existent index)

Accessing Last Elements

Examples:

let numbers = [10, 20, 30, 40, 50];

// Different ways to access last elements
console.log(numbers[numbers.length - 1]); // 50 (last element)
console.log(numbers[numbers.length - 2]); // 40 (second to last)
console.log(numbers[numbers.length]); // undefined (beyond array)

Primitive vs Reference Types

Understanding the difference between primitive and reference types is crucial when working with arrays.

Primitive Types (Numbers, Strings, Booleans)

let a = 5;
let b = a; // Value is copied
b++;
console.log(a); // 5 (unchanged)
console.log(b); // 6 (changed)

Reference Types (Arrays, Objects, Functions)

let array1 = [1, 2, 3];
let array2 = array1; // Reference is copied, not the array
array2.push(4);

console.log(array1); // [1, 2, 3, 4] (changed!)
console.log(array2); // [1, 2, 3, 4] (changed!)
console.log(array1 === array2); // true (same reference)

Array Cloning Methods

Method 1: Slice Method

let original = [1, 2, 3];
let cloned = original.slice();
cloned.push(4);
console.log(original); // [1, 2, 3] (unchanged)
console.log(cloned); // [1, 2, 3, 4]

Method 2: Spread Operator

let original = [1, 2, 3];
let cloned = [...original];
cloned.push(4);
console.log(original); // [1, 2, 3] (unchanged)
console.log(cloned); // [1, 2, 3, 4]

Array Iteration Methods

Traditional For Loop

The classic for loop provides complete control over iteration and is often the most performant option.

Syntax:

for (let i = 0; i < array.length; i++) {
    // code to execute
}

Examples:

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

for (let i = 0; i < fruits.length; i++) {
    console.log(`Index ${i}: ${fruits[i]}`);
    upperFruits.push(fruits[i].toUpperCase());
}
console.log(upperFruits); // ["APPLE", "BANANA", "CHERRY"]

For...of Loop

The for...of loop iterates over array values directly, providing cleaner syntax when you don't need the index.

Syntax:

for (let element of array) {
    // code to execute
}

Examples:

let numbers = [10, 20, 30, 40];

for (let number of numbers) {
    console.log(number * 2); // 20, 40, 60, 80
}

let names = ['Alice', 'Bob', 'Charlie'];
for (let name of names) {
    console.log(`Hello, ${name}!`);
}

For...in Loop

The for...in loop iterates over array indices (keys), which can be useful when you need index information.

Syntax:

for (let index in array) {
    // code to execute
}

Examples:

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

for (let index in colors) {
    console.log(`Index ${index}: ${colors[index]}`);
}
// Output: Index 0: red, Index 1: green, Index 2: blue

let scores = [95, 87, 92];
for (let i in scores) {
    console.log(`Student ${parseInt(i) + 1}: ${scores[i]}`);
}

Array Destructuring and Spread Operator

Array Destructuring

Array destructuring allows you to extract multiple values from arrays and assign them to variables in a single statement.

Syntax:

let [var1, var2, var3] = array;

Examples:

let fruits = ["apple", "banana", "cherry", "date"];
let [first, second, third] = fruits;

console.log(first); // "apple"
console.log(second); // "banana"
console.log(third); // "cherry"

// Skipping elements
let [a, , c] = fruits; // Skip second element
console.log(a); // "apple"
console.log(c); // "cherry"

// Rest pattern
let [head, ...rest] = fruits;
console.log(head); // "apple"
console.log(rest); // ["banana", "cherry", "date"]

Spread Operator

The spread operator (...) allows you to expand arrays into individual elements, useful for combining arrays or passing array elements as function arguments.

Syntax:

let newArray = [...array1, ...array2];

Examples:

let fruits = ["apple", "banana"];
let vegetables = ["carrot", "lettuce"];
let combined = [...fruits, ...vegetables, "cheese"];

console.log(combined); // ["apple", "banana", "carrot", "lettuce", "cheese"]

// Cloning arrays
let original = [1, 2, 3];
let clone = [...original];
clone.push(4);
console.log(original); // [1, 2, 3] (unchanged)

// Function arguments
let numbers = [1, 2, 3, 4, 5];
console.log(Math.max(...numbers)); // 5

Array Methods Deep Dive

Mutator Methods (Modify Original Array)

push()

Adds one or more elements to the end of an array and returns the new length. This method modifies the original array and is commonly used for building arrays dynamically.

Syntax:

array.push(element1, element2, ..., elementN)

Examples:

let fruits = ["apple", "banana"];
let newLength = fruits.push("cherry", "date");
console.log(fruits); // ["apple", "banana", "cherry", "date"]
console.log(newLength); // 4

let numbers = [1, 2];
numbers.push(...[3, 4, 5]); // Using spread operator
console.log(numbers); // [1, 2, 3, 4, 5]

pop()

Removes the last element from an array and returns that element. If the array is empty, it returns undefined.

Syntax:

array.pop()

Examples:

let fruits = ["apple", "banana", "cherry"];
let removed = fruits.pop();
console.log(removed); // "cherry"
console.log(fruits); // ["apple", "banana"]

let stack = [1, 2, 3, 4];
while (stack.length > 0) {
    console.log(stack.pop()); // 4, 3, 2, 1
}

shift()

Removes the first element from an array and returns that element. This method changes the length of the array and shifts all remaining elements down by one index.

Syntax:

array.shift()

Examples:

let queue = ["first", "second", "third"];
let removed = queue.shift();
console.log(removed); // "first"
console.log(queue); // ["second", "third"]

let numbers = [10, 20, 30];
console.log(numbers.shift()); // 10
console.log(numbers); // [20, 30]

unshift()

Adds one or more elements to the beginning of an array and returns the new length. All existing elements are shifted to higher indices.

Syntax:

array.unshift(element1, element2, ..., elementN)

Examples:

let fruits = ["banana", "cherry"];
let newLength = fruits.unshift("apple");
console.log(fruits); // ["apple", "banana", "cherry"]
console.log(newLength); // 3

let priorities = ["medium", "low"];
priorities.unshift("urgent", "high");
console.log(priorities); // ["urgent", "high", "medium", "low"]

splice()

Changes the contents of an array by removing or replacing existing elements and/or adding new elements in place. This is one of the most versatile array methods.

Syntax:

array.splice(start, deleteCount, item1, item2, ..., itemN)

Examples:

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

// Remove elements
let removed = numbers.splice(2, 2); // Remove 2 elements starting from index 2
console.log(removed); // [3, 4]
console.log(numbers); // [1, 2, 5]

// Add elements
let fruits = ["apple", "cherry"];
fruits.splice(1, 0, "banana"); // Add "banana" at index 1
console.log(fruits); // ["apple", "banana", "cherry"]

// Replace elements
let colors = ["red", "green", "blue"];
colors.splice(1, 1, "yellow", "orange"); // Replace "green" with "yellow" and "orange"
console.log(colors); // ["red", "yellow", "orange", "blue"]

sort()

Sorts the elements of an array in place and returns the sorted array. By default, elements are converted to strings and sorted in UTF-16 code units order.

Syntax:

array.sort([compareFunction])

Examples:

// Default sorting (as strings)
let fruits = ["banana", "apple", "cherry"];
fruits.sort();
console.log(fruits); // ["apple", "banana", "cherry"]

// Numeric sorting
let numbers = [10, 5, 40, 25, 1000, 1];
numbers.sort((a, b) => a - b); // Ascending
console.log(numbers); // [1, 5, 10, 25, 40, 1000]

// Descending order
let scores = [95, 87, 92, 88];
scores.sort((a, b) => b - a);
console.log(scores); // [95, 92, 88, 87]

reverse()

Reverses an array in place, with the first array element becoming the last and the last array element becoming the first.

Syntax:

array.reverse()

Examples:

let numbers = [1, 2, 3, 4, 5];
numbers.reverse();
console.log(numbers); // [5, 4, 3, 2, 1]

let letters = ['a', 'b', 'c', 'd'];
let reversed = letters.reverse();
console.log(letters); // ['d', 'c', 'b', 'a']
console.log(reversed === letters); // true (same reference)

Accessor Methods (Do Not Modify Original Array)

concat()

Merges two or more arrays and returns a new array without modifying the existing arrays. This method is used to combine arrays while preserving the original arrays.

Syntax:

array1.concat(array2, array3, ..., arrayN)

Examples:

let teamA = ['Alice', 'Bob'];
let teamB = ['Charlie', 'Dave'];
let allMembers = teamA.concat(teamB);
console.log(allMembers); // ['Alice', 'Bob', 'Charlie', 'Dave']
console.log(teamA); // ['Alice', 'Bob'] (unchanged)

let fruits = ['apple', 'banana'];
let vegetables = ['carrot', 'lettuce'];
let dairy = ['milk', 'cheese'];
let groceries = fruits.concat(vegetables, dairy);
console.log(groceries); // ['apple', 'banana', 'carrot', 'lettuce', 'milk', 'cheese']

slice()

Returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included). The original array is not modified.

Syntax:

array.slice([start], [end])

Examples:

let fruits = ['apple', 'banana', 'cherry', 'date', 'elderberry'];
let citrus = fruits.slice(1, 4);
console.log(citrus); // ['banana', 'cherry', 'date']
console.log(fruits); // unchanged

// Negative indices
let lastTwo = fruits.slice(-2);
console.log(lastTwo); // ['date', 'elderberry']

// Copy entire array
let copy = fruits.slice();
console.log(copy); // ['apple', 'banana', 'cherry', 'date', 'elderberry']

indexOf()

Returns the first index at which a given element can be found in the array, or -1 if it is not present. This method uses strict equality (===) for comparison.

Syntax:

array.indexOf(searchElement, [fromIndex])

Examples:

let numbers = [1, 2, 3, 2, 4, 2];
console.log(numbers.indexOf(2)); // 1 (first occurrence)
console.log(numbers.indexOf(2, 2)); // 3 (first occurrence after index 2)
console.log(numbers.indexOf(5)); // -1 (not found)

let fruits = ['apple', 'banana', 'cherry'];
if (fruits.indexOf('banana') !== -1) {
    console.log('Banana found in the array');
}

lastIndexOf()

Returns the last index at which a given element can be found in the array, or -1 if it is not present. The array is searched backwards.

Syntax:

array.lastIndexOf(searchElement, [fromIndex])

Examples:

let numbers = [1, 2, 3, 2, 4, 2];
console.log(numbers.lastIndexOf(2)); // 5 (last occurrence)
console.log(numbers.lastIndexOf(2, 4)); // 3 (last occurrence before index 4)

let letters = ['a', 'b', 'c', 'b', 'd'];
console.log(letters.lastIndexOf('b')); // 3

includes()

Determines whether an array includes a certain value among its entries, returning true or false as appropriate. This method uses the sameValueZero comparison algorithm.

Syntax:

array.includes(searchElement, [fromIndex])

Examples:

let fruits = ['apple', 'banana', 'cherry'];
console.log(fruits.includes('banana')); // true
console.log(fruits.includes('grape')); // false

let numbers = [1, 2, 3, NaN, 5];
console.log(numbers.includes(NaN)); // true (includes can find NaN)
console.log(numbers.indexOf(NaN)); // -1 (indexOf cannot find NaN)

join()

Creates and returns a new string by concatenating all elements in an array, separated by commas or a specified separator string.

Syntax:

array.join([separator])

Examples:

let fruits = ['apple', 'banana', 'cherry'];
console.log(fruits.join()); // "apple,banana,cherry"
console.log(fruits.join(' - ')); // "apple - banana - cherry"
console.log(fruits.join('')); // "applebananacherry"

let words = ['Hello', 'World', '!'];
let sentence = words.join(' ');
console.log(sentence); // "Hello World !"

Iteration Methods

forEach()

Executes a provided function once for each array element. This method does not return a new array and is primarily used for side effects like logging or modifying external variables.

Syntax:

array.forEach(function(currentValue, index, array) {
    // code to execute
}, thisArg)

Examples:

let numbers = [1, 2, 3, 4];
numbers.forEach(num => console.log(num * 2)); // 2, 4, 6, 8

let fruits = ['apple', 'banana', 'cherry'];
fruits.forEach((fruit, index) => {
    console.log(`${index}: ${fruit.toUpperCase()}`);
});
// 0: APPLE, 1: BANANA, 2: CHERRY

// Modifying an external array
let doubled = [];
numbers.forEach(num => doubled.push(num * 2));
console.log(doubled); // [2, 4, 6, 8]

map()

Creates a new array populated with the results of calling a provided function on every element in the calling array. This method is perfect for transforming data.

Syntax:

array.map(function(currentValue, index, array) {
    return newValue;
}, thisArg)

Examples:

let numbers = [1, 2, 3, 4];
let doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]
console.log(numbers); // [1, 2, 3, 4] (unchanged)

let users = [
    { name: 'John', age: 25 },
    { name: 'Jane', age: 30 },
    { name: 'Bob', age: 35 }
];
let names = users.map(user => user.name);
console.log(names); // ['John', 'Jane', 'Bob']

let prices = [10.50, 25.99, 5.75];
let formattedPrices = prices.map(price => `$${price.toFixed(2)}`);
console.log(formattedPrices); // ['$10.50', '$25.99', '$5.75']

filter()

Creates a new array with all elements that pass the test implemented by the provided function. This method is used to select elements based on certain criteria.

Syntax:

array.filter(function(currentValue, index, array) {
    return boolean;
}, thisArg)

Examples:

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4, 6, 8, 10]

let words = ['apple', 'banana', 'cherry', 'date'];
let longWords = words.filter(word => word.length > 5);
console.log(longWords); // ['banana', 'cherry']

let people = [
    { name: 'John', age: 17 },
    { name: 'Jane', age: 25 },
    { name: 'Bob', age: 16 },
    { name: 'Alice', age: 30 }
];
let adults = people.filter(person => person.age >= 18);
console.log(adults); // [{ name: 'Jane', age: 25 }, { name: 'Alice', age: 30 }]

reduce()

Executes a reducer function on each element of the array, resulting in a single output value. This method is extremely powerful for aggregating data.

Syntax:

array.reduce(function(accumulator, currentValue, currentIndex, array) {
    return newAccumulator;
}, initialValue)

Examples:

// Sum of numbers
let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 15

// Product of numbers
let product = numbers.reduce((acc, num) => acc * num, 1);
console.log(product); // 120

// Finding maximum value
let max = numbers.reduce((acc, num) => num > acc ? num : acc);
console.log(max); // 5

// Grouping objects
let people = [
    { name: 'John', department: 'IT' },
    { name: 'Jane', department: 'HR' },
    { name: 'Bob', department: 'IT' },
    { name: 'Alice', department: 'Finance' }
];

let groupedByDepartment = people.reduce((acc, person) => {
    if (!acc[person.department]) {
        acc[person.department] = [];
    }
    acc[person.department].push(person.name);
    return acc;
}, {});
console.log(groupedByDepartment);
// { IT: ['John', 'Bob'], HR: ['Jane'], Finance: ['Alice'] }

some()

Tests whether at least one element in the array passes the test implemented by the provided function. It returns a Boolean value and stops at the first truthy result.

Syntax:

array.some(function(currentValue, index, array) {
    return boolean;
}, thisArg)

Examples:

let numbers = [1, 3, 5, 7, 8];
let hasEvenNumber = numbers.some(num => num % 2 === 0);
console.log(hasEvenNumber); // true (because of 8)

let ages = [16, 17, 15, 14];
let hasAdult = ages.some(age => age >= 18);
console.log(hasAdult); // false

let words = ['cat', 'dog', 'elephant'];
let hasLongWord = words.some(word => word.length > 5);
console.log(hasLongWord); // true (because of 'elephant')

every()

Tests whether all elements in the array pass the test implemented by the provided function. It returns a Boolean value and stops at the first falsy result.

Syntax:

array.every(function(currentValue, index, array) {
    return boolean;
}, thisArg)

Examples:

let numbers = [2, 4, 6, 8];
let allEven = numbers.every(num => num % 2 === 0);
console.log(allEven); // true

let ages = [25, 30, 35, 28];
let allAdults = ages.every(age => age >= 18);
console.log(allAdults); // true

let scores = [85, 92, 78, 95];
let allPassing = scores.every(score => score >= 80);
console.log(allPassing); // false (because of 78)

find()

Returns the first element in the array that satisfies the provided testing function. If no element satisfies the testing function, undefined is returned.

Syntax:

array.find(function(currentValue, index, array) {
    return boolean;
}, thisArg)

Examples:

let numbers = [5, 12, 8, 130, 44];
let found = numbers.find(num => num > 10);
console.log(found); // 12 (first number > 10)

let users = [
    { id: 1, name: 'John', active: false },
    { id: 2, name: 'Jane', active: true },
    { id: 3, name: 'Bob', active: true }
];
let activeUser = users.find(user => user.active);
console.log(activeUser); // { id: 2, name: 'Jane', active: true }

let words = ['apple', 'banana', 'cherry'];
let longWord = words.find(word => word.length > 6);
console.log(longWord); // undefined (no word longer than 6 characters)

findIndex()

Returns the index of the first element in the array that satisfies the provided testing function. If no element satisfies the testing function, -1 is returned.

Syntax:

array.findIndex(function(currentValue, index, array) {
    return boolean;
}, thisArg)

Examples:

let numbers = [5, 12, 8, 130, 44];
let index = numbers.findIndex(num => num > 10);
console.log(index); // 1 (index of 12)

let users = [
    { id: 1, name: 'John' },
    { id: 2, name: 'Jane' },
    { id: 3, name: 'Bob' }
];
let janeIndex = users.findIndex(user => user.name === 'Jane');
console.log(janeIndex); // 1

let scores = [65, 70, 85, 90];
let firstAIndex = scores.findIndex(score => score >= 80);
console.log(firstAIndex); // 2 (index of 85)

Best Practices and Performance Tips

1. Use Const for Arrays When Possible

Declare arrays with const to prevent reassignment while still allowing modifications to the array contents.

const fruits = ['apple', 'banana']; // Preferred
fruits.push('cherry'); // This works
// fruits = ['new array']; // This would throw an error

2. Choose the Right Method for the Job

For transformation: Use map()

const doubled = numbers.map(n => n * 2);

For filtering: Use filter()

const adults = people.filter(person => person.age >= 18);

For aggregation: Use reduce()

const sum = numbers.reduce((acc, n) => acc + n, 0);

For side effects: Use forEach()

numbers.forEach(n => console.log(n));

3. Performance Considerations

Avoid creating unnecessary intermediate arrays:

// Less efficient
const result = numbers
    .map(n => n * 2)
    .filter(n => n > 10)
    .map(n => n + 1);

// More efficient
const result = numbers.reduce((acc, n) => {
    const doubled = n * 2;
    if (doubled > 10) {
        acc.push(doubled + 1);
    }
    return acc;
}, []);

4. Use Early Returns in Callbacks

// Good practice
const hasValidUser = users.some(user => {
    if (!user.active) return false;
    if (!user.email) return false;
    return user.role === 'admin';
});

5. Handle Edge Cases

function processArray(arr) {
    if (!Array.isArray(arr) || arr.length === 0) {
        return [];
    }

    return arr
        .filter(item => item != null) // Remove null/undefined
        .map(item => processItem(item));
}