8 JavaScript array methods you should know

With most of these methods, you need to understand callbacks. A callback is a function passed as an argument to another function. When using the methods below – JavaScript will take your callback and call it for every single item in the array.

This is…


This content originally appeared on DEV Community and was authored by Joseph Lynn

With most of these methods, you need to understand callbacks. A callback is a function passed as an argument to another function. When using the methods below - JavaScript will take your callback and call it for every single item in the array.

This is not an exhaustive list of array methods. Some will include a "Try it out" section. Try these methods out in the code sandbox.

Array.filter()

/* 
The filter() method creates a new array with all elements that 
pass the test implemented by the provided function.

If the callback function returns true, then the item will be 
included in the final array, if the callback returns false, then 
the item will **NOT** be included in the final array.
*/

const grades = [50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100];

const passingGrades = grades.filter(grade => {
  return grade >= 70
})

console.log(passingGrades)

Try it out

const grades = [50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100];
// TODO - find all grades that are greater or equal to 90:
// 1. create a variable that will hold the new array
// 2. return an array of grades that are 90 or greater

Reference: MDN docs: Array.prototype.filter()

Array.find(callback)

/*
The find() method returns the value of the first element in the 
provided array that satisfies the provided testing function. If no 
values satisfy the testing function, undefined is returned.

You will get back the first item that matches the condition that 
you specify. If no items were found, you will get back undefined.
*/

const ids = [1, 2, 3, 4, 5, 6, 7, 8, 9]

const findId5 = ids.find(id => {
  return id === 5
})

console.log(findId5)

Try it out

const ids = [1, 2, 3, 4, 5, 6, 7, 8, 9]
// TODO - find id 7:
// 1. create a variable that will hold the value that's found
// 2. return the id 7

Reference: MDN docs: Array.prototype.find()

Array.includes(item)

/*
The includes() method determines whether an array includes a 
certain value among its entries, returning true or false as 
appropriate.

Returns true when an item exists in the array and false otherwise.
*/

const groceries = ['apples', 'bananas', 'bread', 'milk']

console.log(groceries.includes('apples')) // => true

Try it out

const groceries = ['apples', 'bananas', 'bread', 'milk']
// TODO - find 'bread' and try 'cereal':
// 1. console.log passing in a string argument to includes()

Reference: MDN docs: Array.prototype.includes()

Array.indexOf(callback)

/*
The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.
*/

const groceries = ['apples', 'bananas', 'bread', 'milk']

console.log(groceries.indexOf('bread')) // => 2

Try it out

const groceries = ['apples', 'bananas', 'bread', 'milk']
// TODO - find the index of 'milk' and what happens when you try 'cereal':
// 1. console.log passing in a string argument to indexOf()

Reference: MDN docs: Array.prototype.indexOf()

Array.every(callback)

/*
The every() method returns true when every item in the array satisfies the condition provided in the callback.
*/

const nums = [10, 15, 20, 25]
const allAbove10 = nums.every(num => num >= 10); // => true
const allAbove15 = nums.every(num => num >= 15); // => false

console.log(allAbove10)
console.log(allAbove15)

Reference: MDN docs: Array.prototype.every()

Array.some(callback)

/*
It returns true if, in the array, it finds an element for which the provided function returns true; otherwise it returns false. It doesn't modify the array. 

The some() method returns true when at least one item in the array satisfies the condition provided in the callback.
*/

const nums = [10, 15, 20, 25]
const someOver18 = nums.some(num => num >= 18); // => true
const someUnder10 = nums.some(num => num < 10); // => false

console.log(someOver18)
console.log(someUnder10)

Reference: MDN docs: Array.prototype.some()

Array.map(callback)

/*
The map() method creates a new array populated with the results of 
calling a provided function on every element in the calling array.

You always get back an array containing the same number of items compared to the original array, but every item has most likely undergone some transformation. Make sure to return inside the map, 
otherwise you will get back undefined.  
*/

const names = ["joe", "sierra", "norah", "oliver"];

const upperCaseNames = names.map((name) => {
  return name.toUpperCase();
});

console.log(upperCaseNames);

Try it out

const names = ["joe", "sierra", "norah", "oliver"];
// TODO - lowercase the names:
// 1. create a variable that will hold the new array values
// 2. return the lowercased names

Reference: MDN docs: Array.prototype.map()

Array.forEach(callback)

/*
The forEach() method iterates over every item in an array. 
It executes a provided function once for each array element.

It will always look for the first parameter you define in your 
callback function and pass to it the correct value.
*/

const numbers = [10, 15, 20, 25, 30, 35, 40, 45, 50]

const eachNumber = numbers.forEach(number => {
  console.log(number)
})

console.log(eachNumber)

// OR sum numbers 

const numbers = [10, 15, 20, 25, 30, 35, 40, 45, 50]

function sumNumbers(numbers) {
  let sum = 0;
  numbers.forEach(number => {
    if(number % 2 !== 0) {
      sum += number
    }
  })
  return sum
}

console.log(sumNumbers(numbers))

Try it out

const numbers = [10, 15, 20, 25, 30, 35, 40, 45, 50]
// TODO - sum all even numbers:
// 1. create a function that takes an array parameter
// 2. create a variable to hold the sum
// 3. loop over the numbers array
// 4. check (inside the foreach if the current number is even) - if it is even, add the number to the sum
// 5. return the sum

Reference: MDN docs: Array.prototype.forEach()


This content originally appeared on DEV Community and was authored by Joseph Lynn


Print Share Comment Cite Upload Translate Updates
APA

Joseph Lynn | Sciencx (2021-05-26T14:34:21+00:00) 8 JavaScript array methods you should know. Retrieved from https://www.scien.cx/2021/05/26/8-javascript-array-methods-you-should-know/

MLA
" » 8 JavaScript array methods you should know." Joseph Lynn | Sciencx - Wednesday May 26, 2021, https://www.scien.cx/2021/05/26/8-javascript-array-methods-you-should-know/
HARVARD
Joseph Lynn | Sciencx Wednesday May 26, 2021 » 8 JavaScript array methods you should know., viewed ,<https://www.scien.cx/2021/05/26/8-javascript-array-methods-you-should-know/>
VANCOUVER
Joseph Lynn | Sciencx - » 8 JavaScript array methods you should know. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/05/26/8-javascript-array-methods-you-should-know/
CHICAGO
" » 8 JavaScript array methods you should know." Joseph Lynn | Sciencx - Accessed . https://www.scien.cx/2021/05/26/8-javascript-array-methods-you-should-know/
IEEE
" » 8 JavaScript array methods you should know." Joseph Lynn | Sciencx [Online]. Available: https://www.scien.cx/2021/05/26/8-javascript-array-methods-you-should-know/. [Accessed: ]
rf:citation
» 8 JavaScript array methods you should know | Joseph Lynn | Sciencx | https://www.scien.cx/2021/05/26/8-javascript-array-methods-you-should-know/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.