DEV Community

Cover image for Es6 🆕 Js Array Methods You may not know about
Vipin Chandra
Vipin Chandra

Posted on

 

Es6 🆕 Js Array Methods You may not know about

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]

Enter fullscreen mode Exit fullscreen mode

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] */

Enter fullscreen mode Exit fullscreen mode

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] */
Enter fullscreen mode Exit fullscreen mode

.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]*/ 

Enter fullscreen mode Exit fullscreen mode

.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

Enter fullscreen mode Exit fullscreen mode

.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"] */
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

.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 */

Enter fullscreen mode Exit fullscreen mode

Thankyou for your read❤️
" Keep Learning "

Top comments (8)

Collapse
 
hymanaharon profile image
Aharon Hyman

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.

Collapse
 
easyvipin profile image
Vipin Chandra

Yeah join() and toString() are some of the better methods to work with strings in array.

Collapse
 
cwraytech profile image
Christopher Wray

Great post! Thank you for sharing! There are a few useful methods that I did not understand well here! Greatly appreciate it.

Collapse
 
easyvipin profile image
Vipin Chandra

Thank you, Christopher :)

Collapse
 
ben profile image
Ben Halpern

Great post

Collapse
 
easyvipin profile image
Vipin Chandra

Thank you ,ben

Collapse
 
manifico profile image
ÊL MÃNĮFĮČØ

Great post. Thanks

Collapse
 
easyvipin profile image
Vipin Chandra

Thanks,Demsong

This post blew up on DEV in 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!