Mastering JavaScript Arrays

In JavaScript, an array is a data structure that allows you to store multiple values in a single variable. It is a special type of object that holds an ordered collection of elements. Arrays can contain various data types, including numbers, strings, objects, and even other arrays.

JavaScript arrays are zero-indexed, meaning the first element is accessed with an index of 0, the second element with an index of 1, and so on. You can add, remove, and modify elements within an array, making it a versatile tool for storing and manipulating data.

Here's an example of a JavaScript array that stores a list of fruits:

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

In this case, the array variable fruits contain three elements: "apple", "banana", and "orange". You can access individual elements using their respective index values, such as fruits[0] to access "apple". Arrays also provide various built-in methods for performing operations like adding, removing, or searching for elements within the array.

In this article, we will discuss essential Array Methods.

1. map()

it allows one to iterate over each element of an array and perform a specified operation on each element. It creates a new array by applying a callback function to every element in the original array and returning the results.

 let numbers = [1, 2, 3, 4, 5];
 let squaredNumbers = numbers.map(function (number) {
     return number * number;
 });
 console.log(squaredNumbers); // Output: [1, 4, 9, 16, 25]

2. filter()

it allows the creation of a new array containing elements from the original array that meet specific criteria. It iterates through each element of the array and tests them against a provided condition. If the condition is true for an element, that element is included in the new array.

 let numbers = [1, 2, 3, 4, 5];
 let oddNumbers = numbers.filter(function (number) {
     return number % 2 !== 0;
 });
 console.log(oddNumbers); // Output: [1, 3, 5]

3. sort()

it allows to sort of the elements of an array in place and returns the sorted array. The default sort order is ascending, built upon converting the elements into strings, then comparing their sequences of UTF-16 code unit values.

 let fruits = ['Banana', 'Orange', 'Apple', 'Mango'];
 fruits.sort(); // ['Apple', 'Banana', 'Mango', 'Orange']

4. every()

it allows checking if all elements in an array pass a test (provided as a function). If it finds an array element where the function returns a false value, every() returns false (and does not check the remaining values). Otherwise, it returns true.

 let numbers = [1, 2, 3, 4, 5];
 let result = numbers.every(function (number) {
     return number < 10;
 });
 console.log(result); // Output: true

5. some()

it allows to check if any of the elements in an array pass a test (provided as a function). If it finds an array element where the function returns a true value, some() returns true (and does not check the remaining values). Otherwise, it returns false.

 let numbers = [1, 2, 3, 4, 5];
 let result = numbers.some(function (number) {
     return number > 10;
 });
 console.log(result); // Output: false

6. includes()

it allows checking if an array includes the specified element, returning true or false as appropriate.

 let numbers = [1, 2, 3, 4, 5];
 let result = numbers.includes(3);
 console.log(result); // Output: true

7. join()

it allows the joining of all elements of an array into a string.

 let numbers = [1, 2, 3, 4, 5];
 let result = numbers.join('-');
 console.log(result); // Output: 1-2-3-4-5

8. reduce()

it allows reducing of the elements of an array to a single value by applying a function to each element and passing the result to the next step of the function.

 let numbers = [1, 2, 3, 4, 5];
 let sum = numbers.reduce(function (accumulator, currentValue) {
     return accumulator + currentValue;
 });
 console.log(sum); // Output: 15

9. find()

it allows returning of the value of the first element in the provided array that satisfies the provided testing function.

 let numbers = [1, 2, 3, 4, 5];
 let result = numbers.find(function (number) {
     return number > 3;
 });
 console.log(result); // Output: 4

10. findIndexOf()

it allows returning the index of the first element in the array that satisfies the provided testing function. Otherwise, it returns -1, indicating that no element passed the test.

let numbers = [1, 2, 3, 4, 5];
let result = numbers.findIndex(function (number) {
    return number > 3;
});
console.log(result); // Output: 3

11. fill()

it allows filling all the elements of an array from a start index to an end index with a static value.

let numbers = [1, 2, 3, 4, 5];
numbers.fill(0, 2, 4);
console.log(numbers); // Output: [1, 2, 0, 0, 5]

12. slice()

it allows to extract of a section of an array and returns a new array.

let numbers = [1, 2, 3, 4, 5];
let result = numbers.slice(2, 4);
console.log(result); // Output: [3, 4]

13. reverse()

it allows reversing the order of the elements in an array.

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

14. push()

it allows to add of one or more elements to the end of an array and returns the new length of the array.

let numbers = [1, 2, 3, 4, 5];
numbers.push(6);
console.log(numbers); // Output: [1, 2, 3, 4, 5, 6]

15. pop()

it allows the removal of the last element from an array and returns that element.

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

16. shift()

it allows removing the first element from an array and returns that removed element.

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

17. unshift()

it allows to add of one or more elements to the beginning of an array and returns the new length of the array.

let numbers = [1, 2, 3, 4, 5];
numbers.unshift(0);
console.log(numbers); // Output: [0, 1, 2, 3, 4, 5]