Es6 🆕 Js Array Methods You may not know about

#javascript #100daysofcode #react

According to ECMAScript2015(Es6), new functionalities were added to JavaScript.

Most of the new methods were added for arrays.
In this article, we will explore some of them.

`.from( )`

This function returns a copy of the array without copying the reference of the given array.

Generally, In Array whenever we make a copy of the array the
reference remains the same for the new copied array .

Because of this behaviour any changes to duplicate array also
reflect on the original one.

Example :

  let no = [2,3,4,5,6]
  let copyno = no // copy of no
  console.log(copyno) // [2,3,4,5,6]
  // adding '10' at 0 index of copyno 
  copyno[0] = 10 // this will also be reflected on no array.
  console.log(no) //[10,3,4,5,6]

But .from() alter this kind of behaviour.

let copyarr = Array.from(originalArray)

Example :

   let count = [2, 4, 5, 6, 7, 8, 9, 13];
   let count2 = Array.from(count);
   count2[8] = 14;
   console.log(count); 
   /* [2, 4, 5, 6, 7, 8, 9, 13] remain unchanged*/
   console.log(count2); 
   /* [2, 4, 5, 6, 7, 8, 9, 13, 14] */

We can also pass a callback function to .from()

let even = Array.from(count, (x) => x % 2 == 0);
console.log(even);
/* [true, true, false, true, false, true, false, false] */

`.enteries( )`

This function returns an iterable object which contains key:value
pairs.

let allEntry = arr.enteries()

 let numbers = new Array(2, 3, 4, 5, 6);
 let aEnteries = numbers.entries();
 console.log(aEnteries.next().value);
 console.log(aEnteries.next().value);
 /* [0,2] [1,3] [key,value]*/

`.keys() & .values()`

This both function works the same as .entries().
But .keys() return only keys (indexes) and .values return values(element).

let count = [2, 4, 5, 6, 7, 8, 9, 13];

let allKeys = count.keys(); //return object contains keys only
console.log(allKeys.next().value);//0 
console.log(allKeys.next().value);//1
console.log(allKeys.next().value);//2

let allValues = count.values();
console.log(allValues.next().value)//2
console.log(allValues.next().value)//4
console.log(allValues.next().value)//5

`.fill( )`

Fill function fills the array with static value at all of the
position by default.


let games = ["football", "basket ball", "swimming", "cricket"];
games.fill("football");
console.log(games);
/* ["football", "football", "football", "football"] */

To start the filling from a given position we can pass another parameter specifying the starting index.

let games = ["football", "basket ball", "swimming", "cricket"];
games.fill("football",2);
/* ["football", "basket ball", "football", "football"] */
//  0         , 1            , 2          , 3

we can also pass the position where we want to end the fillings.
The end index is inclusive in filling process.

let games = ["football", "basket ball", "swimming", "cricket"];
games.fill("football",1,2);
/* ["football", "football", "football", "cricket"] */
//  0         , 1 (start) , 2 (ending) , 3

`includes( )`

This function returns True if the given element is found in the
array and False if not.

arr.includes(element)

 let count = [2, 4, 5, 6, 7, 8, 9, 13];
 console.log(count.includes(7)) // true
 console.log(count.includes(14))  //false

`.find( ) & .findIndex( )`

.find( ) function receives a callback function.

This callback function will loop through all the values and the
first value which satisfies the condition will be returned.

.findIndexOf( ) function also work like .find( ) but this
function returns the index of the value.

Example :

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 24];
function multipleOf12(element, index, array) {
  return element % 12 == 0;
}
console.log(numbers.find(multipleOf12));
/* find return the element which first satisfies the condition  thats why we get 12 as output instead of 24*/

console.log(numbers.findIndex(multipleOf12));
/* find return the  index of the element which is 11 in our case */

Thankyou for your read❤️
" Keep Learning "

Top comments (8)

Aharon Hyman • Nov 29 '20

One of the methods I recently started using and now seem to need it more than ever is .join()

The join() method creates and returns a new string by concatenating all of the elements in an array (or an array-like object), separated by commas or a specified separator string. If the array has only one item, then that item will be returned without using the separator.