Most used JavaScript Array Methods You Should Know
Hey guys, today I am going to write an important article about one of the coolest data structure of JavaScript which nothing but Array. If you are a developer or want to be a developer, you haven’t any way to avoid its use. It’s pretty much cool to handle data in JS. So, let’s dive into it.
Most used JavaScript Array Methods
1. concat()
It used to add or concatenate multiple array to one array. When we need to add or concatenate one more than array, we can use it.
array.concate(anotherArray);
const arr = [32, 34, 54, 65, 34]
const anotherArr = [76, 45, 65, 80]const result = arr.concat(anotherArr);console.log(result);
/*
expected result:
[
32, 34, 54, 65, 34,
76, 45, 65, 80
]
*/
N.B. You can easily do that using the spread operator of Es-6. It’s pretty much cool thing. For Example:
const arr = [32, 34, 54, 65, 34]
const anotherArr = [76, 45, 65, 80]const result = [...arr, ...anotherArr];console.log(result);
/*
expected result:
[
32, 34, 54, 65, 34,
76, 45, 65, 80
]
*/
2. unshift()
It’s used to add the first element of an array.
array.unshift(‘arr_element’);
const names = ['Jhon', 'Justin', 'Michel'];names.unshift('Smith');
console.log(names); // expected output: [ 'Smith', 'Jhon', 'Justin', 'Michel' ]
3. shift()
It’s used to remove the very first element of an array.
array.shift();
const names = ['Jhon', 'Justin', 'Michel'];names.shift();
console.log(names); // expected output: [ 'Justin', 'Michel' ]
4. push()
When you add the new element at the last of an array, you can use it.
array.push(‘push_element’);
const names = ['Jhon', 'Justin', 'Michel'];names.push('Clark');
console.log(names);
// expected output: [ 'Jhon', 'Justin', 'Michel', 'Clark' ]
5. pop()
If you want to remove the very last element of an array, pop() method is going to be a good solution to you.
array.pop();
const names = ['Jhon', 'Justin', 'Michel'];names.pop();
console.log(names); // expected output: [ 'Jhon', 'Justin' ]
6. splice()
It’s one of the most important array method in javascript. By using that, you can insert elements at a specific index position, you can remove array elements and you can replace elements at a specific index position. You have to remain in mind that, array elements start with 0 index.
array.splice(startingIndex, removeElement, insertElement);
const names = ['Jhon', 'Justin', 'Michel', 'Clark'];// insert element at index-1.
names.splice(1, 0, 'Mark');
console.log(names);
// expected output: [ 'Jhon', 'Mark', 'Justin', 'Michel', 'Clark' ]// insert 3 elements at index-3.
names.splice(3, 0, 'Bar', 'Doe', 'Foo');
console.log(names);
// expected output: [ 'Jhon', 'Justin', 'Michel', 'Bar', 'Doe', 'Foo', 'Clark' ]// Remove 2 elements at index-2.
names.splice(1, 2);
console.log(names);
// // expected output: [ 'Jhon', 'Clark' ]// Replace 2 elements at index-0, I mean starting point.
names.splice(0, 2, 'Linkin', 'Ellen');
console.log(names);
// // expected output: [ 'Linkin', 'Ellen', 'Michel', 'Clark' ]
7. splice()
If you want to copy array elements by value not copy by reference, the slice() method is going to be a good solution for you. You can change or do anything with copied string but the previous array will remain unchanged.
const names = ['Jhon', 'Justin', 'Michel', 'Clark'];const copiedName = names.slice(1, 3);
console.log(copiedName);
// expected output: [ 'Justin', 'Michel' ]copiedName['1'] = 'Linkin';// the copiedName Array after Changing
console.log(copiedName);
// expected output: [ 'Justin', 'Linkin' ]// the previous names Array after Changing copiedName Array.
console.log(names);
// expected output: [ 'Jhon', 'Justin', 'Michel', 'Clark' ]
// its remain unchaged
8. indexOf() & lastIndexOf()
indexOf() returns the index of certain array element. If you have one more similar array elements, indexOf() returns the index of the first element and lastIndexOf() returns the index of the last element.
array.indexOf(‘element’);
array.lastIndexOf(‘element’);
const names = ['Jhon', 'Justin', 'Michel', 'Justin'];console.log(names.indexOf('Justin')); // expected output: 1console.log(names.lastIndexOf('Justin')); // expected output: 3
9. reverse()
reverse() is used for reversing an array. If you need to reverse an array, you can use it.
array.reverse();
const names = ['Jhon', 'Justin', 'Michel', 'Justin'];const reversedNames = names.reverse();
console.log(reversedNames); // expected output: [ 'Justin', 'Michel', 'Justin', 'Jhon' ]
10. join()
When you need to convert an array to string, join() is a cool method for you. It converts array to string through using ‘comma’, ‘space’, and any other separators. I think, It’s an alternative of split() method of string.
array.join(‘separator’);
const names = ['Jhon', 'Justin', 'Michel', 'Justin'];const arrayToString = names.join(', ');
console.log(arrayToString);
// expected output: Jhon, Justin, Michel, Justin
Cool Array Traversing Methods in JavaScript
1. forEach()
It’s used to traverse an array. forEach() method takes a callback function that contains three parameters such as value, index, and array.
array.forEach((value, index, array) => {return ‘something’})
const names = ['Jhon', 'Justin', 'Michel', 'Justin'];names.forEach ((value, index) => {
let result = `(${index + 1}) ${value}`;
console.log(result);
});
/*
expected output:
(1) Jhon
(2) Justin
(3) Michel
(4) Justin
*/
2. map()
It’s pretty much cool array method that returns a new array including the wanted data from an array. You can easily create an array with the property value of an Object.
array.map((something) => something.property);
// map() in array
const numbers = [3, 4, 5, 6, 7];const modifiedNumbers = numbers.map(number => number * number)
console.log(modifiedNumbers)
// expected output: [ 9, 16, 25, 36, 49 ]// map() in array including object
const persons = [
{ name: 'John Doe', age: 30, country: 'Germany' },
{ name: 'Michel Clark', age: 40, country: 'Australia' },
{ name: 'Steve Smith', age: 43, country: 'England' },
{ name: 'Json Roy', age: 36, country: 'Engand' },
]const personsName = persons.map( (person) => person.name);
console.log(personsName);
// expected output: [ 'John Doe', 'Michel Clark', 'Steve Smith', 'Json Roy' ]const personsCountry = persons.map( (person) => person.country);
console.log(personsCountry);
// expected output: [ 'Germany', 'Australia', 'England', 'Engand' ]const personsAge = persons.map( (person) => person.age);
console.log(personsAge);
// expected output: [ 30, 40, 43, 36 ]
3. filter()
If we want to create an array from another array based on our condition, filter() is the best solution for that. It returns a new array based on your logic.
array.filter(callback());
// filter() in array
const numbers = [3, 4, 5, 6, 7];const bigger = numbers.filter(number => number > 5)
console.log(bigger)
// expected output: [ 6, 7 ]// filter() in array including Object
const persons = [
{ name: 'John Doe', age: 30, country: 'Germany' },
{ name: 'Michel Clark', age: 48, country: 'Australia' },
{ name: 'Steve Smith', age: 43, country: 'England' },
{ name: 'Json Roy', age: 56, country: 'Engand' },
]const john = persons.filter((person) => person.name === 'John Doe');
console.log(john);
// expected output: [ { name: 'John Doe', age: 30, country: 'Germany' } ]const olderPerson = persons.filter((person) => person.age > 40);
console.log(olderPerson);
/*
expected output:
[
{ name: 'Michel Clark', age: 48, country: 'Australia' },
{ name: 'Steve Smith', age: 43, country: 'England' },
{ name: 'Json Roy', age: 56, country: 'Engand' }
]
*/
4. find()
find() and filter() are almost same. But the difference between them, filter() returns an array including one element or multiple elements based on your condition. On the other hand, find() returns only the first element based on condition.
array.find(callback());
// find() in array
const numbers = [3, 4, 5, 6, 7];const bigger = numbers.find(number => number > 5)
console.log(bigger)
// expected output: 6// find() in array including Object
const persons = [
{ name: 'John Doe', age: 30, country: 'Germany' },
{ name: 'Michel Clark', age: 48, country: 'Australia' },
{ name: 'Steve Smith', age: 43, country: 'England' },
{ name: 'Json Roy', age: 56, country: 'Engand' },
]const olderPerson = persons.find((person) => person.age > 40);
console.log(olderPerson);
// expected output: { name: 'Michel Clark', age: 48, country: 'Australia' }
5. findIndex()
When we want to see the first index of getting elements from an array based on condition, we can use findIndex() method.
Difference between find() and findIndex(), find() returns the first matching value and findIndex() returns the first matching index from an array. array.find(callback());
// findIndex() in array
const numbers = [3, 4, 5, 6, 7];const biggerIndex = numbers.findIndex(number => number > 5)
console.log(biggerIndex)
// expected output: 3// the first element bigger than 5 is 6. the index of 6 is 3
// that's why, the output is 3
6. reduce()
reduce() is a little bit tricky method of an array. The callback function of reduce() method gets two arguments(the first argument is an initial value like 0, the second argument is an array element) form an iterable element like an array or array object, and finally it returns a result what we want by manipulating them.
you can provide an initial value as an argument of reduce() method with callback function but it’s not mandatory.
array.reduce(callback(initiaElement, arrayElement), initial value);
// reduce() in array
const numbers = [3, 4, 5, 6, 7];const total = numbers.reduce((init, el) => init + el);
console.log(total);
7. sort()
sort() is used to decorate an array elements by ASC or DESC order. It returns a sorted array.
array.sort(callback());
// sort() in array
const numbers = [2, 54, 1, 34, 6, 9]// sorted by ASC order
const sortByASC = numbers.sort((a, b) => a - b);
console.log(sortByASC);
// expected output: [ 1, 2, 6, 9, 34, 54 ]// sorted by DESC order
const sortByDESC = numbers.sort((a, b) => b - a);
console.log(sortByDESC);
// expected output: [ 54, 34, 9, 6, 2, 1 ]// sort in array object
const persons = [
{ name: 'John Doe', age: 30, country: 'Germany' },
{ name: 'Michel Clark', age: 40, country: 'Australia' },
{ name: 'Steve Smith', age: 22, country: 'England' },
{ name: 'Json Roy', age: 36, country: 'Engand' },
]// sorted by ASC order
const sortPersonByASC = persons.sort((a, b) => a.age - b.age);
console.log(sortPersonByASC);
/*
expected output:
[
{ name: 'Steve Smith', age: 22, country: 'England' },
{ name: 'John Doe', age: 30, country: 'Germany' },
{ name: 'Json Roy', age: 36, country: 'Engand' },
{ name: 'Michel Clark', age: 40, country: 'Australia' }
]
*/// sorted by DESC order
const sortPersonByDESC = persons.sort((a, b) => b.age - a.age);
console.log(sortPersonByDESC);
/*
expected output:
[
{ name: 'Michel Clark', age: 40, country: 'Australia' },
{ name: 'Json Roy', age: 36, country: 'Engand' },
{ name: 'John Doe', age: 30, country: 'Germany' },
{ name: 'Steve Smith', age: 22, country: 'England' }
]
*/
8. every()
every() method tests all the elements of an array according to our provided condition and it returns true or false.
array.every(callback());
// every() in array
const numbers = [2, 54, 1, 34, 6, 9]// check evan
const isEvan = numbers.every(number => number%2 === 0);
console.log(isEvan);
// expected output: false// check bigger than 0
const isBigger = numbers.every(number => number > 0);
console.log(isBigger);
// expected output: true
That’s all for now. Thanks everyone for being with me. If you have any questions or suggestions, you can drop it in the comment box below.
