What is Array in JavaScript?
Arrays are special objects that represent collections of similar-type elements in JavaScript.
When it comes to JavaScript arrays, there are some ways to construct them:
// by array literal
var arrayname = [value1,value2.....valueN];
// by directly creating an instance of an array using the new keyword.
var arrayname = new Array();
// by using the new keyword and an Array constructor
var emp = new Array("Red", "Green", "Blue");
Array Methods
Array methods can help make our JavaScript code cleaner and more efficient. In this article, we'll explore some of the most commonly used array methods and how they can help simplify our code.
1. concat( )
The concat() function joins two or more arrays and creates a new array without altering the original one.
const arr1 = [ 2, 4, 6];
const arr2 = [ 8, 10, 12];
const arr3 = [ 14, 16, 18];
console.log(arr1.concat(arr2, arr3));
// Output
[2, 4, 6, 8, 10, 12, 14, 16, 18]
You can also pass a string as an argument.
const arr1 = ["Red", "Green", "Blue"];
console.log(arr1.concat("Yellow"));
// Output
[ "Red", "Green", "Blue", "Yellow" ]
2. forEach( )
The forEach( ) method helps to loop through an array with the execution of a provided callback function for every item in the array.
var colors = ["Red", "Green", "Blue"];
colors.forEach(function(color) {
console.log(color);
});
// Output
"Red"
"Green"
"Blue"
3. indexOf( )
The indexOf( ) method gives you the index of the first existence of the element that you are searching for or gives you -1 if the item is not there.
var numbers = [30, 40, 50, 60, 30, 40];
console.log(numbers.indexOf(40)); // 1
console.log(numbers.indexOf(60)); // 3
4. lastIndexOf( )
The lastIndexOf( ) method gives you the index of the last existence of the element you are looking for or gives you -1 if the item is not there. It uses backward search to find items.
var numbers = [30, 40, 50, 60, 30, 40, 60];
console.log(numbers.lastIndexOf(40)); // 5
console.log(numbers.lastIndexOf(60)); // 6
5. join( )
The join( ) method concatenates all of the elements, each of which is separated by the given spacer and returns a new string.
const alphabets = ["A", "B", "C", "D"];
console.log(alphabets.join(' '));
// Output
"A B C D"
7. pop()
The pop( ) method deletes the last item of the array and returns that element.
const alphabets = ["A", "B", "C", "D"];
alphabets.pop( );
console.log(alphabets);
// Output
[ "A", "B", "C" ]
8. push( )
The push( ) method helps to add one or more items at the back of an array and outputs an updated length.
let colors = ["Red", "Green", "Blue"];
colors.push("Yellow");
console.log(colors);
// Output
[ "Red", "Green", "Blue", "Yellow" ]
9. reverse( )
The reverse( ) method flips an array in position. The element at the last index will be first, and the item at the first index will be last.
const alphabets = ["A", "B", "C", "D"];
console.log(alphabets.reverse( ));
// Output
[ "D", "C", "B", "A" ]
10. shift( )
The shift() method deletes the first element from an array and gives back that item.
const alphabets = ["A", "B", "C", "D"];
alphabets.shift( );
console.log(alphabets);
// Output
[ "B", "C", "D" ]
11. unshift( )
Unshift( ) adds one or more items to the start of an array and returns the new array length.
let colors = ["Red", "Green", "Blue"];
colors.unshift("Yellow");
console.log(colors);
// Output
[ "Yellow", "Red", "Green", "Blue" ]
12. slice( )
The slice( ) method is used to duplicate a section of an array into another array.
const colors = ["Red", "Green", "Blue", "Yellow", "Purple"];
const greenBlue = colors.slice(1, 3);
console.log(greenBlue);
// Output
[ "Green", "Blue" ]
where (1) is the starting parameter and (3) is the stopping parameter.
13. splice( )
The splice( ) method allows you to add elements to an array in the middle. If you want to delete or replace existing elements, you can also use this method.
let numbers = [1, 2, 3, 4];
numbers.splice(2, 0, 5, 6)
console.log(numbers);
// Output
[ 1, 2, 5, 6, 3, 4 ]
14. sort( )
You can sort array elements in either ascending or descending order using the sort( ) method.
const alphabets = ["B", "A", "D", "C"];
console.log(alphabets.sort( ));
// Output
[ "A", "B", "C", "D" ]
15. includes( )
The includes( ) method checks for a value. If it is present in an array, it will return true; otherwise, it will return false.
const alphabets = ["A", "B", "C", "D"];
console.log(alphabets.includes("B")); // return true
console.log(alphabets.includes("G")); // return false
16. find( )
ES5 uses the indexOf() and lastIndexOf() methods for finding elements in arrays. The find( ) method was introduced in ES6. This method gives the first item as output in the array that meets the specific criteria.
The following example finds the first even number in an array.
let numbers = [1, 3, 4, 6, 7];
console.log(numbers.find(e => e % 2 == 0));
// Output
4
17. map( )
This method calls a given function on each item of the existing array and generates a new array with the output. The following example demonstrates how to alter an array of integers using callback() and the Math built-in function.
let numbers = [36, 49, 64, 81];
console.log(numbers.map(Math.sqrt));
// Output
[ 6, 7, 8, 9 ]
18. filter ( )
The filter() method creates a new array from only the elements that satisfy the criteria of the given mechanism.
const numbers = [55, 14, 29, 16, 75];
let over20 = numbers.filter(function (value) {
return value > 20;
});
console.log(over20);
// Output
[ 55, 29, 75 ]
19. reduce ( )
The reduce() method allows you to reduce an array to a single value.
const numbers = [5, 4, 9, 6, 2];
let result = numbers.reduce((sum, current) => sum + current, 0);
console.log(result);
// Output
26
20. toString( )
The toString() method returns an array of strings separated by a comma. It does not modify the original array.
const colors = ["Red", "Green", "Blue", "Yellow", "Purple"];
console.log(colors.toString( ));
// Output
"Red, Green, Blue, Yellow, Purple"
21. every( )
The every() method is used to check if all elements in an array pass a certain condition. If all elements pass the condition, the method returns true. Otherwise, it returns false.
let numbers = [1, 3, 5];
let result = numbers.every(function (e) {
return e > 0;
});
console.log(result); // return true
22. some( )
The some() method determines whether at least one element of an array satisfies an established state. According to the answer to the requirement, this either returns true or false.
let marks = [ 6, 5, 7, 9, 10, 16 ];
lessThanSeven = marks.some(function(e) {
return e < 7;
});
console.log(lessThanSeven); // return true
23. findIndex( )
The findIndex() method yields the index of the entry of the element in an array.
let numbers = [1, 15, 7, 8, 10, 15];
let index = numbers.findIndex(number => number === 15);
console.log(index); // 1
Learn more about Arrays and Array Methods:
Wrap Up
For this article, that is all. Thank you for reading. I hope this was helpful to you. For more articles like this, you can follow me on Hashnode Ishrat as well as on Twitter Ishrat.
Happy learning!