What is an Array?
Array is a data structure that is used to store a collection of multiple items in a single variable. The collection can have any type of data such as string, number, boolean, etc.
Example
const array1 = ["Hello", 10, 20, "World", true];
// this is how an array is initialized
How to access elements of an array?
Elements in the array have a fixed index according to their positions in the array. The initial index starts from 0 i.e., the index of the first element is 0, the index of the second element is 1, and so on.
const arr = ["Hello", "World"];
console.log(arr[0]); // will print Hello
console.log(arr[1]); // will print World
// this is how we can access the elements in an array
Different Array Methods in JavaScript
1. length
It gives us the total number of elements present inside the array i.e., the length of an array.
Example
const names = ["Joe", "John", "Emily", "Monica"];
console.log(names.length); // will print 4
2. at
It returns the element at the specified index. We can also specify negative values, in such case it will count from back of the array and return the element.
Example
const names = ["Joe", "John", "Emily", "Monica"];
console.log(names.at(2)); // will print Emily
console.log(names.at(-1)); // will print Monica
3. concat
It is used to merge two or more arrays. It will not change the original array, instead it will return a new array.
Example
const names = ["Joe", "John", "Emily", "Monica"];
const names2 = ["Ron", "Harry", "Hagrid"];
console.log(names.concat(names2));
// will print [ 'Joe', 'John', 'Emily', 'Monica', 'Ron', 'Harry', 'Hagrid' ]
4. copyWithin
It is used to copy and paste elements within the array. We need to specify 3 things in this method.
1) target - The end from where we need to start copy pasting elements.
2) start - The index of the starting element which need to be copied.
3) end - The index of the ending element till which the elements needs to be copied.
Syntax : arr.copyWithin(target, start, end);
It will modify the original array.
Example
const names = ["Joe", "John", "Emily", "Monica"];
console.log(names.copyWithin(0,2,3));
// will print ["Emily", "John", "Emily", "Monica"]
5. fill
It is used to change all or certain elements in an array with static value. We need to specify 3 things in this method.
1) element - The element which needs to be added.
2) start - The index of the starting element from where it should start adding the static value.
3) end - The index+1 of the ending element till which it should keep adding the static value.
Syntax : arr.fill(element, start, end);
It will modify the original array.
Example
const names = ["Joe", "John", "Emily", "Monica"];
console.log(names.fill("Ken", 1, 3));
// will print ["Joe", "Ken", "Ken", "Monica"]
6. filter
It is used to filter out elements of an array on the basis of the function provided as a parameter.
Example
const names = ["Joe", "John", "Emily", "Monica"];
console.log(names.filter(word => word.length>=4));
// will print ["John", "Emily", "Monica"]
7. find
It is used to find a element based on the condition provided as parameter to the method. It will return the first element it finds satisfying the condition. If it does not find any element satisfying the given condition, it will return undefined.
Example
const names = ["Joe", "John", "Emily", "Monica"];
console.log(names.find(word => word.length>=4));
// will print John
8. findIndex
It is used to find a element's index based on the condition provided as parameter to the method. It will return the first element's index it finds satisfying the condition. If it does not find any element satisfying the given condition, it will return -1.
Example
const names = ["Joe", "John", "Emily", "Monica"];
console.log(names.findIndex(word => word.length>=4));
// will print 1
9. findLast
It is used to find a element's index based on the condition provided as parameter to the method. It will return the last element it finds satisfying the condition. If it does not find any element satisfying the given condition, it will return undefined.
Example
const names = ["Joe", "John", "Emily", "Monica"];
console.log(names.findLast(word => word.length>=4));
// will print Monica
10. findLastIndex
It is used to find a element's index based on the condition provided as parameter to the method. It will return the last element's index it finds satisfying the condition. If it does not find any element satisfying the given condition, it will return -1.
Example
const names = ["Joe", "John", "Emily", "Monica"];
console.log(names.findLastIndex(word => word.length>=4));
// will print 3
11. flat
It is used to flatten the array by specified depth. It will return a new array with all sub arrays concatenated into it.
Example
const arr = [1, 2, 3, 4, 5, [6,7]];
console.log(arr.flat());
// will print [1, 2, 3, 4, 5, 6, 7]
12. forEach
It executes the provided function on each and every element in the array.
Example
const names = ["Joe", "John", "Emily", "Monica"];
names.forEach(element => console.log("Hey"+element));
// will print :
HeyJoe
HeyJohn
HeyEmily
HeyMonica
13. includes
It will return true if the value provided exists in the array else it will return false.
Example
const names = ["Joe", "John", "Emily", "Monica"];
console.log(names.includes("Joe"));
// will print : true
14. indexOf
It returns the index of the value provided if it exists in the array else it returns -1.
Example
const names = ["Joe", "John", "Emily", "Monica"];
console.log(names.indexOf("John"));
// will print : 1
15. join
It returns a string which is concatenation of all the elements of array separated by a comma or any specific separator provided.
Example
const names = ["Joe", "John", "Emily", "Monica"];
console.log(names.join());
// will print : Joe,John,Emily,Monica
16. map
It returns a new array filled with the modified elements of the array. The elements are modified according to the function provided.
Example
const names = ["Joe", "John", "Emily", "Monica"];
console.log(names.map(element => "Hello "+element));
// will print : ["Hello Joe", "Hello John", "Hello Emily", "Hello Monica"]
17. push
It adds one or more elements to the end of the array.
Example
const names = ["Joe", "John", "Emily", "Monica"];
names.push("Ron");
console.log(names);
// will print : ["Joe", "John", "Emily", "Monica", "Ron"]
18. pop
It removes one element from the end of the array.
Example
const names = ["Joe", "John", "Emily", "Monica"];
names.pop();
console.log(names);
// will print : ["Joe", "John", "Emily"]
19. reverse
It removes one element from the end of the array. It will modify the original array.
Example
const names = ["Joe", "John", "Emily", "Monica"];
names.reverse();
console.log(names);
// will print : ["Monica", "Emily", "John", "Joe"]
20. shift
It removes the first element of array. It will modify the original array.
Example
const names = ["Joe", "John", "Emily", "Monica"];
names.shift();
console.log(names);
// will print : ["John", "Emily", "Monica"]
21. slice
It returns a new array containing a part of the original array. It cuts the array from the starting index we specify till the end index (end index not included) we specify.
Example
const names = ["Joe", "John", "Emily", "Monica"];
console.log(names.slice(1,3));
// will print : ["John", "Emily"]
22. sort
It sorts the elements inside the array. It converts the elements in strings and sorts them according to UTF-16 code units values.
Example
const names = ["Joe", "John", "Emily", "Monica"];
names.sort();
console.log(names);
// will print : ["Emily", "Joe", "John", "Monica"]
23. toString
It converts the array into a single string.
Example
const names = ["Joe", "John", "Emily", "Monica"];
console.log(names.toString());
// will print : Joe,John,Emily,Monica
24. unshift
It adds one or more elements to the start of the array.
Example
const names = ["Joe", "John", "Emily", "Monica"];
names.unshift("Ron", "Harry");
console.log(names);
// will print :
["Ron", "Harry", "Joe", "John", "Emily", "Monica"]
25. splice
It is used to add elements at certain index by removing the existing element of shifting it ahead. It takes 3 parameters.
1) target - index of where you want to add the element.
2) Number of elements to remove
3) Element to be added
It will modify the original array.
Example
const names = ["Joe", "John", "Emily", "Monica"];
names.splice(1, 0, "Ron");
console.log(names);
// will print :
["Joe", "Ron", "John", "Emily", "Monica"]
These were some array methods in JavaScript. Surely there are some more to explore. You can explore more of them here (references for this article) :
Thank you for reading this article, I hope you have learnt something new and valuable. See you in the next article!