An array is a special kind of object in JavaScript that allows us to store multiple values in a single variable. Every value inside the array is stored against a unique key called an index. When we wish to store a list of elements and access them with a single variable, a JavaScript array comes in handy. Unlike other programming languages where an array is simply a reference to multiple variables, in JavaScript , it is a single variable storing multiple elements.
The array objects are frequently used as built-in global objects of Javascript. It provides a lot of functionality and ease in simplifying complex algorithms. Furthermore, JavaScript provides numerous array methods that assist you in performing operations on JavaScript arrays .
In this article, we will browse through the different types of array methods and will discuss their functioning. Prior to it, let us first understand how to create arrays in JavaScript.
So, let us get started!
Ways to Create Javascript Arrays
Before forging ahead, as prerequisites, we should know how to create arrays in Javascript.
Type 1
Array is initialized while declaring.
var cars = ["XUV700", "Jeep", "Seltos", "Swift"];
Type 2
Use the constructor to create an array, as follows:
var cars = newArray("XUV700");
Type 3
Initially, create an array with the help of a constructor. As soon as you initialize an array of a fixed length, start pushing elements inside it.
var cars = newArray(2);
cars.push("XUV700");
cars.push("Jeep");
Javascript Array Methods
In JavaScript, array methods are built-in or pre-coded functions that you can use with arrays to perform a change or calculation on arrays. These methods significantly save the time required for writing JS code from scratch. You can simply use the JS method to accomplish a specific task.
The categorization of JS array methods above is fundamental, considering some of the JS Array methods that are known to me. We will try to cover some of the major methods from the above list in this article.
An array object in Javascript provides many features through its functions. The user can iterate, sort, and splice the elements in an array with the help of these functions.
The following is a list of methods currently used in JS for array objects.
1. concat()
Javascript concat() method merges two or more arrays or values provided as arguments. The return value of this operation is an array object representing the concatenated values/arrays. It first merges the elements of the calling array and then pushes the elements of the array passed in the argument.
Syntax
arr.concat();
arr.concat(value1, value2, ..., valueN);
Parameters
valueN: It can be any value or an array that can concatenate into the calling array. It sends a shallow copy of the calling array if nothing is passed.
Returns
A new array instance.
Example
Merge the two arrays and some values.
const evenNumbers = [2,4,6];
const oddNumbers = [1,3,5];
const result = evenNumbers.concat(oddNumbers, 0, [7,8]);
console.log(result);
Output
Array [2, 4, 6, 1, 3, 5, 0, 7, 8]
2. every()
The Javascript every() method checks whether all the elements in an array meets the specified condition. It executes the callback function provided in the argument for each array element until it finds a false value. It doesn’t mutate the array on which it is iterated.
This method is a Javascript extension to the ECMA-262 standards. Please check its availability before use.
Syntax
arr.every(element);
arr.every(callbackFunction);
Parameters
element : items of an array.
callbackFunction: This function iterates over each element of an array and checks for the falsy value.
Returns
This returns true if the callbackFunction returns a truthy value for every array element. Otherwise, false.
Example
Example 1: Check if all the elements in an array are even.
const arr = [10, 348, 31, 21];
//checks if all elements in an array are even
console.log(arr.every((element) => (element % 2) === 0));
Output
false
Example 2: Check if all the elements in an array are odd.
let arr = [9, 31, 57, 21];
functionisOdd(element) {
return (element % 2) !== 0;
}
//checks if all elements in an array are odd
console.log(arr.every(isOdd));
Output
true
3. filter()
The Javascript filter() method creates and returns a shallow copy of the elements which pass the specified condition.
Syntax
arr.filter(element);
arr.filter(callbackFunction);
Parameters
element: items of an array.
callbackFunction: This function iterates over each element of an array and checks for the matching value.
Returns
An instance of an array.
Example
Example 1: Filter out all elements in an array, multiples of 10.
const arr = [10, 348, 31, 21];
//returns multiple of 10
console.log(arr.filter((element) => (element % 10) === 0));
Output
Array [10]
Example 2: Filter out all elements of an array which are greater than 100 using function.
const arr = [900, 31, 57, 21];
functiongetAllElementsLessThan100(element) {
return element < 100 ;
}
//get all elements less than 100
console.log(arr.filter(getAllElementsLessThan100));
Output
Array [31, 57, 21]
4. forEach()
Javascript forEach() method invokes and executes a function for each element of an array. It is not invoked for the values which are deleted or not initialized. You cannot stop or break the forEach loop unless throwing the exception manually.
Syntax
arr.forEach(element);
arr.forEach(callbackFunction);
Parameters
element: items of an array.
callbackFunction: This function iterates over each element of an array.
Returns
undefined
Example
Iterate over the elements of the array and increase the value by 5.
const arr = [1, 2, 3];
//Display all elements of array after increasing them by 5
arr.forEach(element => console.log(element + 5));
Output
6
7
8
5. includes()
The Javascript includes() method checks whether the array contains the searched element and returns true or false based on that.
Syntax
arr.includes(searchedElement)
Parameter
searchedElement - element to be checked.
Returns
True - if the element is present in the array.
False - if the element is not present in the array.
Example
const array1 = [21, 24, 33];
console.log(array1.includes(2));
console.log(array1.includes(24));
Output
false
true
6. indexOf()
The Javascript indexOf() method returns the first index at which the required element is present in an array. It provides -1 if the necessary element is not present in the array.
Syntax
arr.indexOf(searchedElement)
arr.indexOf(searchedElement, fromIndex)
Parameters
searchedElement: It is the element of which we need to find the index.
fromInde x: This is optional in this method. This is the index from which you want to start the search.
Returns
An index if the item is found in the array.
Returns -1 - If the item is not present in the array.
Example
Find the index of all elements in the array.
const arr = [6, 7, 8];
console.log(arr.indexOf(6));
console.log(arr.indexOf(5));
Output
0
-1
7. join()
The Javascript join() method concatenates the elements of an array and creates a string separated by a comma or a separator. If the array contains only one element, then only that item will be returned without a separator.
Syntax
arr.join(separator)
Parameter
Separator: It is the unique character by which you want to join the elements of the array.
Returns
String.
Example
const arr = ['tech', 'geek', 'buzz'];
console.log(arr.join());
console.log(arr.join(""));
console.log(arr.join("-"));
Output
"tech,geek,buzz"
"techgeekbuzz"
"tech-geek-buzz"
8. lastIndexOf()
The Javascript lastIndexOf() method returns the last index where the required element can be found. It returns -1 if the element is not present.
Syntax
arr.lastIndexOf(element)
arr.lastIndexOf(element, fromIndex)
Parameter
Element: It is the element which we need to check inside the array.
fromIndex: It is the index element from where the search should start.
Returns
The last index of the searched element.
-1 if the element is not present.
Example
const figherJets = ['F16', 'Jaguar', 'SU30', 'Jaguar'];
console.log(figherJets.lastIndexOf('Jaguar'));
console.log(figherJets.lastIndexOf('SU30'));
Output
3
2
9. map()
The Javascript map() method creates a new array containing the results of executing a function on each element on the array. If you are not expecting an array in return for this operation, you should not use map(). Use forEach, instead.
Syntax
arr.map(element);
arr.map(callbackFunction);
Parameters
element: the element on which map to be performed.
callbackFunction: function to iterate through each element.
Returns
A new array with each element being the result of the callback function.
Example
Finding the cube of each element in the array.
const arr = [1, 4, 9, 16];
// pass a function to map
console.log(arr.map(x => x * x * x));
Output
Array [1, 64, 729, 4096]
10. pop()
The Javascript pop() method removes the last element from the array and returns that element. This method manipulates the array and changes the length of the array.
Syntax
arr.pop()
Parameters
No Parameter
Returns
The removed element from the array.
undefined if the array is empty.
Example
const arr = [1, 4, 9, 16];
console.log(arr.pop());
Output
16
11. push()
The Javascript push() method inserts a single or more than one element into the array. The insertion is always done at the end. It increases the length of the array.
Syntax
arr.push();
Parameters
No Parameters
Returns
It returns the length of the new array after the pushing is performed.
Example
const arr = [1, 4, 9, 16];
console.log(arr.push());
Output
5
12. reverse()
The Javascript reverse() method reverses the elements in an array and returns the references of this array. After performing this operation on an array, the first element becomes the last, and the last becomes the first element in the array.
Syntax
arr.reverse();
Parameters
No Parameters.
Returns
The reference of the new array.
Example
const arr = [18, 24, 69, 16];
console.log(arr.reverse());
Output
Array [16, 69, 24, 18]
13. shift()
The Javascript shift() method removes the first element of the array and returns that element. It changes the length of the array.
Syntax
arr.shift()
Parameters
No Parameters
Returns
The element that has have been removed from the array.
Example
const arr = [18, 24, 69, 16];
console.log(arr.shift());
Output
18
14. slice()
The Javascript slice() method creates and returns a shallow copy from the original array. The original array is not modified here.
Syntax
arr.slice()
arr.slice(start)
arr.slice(start, end)
Parameters
start: zero-based index at which extraction of new array will start.
end: zero-based index at which extraction of new array will end.
Returns
A new array containing the extracted elements.
Example
const states = ['DL', 'JK', 'UK', 'HP', 'UP', 'GA'];
console.log(states.slice(3));
console.log(states.slice(2, 5));
console.log(states.slice(3, 5));
console.log(states.slice(-2));
console.log(states.slice(3, -1));
console.log(states.slice());
Output
Array ["HP", "UP", "GA"]
Array ["UK", "HP", "UP"]
Array ["HP", "UP"]
Array ["UP", "GA"]
Array ["HP", "UP"]
Array ["DL", "JK", "UK", "HP", "UP", "GA"]
15. some()
The Javascript some() method tests if any element in the array passes the test the function provides. It returns true if at least one of the elements passes the test.
Syntax
arr.some(element);
arr.some(element, index);
arr.some(callbackFunction)
Parameters
element: the current element being processed.
index: the index of the current element.
callbackFunction: the test function.
Returns
It returns true if at least one of the elements passes the test.
It returns false if no element passes the test.
Example
Example 1 - Check if all elements are multiple of 100
const arr = [100, 200, 300, 400];
const multipleOfHundred = (element) => element % 100 === 0;
console.log(arr.some(multipleOfHundred));
Output
true
Example 2 - Check if all elements are multiple of 5
const arr = [1, 2, 3, 4];
const multipleOfFive = (element) => element % 5 === 0;
console.log(arr.some(multipleOfFive));
Output
false
16. sort()
The Javascript sort() method sorts the elements of the array. It doesn’t change the length of the array. It takes a callback function as an argument. If no function is provided, it sorts lexicographically.
Syntax
arr.sort();
arr.sort(compareFunction);
Parameters
compareFunction: This function contains the order of sorting.
Returns
The reference of the sorted array. This is not a new array but the original one, sorted.
Example
const months = ['X', 'C', 'Z', 'F', 'A'];
console.log(months.sort());
Output
Array ["A", "C", "F", "X", "Z"]
17. toString()
The Javascript toString() method returns a string after converting all the elements of an array into a string.
Syntax
arr.toString()
Parameters
No Parameter
Returns
String
Example
const months = ['T', 'G', 'B'];
console.log(months.toString());
Output
"T,G,B"
Conclusion
In this article, we have gone through almost 17 Javascript Array methods. There is a long list of JS methods available. You can start doing hands-on on all the available methods. Also, it will help if you start solving FAQs or interview questions. When you start solving interview questions, you will learn more enriching features of array methods. The more you make your hands dirty in this, the easier it will be for you to grasp.
Please contact us through email if you find any section in this article confusing or complex. We will be more than happy to assist you. Otherwise, if you have any doubts, please feel free to put up a comment. We will reply as soon as possible.
Thank you for your time.
People are also reading:
Leave a Comment on this Post