Chapter 8: Arrays and Array Methods

8.1 Introduction to Arrays

Arrays are data structures in JavaScript that allow you to store multiple values in a single variable. Arrays can hold a mix of data types and provide useful methods to manage and manipulate data.

Example: Basic Array

let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits); // ["Apple", "Banana", "Cherry"]

8.2 Array Properties and Basic Methods

8.2.1 Length Property

The .length property returns the number of elements in an array.

Examples:

let colors = ["Red", "Green", "Blue"];
console.log(colors.length); // 3

let emptyArray = [];
console.log(emptyArray.length); // 0

8.2.2 Accessing Elements

You can access elements in an array by their index, starting from 0.

Examples:

let animals = ["Dog", "Cat", "Elephant"];
console.log(animals[1]); // "Cat"

let numbers = [5, 10, 15];
console.log(numbers[0]); // 5

8.3 Array Methods

8.3.1 Adding and Removing Elements

8.3.1.1 push() Method

The push() method adds one or more elements to the end of an array and returns the new length.

Examples:

let cities = ["New York", "London"];
cities.push("Paris");
console.log(cities); // ["New York", "London", "Paris"]

let scores = [85, 90];
scores.push(100, 95);
console.log(scores); // [85, 90, 100, 95]

8.3.1.2 pop() Method

The pop() method removes the last element from an array and returns it.

Examples:

let items = ["Pen", "Pencil", "Eraser"];
let removedItem = items.pop();
console.log(removedItem); // "Eraser"
console.log(items); // ["Pen", "Pencil"]

let nums = [1, 2, 3];
nums.pop();
console.log(nums); // [1, 2]

8.3.2 Combining Arrays

8.3.2.1 concat() Method

The concat() method merges two or more arrays and returns a new array.

Examples:

let arr1 = [1, 2];
let arr2 = [3, 4];
let combined = arr1.concat(arr2);
console.log(combined); // [1, 2, 3, 4]

let letters = ["a", "b"];
let numbers = [1, 2];
let result = letters.concat(numbers);
console.log(result); // ["a", "b", 1, 2]

8.3.3 Searching Arrays

8.3.3.1 indexOf() Method

The indexOf() method returns the first index of a specified element or -1 if it’s not found.

Examples:

let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits.indexOf("Banana")); // 1

let items = ["Keyboard", "Mouse", "Monitor"];
console.log(items.indexOf("Laptop")); // -1

8.3.3.2 includes() Method

The includes() method checks if an array contains a specified element and returns true or false.

Examples:

let languages = ["JavaScript", "Python"];
console.log(languages.includes("JavaScript")); // true

let pets = ["Dog", "Cat"];
console.log(pets.includes("Bird")); // false

8.4 Array Iteration Methods

8.4.1 forEach() Method

The forEach() method executes a provided function once for each array element.

Examples:

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

let names = ["Alice", "Bob"];
names.forEach(name => console.log("Hello, " + name)); // "Hello, Alice", "Hello, Bob"

8.4.2 map() Method

The map() method creates a new array populated with the results of calling a provided function on every element.

Examples:

let numbers = [1, 2, 3];
let squares = numbers.map(num => num * num);
console.log(squares); // [1, 4, 9]

let prices = [100, 200];
let discounted = prices.map(price => price * 0.9);
console.log(discounted); // [90, 180]

8.4.3 filter() Method

The filter() method creates a new array with all elements that pass a test provided by a function.

Examples:

let ages = [32, 17, 18, 21];
let adults = ages.filter(age => age >= 18);
console.log(adults); // [32, 18, 21]

let scores = [10, 25, 50];
let highScores = scores.filter(score => score > 20);
console.log(highScores); // [25, 50]

8.4.4 reduce() Method

The reduce() method executes a reducer function on each element, resulting in a single output.

Examples:

let numbers = [1, 2, 3, 4];
let sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum); // 10

let values = [2, 4, 6];
let product = values.reduce((total, val) => total * val, 1);
console.log(product); // 48

8.5 Sorting and Reversing Arrays

8.5.1 sort() Method

The sort() method sorts the elements of an array in place and returns the sorted array.

Examples:

let names = ["Zoe", "Alice", "Mike"];
console.log(names.sort()); // ["Alice", "Mike", "Zoe"]

let numbers = [10, 5, 20];
console.log(numbers.sort((a, b) => a - b)); // [5, 10, 20]

8.5.2 reverse() Method

The reverse() method reverses the order of elements in an array in place.

Examples:

let letters = ["a", "b", "c"];
console.log(letters.reverse()); // ["c", "b", "a"]

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