Array – JS

Arrays are a fundamental data structure in JavaScript used to store multiple values in a single variable. They come with a variety of built-in methods that allow you to manipulate and interact with the data. Here’s a detailed overview of JavaScript arrays and their important methods:

Creating Arrays

// Using array literal
let fruits = ["Apple", "Banana", "Mango"];

// Using the Array constructor
let numbers = new Array(1, 2, 3, 4, 5);

Accessing and Modifying Arrays

let fruits = ["Apple", "Banana", "Mango"];

// Accessing elements
console.log(fruits[0]); // "Apple"

// Modifying elements
fruits[1] = "Orange";
console.log(fruits); // ["Apple", "Orange", "Mango"]

// Length of array
console.log(fruits.length); // 3

Important Array Methods

1. Adding and Removing Elements
   • push(): Adds one or more elements to the end of the array and returns the new length.fruits.push("Pineapple");
console.log(fruits);
// ["Apple", "Orange", "Mango", "Pineapple"]
   • pop(): Removes the last element from the array and returns that element.
     fruits.pop();
console.log(fruits);
// ["Apple", "Orange", "Mango"]
   • unshift(): Adds one or more elements to the beginning of the array and returns the new length.
     fruits.unshift("Strawberry");
console.log(fruits);
// ["Strawberry", "Apple", "Orange", "Mango"]
   • shift(): Removes the first element from the array and returns that element.
     fruits.shift();
console.log(fruits);
// ["Apple", "Orange", "Mango"]
2. Combining and Slicing Arrays
   • concat(): Merges two or more arrays and returns a new array.
     let vegetables = ["Carrot", "Broccoli"];
let allFood = fruits.concat(vegetables);
console.log(allFood);
// ["Apple", "Orange", "Mango", "Carrot", "Broccoli"]
   • slice(): Returns a shallow copy of a portion of an array into a new array object.
     let citrus = fruits.slice(1, 3);
console.log(citrus);
// ["Orange", "Mango"]
   • splice(): Changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.
     fruits.splice(1, 1, "Grapes");
console.log(fruits);
// ["Apple", "Grapes", "Mango"]
3. Searching and Sorting
   • indexOf(): Returns the first index at which a given element can be found in the array, or -1 if it is not present.
     console.log(fruits.indexOf("Mango"));
// 2
   • lastIndexOf(): Returns the last index at which a given element can be found in the array, or -1 if it is not present.
     console.log(fruits.lastIndexOf("Grapes"));
// 1
   • includes(): Determines whether an array includes a certain element, returning true or false.
     console.log(fruits.includes("Apple"));
// true
   • find(): Returns the value of the first element in the array that satisfies the provided testing function.
     let numbers = [1, 2, 3, 4, 5];
let found = numbers.find((element) => element > 3);
console.log(found);
// 4
   • findIndex(): Returns the index of the first element in the array that satisfies the provided testing function.
     let foundIndex = numbers.findIndex((element) => element > 3); console.log(foundIndex);
// 3
   • sort(): Sorts the elements of an array in place and returns the sorted array.
     let unsortedNumbers = [3, 1, 4, 1, 5, 9];
unsortedNumbers.sort((a, b) => a - b);
console.log(unsortedNumbers);
// [1, 1, 3, 4, 5, 9]
   • reverse(): Reverses the order of the elements in the array in place.
     unsortedNumbers.reverse();
console.log(unsortedNumbers);
// [9, 5, 4, 3, 1, 1]
4. Iteration Methods
   • forEach(): Executes a provided function once for each array element.
     fruits.forEach((item) => console.log(item));
// "Apple" // "Grapes" // "Mango"
   • map(): Creates a new array with the results of calling a provided function on every element in the array.
     let lengths = fruits.map((item) => item.length);
console.log(lengths);
// [5, 6, 5]
   • filter(): Creates a new array with all elements that pass the test implemented by the provided function.
     let longNames = fruits.filter((item) => item.length > 5); console.log(longNames);
// ["Grapes"]
   • reduce(): Executes a reducer function (that you provide) on each element of the array, resulting in a single output value.
     let sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum);
// 15
   • some(): Tests whether at least one element in the array passes the test implemented by the provided function.
     let hasLargeNumber = numbers.some((element) => element > 4); console.log(hasLargeNumber);
// true
   • every(): Tests whether all elements in the array pass the test implemented by the provided function.
     let allPositive = numbers.every((element) => element > 0); console.log(allPositive);
// true
5. Other Useful Methods
   • join(): Joins all elements of an array into a string.
     let joinedFruits = fruits.join(", ");
console.log(joinedFruits);
// "Apple, Grapes, Mango"
   • toString(): Returns a string representing the specified array and its elements.
     console.log(fruits.toString());
// "Apple,Grapes,Mango"
   • Array.isArray(): Checks if the value is an array.
     console.log(Array.isArray(fruits));
// true

Conclusion

Arrays are versatile and essential in JavaScript, offering numerous methods to manipulate, iterate, and transform data. Understanding and effectively using these methods can significantly enhance your ability to write efficient and readable JavaScript code.