Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
May 26, 2021 02:34 pm GMT

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 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); // => trueconst allAbove15 = nums.every(num => num >= 15); // => falseconsole.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); // => trueconst someUnder10 = nums.some(num => num < 10); // => falseconsole.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()


Original Link: https://dev.to/joelynn94/8-javascript-array-methods-you-should-know-6ni

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To