If you are working with JavaScript, you probably use Arrays a lot. Very often, you need to do some kind of manipulation with arrays or iterate through them. In this post, I compiled a list of the most useful array methods that can save you time, and your code will look cleaner and more readable. 1. ForEach This one is the most popular method. Instead of doing or loops to iterate through all elements of an array, we can call the method. The method accepts function as a parameter and calls this function once for each element in the array, in order. for while forEach() forEach() JavaScript var languages = ["C#", "Java", "C++", "PHP", "JavaScript"];

languages.forEach((language, index) => {
   console.log(index+1 + ". " + language);
});

// 1. C#
// 2. Java
// 3. C++
// 4. PHP
// 5. JavaScript method has the following syntax: forEach() array.forEach((currentValue, index, arr) => {
 //do your stuff here
}); – the value of the current element currentValue the array index of the current element index – – the array itself arr The last two parameters (index and arr) are optional. 2. Map The method creates a new array by mapping each value of the original array through a transformation function. The method does not change the original array. map() map() For example, we have an array of numbers and we would like to square all elements of the array. For this purpose we can use the method: map() var numbers = [1,2,3,4];

var squaredNumbers = numbers.map((number) => {
  return number * number;
});

console.log(squaredNumber) // => [1,4,9,16] One more example. We want to create a new array by transforming items of the original array into objects with properties id, name, and category: languages = ["C#", "PHP", "JavaScript"];
const mappedLanguageList = languages.map(function(language, ,index) {
  return {
    id: index + 1,
    name: language,
    category: "Programming Language"
  }; 
}); Map method creates a new array that we store in the mappedLanguageList variable; it does not update the original array. console.log(mappedLanguageList);
// => [
//     {id: 1, name: "C#", category: "Programming Language"},
//     {id: 2, name: "PHP", category: "Programming Language"},
//     {id: 3, name: "JavaScript", category: "Programming Language"}
//    ]
 
console.log(languages);
// => ["C#", "PHP", "JavaScript"] method has the following syntax: map() array.map(function(currentValue, index, arr) {
    //do your mapping here
}); – the value of the current element currentValue the array index of the current element index – – the array itself arr The last two parameters (index and arr) are optional. 3. Find If you would like to find an item in an array that matches a specific condition, you could use the method. The method looks through each element of the array and returns the first one that passes the test, which is provided as a function. The function returns (pass) or (does not pass). And the method returns the value of the element that passes the test. find() find() true false find() Let’s take a look at the following example. Here we have an array of numbers and we would like to find the first even number in the array. [5, 7, 4, 3, 6].find(function(number) {
    return number % 2 === 0;
}); // => 4 In this example, the method returns 4 because it is the first element that passes the test (the function returns true). In the array, the number 6 also passes the test, but the method returns only the first value found and does not check the remaining values. find() find() If no element passes the test, the method returns find() undefined. method has the following syntax: find() array.find(function(currentValue, index, arr) {
    //put your test here
}); – the value of the current element currentValue the array index of the current element index – – the array itself arr The last two parameters (index and arr) are optional. The method does not change the original array. find() 4. Filter The method works similarly to the method but returns a new array filled with all values that pass a test. filter() find() Let’s take the array of numbers from the previous example and find all even numbers in it. [5, 7, 4, 3, 6].filter(function(number) {
    return number % 2 === 0;
});  // => [4, 6] The method created a new array that we store in the variable. filter() evenNumbers If no element passes the test, the method returns an empty array_._ filter() The method has the following syntax: filter() array.filter(function(currentValue, index, arr) {
  //put your test here
}); – the value of the current element currentValue the array index of the current element index – – the array itself arr The last two parameters (index and arr) are optional. The method does not change the original array. filter() 5. Every The method checks if all the elements in the array pass a test that is provided as a function. It returns a boolean value. If it finds at least one element where the function returns false, the method returns false. every() every() [5, 7, 4, 3, 6].every(function(number) {
    return number % 2 === 0;
});
// returns false [4, 8, 6].every(function(number) {
    return number % 2 === 0;
});
//returns true The method has the following syntax: every() array.every(function(currentValue, index, arr) {
  //put your test here
}); – the value of the current element currentValue the array index of the current element index – – the array itself arr The last two parameters (index and arr) are optional. The method does not change the original array. every() 6. Some The method checks if any of the elements in an array pass a test that is provided as a function. It returns a boolean value.  If it finds at least one element where the function returns true the method returns . some() some() true [5, 7, 4, 3, 6].some(function(number) {
    return number % 2 === 0;
});
// returns true The method has the following syntax: some() array.some(function(currentValue, index, arr) {
    //put your test here
}); – the value of the current element currentValue the array index of the current element index – – the array itself arr The last two parameters (index and arr) are optional. The () method does not change the original array. some 7. Sort The method sorts the elements of an array. By default, the method sorts the values as strings in alphabetical and ascending order. This works perfectly for but it does not work for numeric values. sort() sort() strings ["Java", "PHP", "C#", "JavaScript", "Ruby"].sort();
// => ["C#", "Java", "JavaScript", "PHP", "Ruby"]
 
 
[12, 4, 1, 7, 3, 100].sort();
// => [1, 100, 12, 3, 4, 7] As you see, the default behavior is not the best choice for sorting an array by a numeric value. In this case, you need to provide a “compare function”. Ascending order: [12, 4, 1, 7, 3, 100].sort(function(a, b){
    return a-b
});
// => [1, 3, 4, 7, 12, 100] Descending order: [12, 4, 1, 7, 3, 100].sort(function(a, b){
    return b-a
});
// => [100, 12, 7, 4, 3, 1] Sorting array of objects: var people = [
     {name: "Bill", age: 42},
     {name: "Peter", age: 35},
     {name: "Marry", age: 27}
];
 
people.sort(function(a, b) {return a.age - b.age});
// => [{name: "Marry", age: 27}, {name: "Peter", age: 35}, {name: "Bill", age: 42}]; If you would like to sort objects by string value you can use something like this: people.sort(function (a,b) {
   if (a.name < b.name){
     return -1;
   } 
   if (a.name > b.name) {
     return 1;
   }
   return 0;
});
// => [{name: "Bill", age: 42}, {name: "Marry", age: 27}, {name: "Peter", age: 35}] Or simply use string method that does the comparison for you: localeCompare() people.sort(function (a,b) {
   return a.name.localeCompare(b.name)
});
// => [{name: "Bill", age: 42}, {name: "Marry", age: 27}, {name: "Peter", age: 35}] The method has the following syntax: sort() array.sort(compareFunction); – a function that defines an alternative sort order. The function should return a negative, zero, or positive value. This parameter is optional. compareFunction The method changes the original array. sort() Conclusion We looked at useful array methods that make code easier to read and debug. All the operations we looked at can be done with the classic But for and while loops luck is not selfdescribin for or while loops.

The 7 Most Useful Array Methods in JavaScript

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Improving Your Web-Based App With Micro Frontends

A Deep Dive Into the JavaScript Some() Method

Array Filter vs Array Reduce vs For Loop

Array Manipulation: Understanding JavaScript Array Methods

Demystifying Javascript Array Methods with Practical Examples

Learn JavaScript Array Methods in just 8 Minutes!!

Improving Your Web-Based App With Micro Frontends

A Deep Dive Into the JavaScript Some() Method

Array Filter vs Array Reduce vs For Loop

Array Manipulation: Understanding JavaScript Array Methods

Demystifying Javascript Array Methods with Practical Examples

Learn JavaScript Array Methods in just 8 Minutes!!

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps