Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
53 views

Array Helper Methods in ES6

The document discusses various array helper methods in ES6 including forEach(), map(), filter(), find(), some(), every(), and reduce(). It provides examples of how each method can be used to iterate through arrays, modify array elements, filter arrays, find matching elements, and reduce arrays to single values. The methods make it easier to work with arrays and perform complex tasks like extracting object properties, checking conditions, and more.

Uploaded by

jaba123jaba
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
53 views

Array Helper Methods in ES6

The document discusses various array helper methods in ES6 including forEach(), map(), filter(), find(), some(), every(), and reduce(). It provides examples of how each method can be used to iterate through arrays, modify array elements, filter arrays, find matching elements, and reduce arrays to single values. The methods make it easier to work with arrays and perform complex tasks like extracting object properties, checking conditions, and more.

Uploaded by

jaba123jaba
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 12

Array Helper Methods in ES6

 Array Helper Methods in ES6 (JavaScript) are very useful for


working with data stored in arrays.

 Most of the time working as a web developer work with data


stored in arrays it may be a simple array of numbers or it may be a
complex array of objects where each object is containing a lot of
attributes.

 Array Helper Methods helps lot in working with arrays.

 Array Helper Methods can be used for complex tasks with array
very easily and can also easily work with complex arrays of
objects.
 forEach()

 map()

 filter()

 find()

 some()

 every()

 reduce()
 forEach(): The forEach() function is used to iterates through all
the entries of the array.

Example: To find the sum of all the numbers in an array of numbers.

<script>

let sum = 0;

const numbers = [1, 2, 3, 4, 5];

numbers.forEach( (num) => {  sum = sum + num;});  

document.write(sum); // 15

</script>

Output:
15

 map(): The map() method is used to iterate through all the entries


of the array, modifies them and returns a new array but the old
array is not manipulated.

Example: To multiply each number of the array by 2 and generate a


new array.

<script>

const numbers = [1, 2, 3, 4, 5];

let double = numbers.map( (num) => {   return num * 2;});

  // Its mandatory to have a

  // return while using map

Console.log(double); // [2, 4, 6, 8, 10]

Console.log(numbers);

</script>

Output:
2, 4, 6, 8, 10

Example: The map() method can also be used to extract attributes from


an array of objects and store it in another array.
<script>

const objects = [

    {a:1, b:2},

    {a:3, b:4},

    {a:5, b:6}

];

  let onlybs = objects.map( (object) => {

    return object.b;

});

  

document.write(onlybs); // [2, 4, 6]

</script>

Output:
2, 4, 6

 filter(): The filter() method is used to iterate through all the entries


of the array and filters out required entities into another array.
Example: To filter all objects where flag is 1.

<script>

let objects = [

    {flag:1, a:1},

    {flag:0, a:2},

    {flag:1, a:3}

];

  // Use filter() function to

// filter the object

objects.filter((object) => {      if(object.flag === 1) {

// Display the result

        console.log("flag:" + object.flag

                    + ", a:" + object.a);

    }

});

  </script>

Output:
flag:1, a:1
flag:1, a:3

 find(): The find() method is used to iterate through all the entries


of the array and returns the record matching with a particular
condition.
Example: To find a object where flag is 0.

<script>

let objects = [

    {flag:1, a:1},

    {flag:0, a:2},

    {flag:1, a:3}

];

// Use find() function to

// filter the object

objects.find((object) => {

    if(object.flag === 0) {

        // Display the result

        console.log("flag:" + object.flag

                    + ", a:" + object.a);


    }

});

</script>

Output:
flag:0, a:2
Note: The filter() method returns an array of objects and find() method
returns a single object.

 some() :-
 
This array helper method checks if at least one of the elements satisfies the
provided condition. some() method returns a boolean value. 
 
some() method executes the callback function on each and every element
until it finds one element for which the callback returns true.
 
This method returns true if one element from the array of elements satisfies
the condition. Otherwise it returns false.
 
The difference between find() and some() is, find() returns value
whereas some() returns true or false.
 
Syntax:  arr.some((currentElement, index, arr) => {});
 
Example:

const array = [1, 7, 3, 9, 5];

// checks whether an element is even


const even = (element) => element % 2 === 0;

console.log(array.some(even));
// expected output: true

 every() :-
 
This method checks if each and every element of the array satisfies the
condition and returns true only if all the elements of an array satisfies the
condition.
every() method executes a callback function on each and every element of
the array until it finds an element for which the callback returns false. If such
an element is found, it returns false. Otherwise it returns true.
 
In short, some() returns true if at least one element matches the criteria
whereas every() returns true only if all the elements match the criteria.
 
Syntax:  arr.every((currentElement, index, arr) => {});
 
For the example used in some() method, every() returns false.
 
Example:

const array = [1, 2, 3, 4, 5];

var result=array.every(element=>element%2==0);

console.log(result);

 reduce() :-
 
This method executes a callback function that reduces an array into a single
element. The callback function to reducer() takes 4 arguments:
 
Accumulator: If the initial value is provided in the callback, the accumulator
value is set to the initial value. Otherwise, accumulator value will be set to
array’s first element’s value. This will hold the result of reduce function.
 CurrentElement: It is the current element of the array.
 Index: Current index of array.
 Array: Source array.
 
 
Syntax:  arr.reduce((currentElement, index, arr) => {}, initialValue);
 
Example:

const array = [1, 2, 3, 4, 5];

var result=array.reduce((total,element)=>total+element);

console.log(result);
Example: (with initial value)
var arr = [1, 2, 4, 6, 8];
var result = arr.reduce((total, element) => total + element, 100);
console.log(result);
  
Output: 
121

If the array is empty and no initial value is set, TypeError will be


thrown. Because as said, accumulator takes initial value if set or takes
the first element of an array as its value.

You might also like