An array is a data structure that contains a list of elements which can store various values in a single array variable. The scope and usage of JavaScript arrays is in the array methods. Array methods are built-in JavaScript functions we can apply on arrays. Each method has a unique function that performs a change in elements or calculation to an array. This greatly helps and saves us from writing common array handling functions from scratch. These methods can be used on Object Arrays as well. Let’s go through a list of array methods and what functions we can do with them.
Various JavaScript Array Methods
at()
at() method is equivalent to the bracket notation where index is non-negative. For example, array[2] and array.at(2) both return the third item. However, when counting elements from the end of the array, you cannot use array[-1] like we do in R or Python, as all values inside the square brackets are treated like string properties, so you will end up reading array["-1"], which is a normal string property instead of an array index.
We may at times access the array length to get array index, For example: array[array.length - 1].
However using the at() method shortens the index notation to to array.at(-1). To access an array element at the end of the array or the last element, you can use the at() method. It allows relative indexing.
push()
The push() method adds one or more elements to the end of an array with elements and returns the new length and set of elements for the array. We can use the method as shown below.
const subjects = ["English", "Maths"]
subjects.push("Science");
console.log(subjects);
// prints ["English", "Maths", "Science"] nowpop()
The pop method removes the last element from the end of array with elements and returns the updated array. Consider the example below.
const subjects = ["English", "Maths"]
subjects.pop();
console.log(subjects);
// prints ["English"] nowshift()
While pop removes the last element from an array, shift will remove the first element from an array and returns that modified array. Consider the same example now using shift instead of pop.
const subjects = ["English", "Maths"]
subjects.shift();
console.log(subjects);
// prints ["Maths"] nowunshift()
Similar to the use of push, unshift also adds new element to an array, but on the other side. This method adds one or more elements to the beginning of an array and returns the modified array.
const subjects = ["English", "Maths"]
subjects.unshift("Science");
console.log(subjects);
// prints ["Science", "English", "Maths"] nowfill()
The fill method passes (fills) to all elements in an array a static value and returns the new modified array. For example, when creating a new array, you may fill all positions with same value like shown below.
const arr = new Array(5)
console.log(arr);
// prints ['', '', '', '', ''] initially
arr.fill(8);
console.log(arr);
// prints ['8', '8', '8', '8', '8'] nowjoin()
This method returns a new string by concatenating all of the array’s elements separated by the specified separator.
The join method concatenates all array methods to make a new string. For example consider the code snipper below.
const arr = ["s", "c", "r", "a", "t", "h"]
arr.join('');
console.log(arr)
// prints scratchreverse()
The method reverses position of all elements of an array. The element present at the last index will be at first and element at 0 index will be at last. Consider the code sample below.
const arr= ["a", "b", "c]
arr.reverse();
console.log(arr);
// prints ["c", "b", "a"] nowincludes(8)
The method checks if an array includes an element that has a specific value passed in the include function. It then gives Boolean results. This can be used to confirm if an array holds a specific value. It can be used as follows.
const arr = ["s", "c", "r", "a", "t", "h"];
arr.includes(c); // returns true
arr.includes(d); // returns falsemap()
The method maps an array to a new array, after applying a specific criteria to every element of the array.
const arr = ["10", "90", "18", "7", "6", "3"];
const mapped_arr = arr.map(element => element - 10);
console.log(mapped_arr);
// prints [0, 80, 8, -3, -4, -7]filter()
The filter method searches specific results from an array and creates a new array with the filtered results. A filter condition can be passed to the array.
const arr = ["10", "90", "18", "7", "6", "3"];
const filtered_arr = arr.filter(element => element < 10 || element === 90);
console.log(filtered_arr);
// prints [7, 6, 3, 90]find()
The find method returns the value of the first element of an array that passes the find criteria in the testing find() function. Consider the code sample below.
const arr = ["10", "90", "18", "7", "6", "3"];
const ele_found = arr.find(element => element < 10);
console.log(ele_found);
// prints 7Searching through the array from the start, the first element that is less than 10 is 7, so the function returns that element.
Note: operator is for <, (not <=), thats why it will not return 10.
findIndex()
The findIndex() method returns the index of the first element of an array that passes the find criteria. Consider the code sample below.
const arr= ["a", "b", "c]
const index_found = arr.findIndex(element => element === "b");
console.log(index_found );
// prints 1every()
The every() method will search through each element of an array and check if they pass the given condition. This method returns a Boolean result based on condition pass or fail for every element.
const arr = ["10", "90", "18", "7", "6", "3"];
const eles_status = arr.every(element => element < 10);
console.log(eles_status);
// returns false (as some elements are greater than 10)
const eles_status2 = arr.every(element => element < 100);
console.log(eles_status2);
// returns true (as all elements are lesser than 100)reduce()
The method will reduce all elements to a single value. This value is determined by passing an accumulator, that gets applied on every element of the array. Consider the sample below.
const arr = ["10", "90", "18", "7", "6", "3"];
const reduced_arr = arr.reduce((total, current) => total + current);
console.log(reduced_arr );
// prints 134 (sum of all elements in array)
