DEV Community

loading...

Understanding Javascript Array Series II - Alternate ways of Creating an Array.

nedyudombat profile image Nedy Udombat Updated on ・3 min read

In the first part of this series, I talked about what an array is and how to create an array here.

In this part, I am going to be talking about alternative ways of creating arrays in javascript using some array methods.

Let's dive right into it.

1. Array.prototype.fill()

The .fill() function as the name implies, basically returns an array filled with the specified value from the start index(0) to the end index(length of array).


  const filledArray = Array(5).fill(6);
  console.log(filledArray); // [6, 6, 6, 6, 6]

The .fill() method accepts three arguments, which are the value to be filled, the start index and the end index to be filled.

  Array().fill(value, start, end);
  // the start and end arguments defaults to 0 when not provided


  // when 1 argument is specified, it assumes it to be the value to be filled
  const arr = Array(5).fill('nedy') // ['nedy', 'nedy', 'nedy', 'nedy', 'nedy']

  // when a second argument is provided, it assumes it to be the starting position.
  const arr2 = Array(5).fill('a', 2) // [undefined, undefined', 'a', 'a', 'a']

  // when a third argument is provided, that signifies the end position.
  const arr3 = Array(5).fill('b', 2, 4) // [undefined, undefined', 'b', 'b', undefined]


It is important to note that the .fill() method returns a mutated array. This means it returns a modified version of the original array.

2. Array.of()

The .of() is similar to the Array() method that we use in creating arrays. The only difference is that here the arguments passed is treated as the actual elements of the array.


  const arr = Array.of(7); // [7] 
  const arr1 = Array.of(7, 'nedy'); // [7, "nedy"]
  const arr2 = Array.of(7, 'nedy', 7); // [7, "nedy", 7]
  const arr3 = Array.of();  // []

  // Difference between Array() and Array.of()
  const arr4 =  Array(2) // [undefined, undefined]
  const arr5 =  Array.of(2) // [2] 

Think of the Array.of() method as this "Create an array x of this value 2, which could be written like this const x = Array.of(2)".

3. Array.from()

This method returns a new array from any array-like object(an object with a length property), iterable object(objects where you can get its elements, such as Map and Set). It is basically saying "Make an array .from() this object".


  const arr = Array.from('56'); // ["5", "6"]
  const arr1 = Array.from(56); // []
  const arr2 = Array.from('nedy'); // ["n", "e", "d", "y"]
  const arr3 = Array.from([1, 'nedy', undefined, null]); // [1, "nedy", undefined, null]
  // Array from a Set
  const set = Array.from(new Set([1, "nedy", 5])); // [1, "nedy", 5]
  // Array from a Map
  const map = Array.from(new Map([[2, 2], ['nedy', 'ned']])); //[[2, 2], ["nedy", "ned"]]

This method allows for optional arguments such as a map function which will execute a function on each element of the array.


  // The map function can be written in two ways

  // 1. passing the function as an argument
  const arr1 = Array.from([1, 3, 5], elem => elem + 1); // [2, 4, 6]
  const arr2 = Array.from(Array(5), (elem, index) => index + 1); // [1, 2, 3, 4, 5]

  // 2. By method chaining.
  const arr3 = Array.from(Array(5)).map((elem, index) => index + 1); // [1, 2, 3, 4, 5]

4. Spread Operator (...arg)

This method can be used to spread elements into an array. It works similarly like Array.from().


  const arr = [...'nedy']; // ["n", "e", "d", "y"]

Just like the Array.from() method, functions like map and filter can be performed on the resulting array by chaining the function.

  // mapping
  const arr = [...'nedy'].map(elem => elem + "o"); // ["no", "eo", "do", "yo"]

  // filtering
  const arr1 = [...'nedy'].filter(elem => elem !== "e"); // ["n", "d", "y"]

Conclusion

The array methods, Array.prototype.fill(), Array.of() and Array.from() will only work on broswers with Es6 support.

Here is the link to the other articles on this Array series written by me:

Got any question, addition or correction? Please leave a comment.

Thank you for reading. 👍

Discussion (11)

Collapse
akaustav profile image
Ameet Kaustav • Edited

Great article, @Nedy. Helped me understand the origins of some RxJS methods now. See RxJS.of and RxJS.from.

Found an issue though, which you might want to fix:

const arr3 = Array.from([1, 'nedy', undefined, null]);
// Seems to output [1, "nedy", undefined, null]
// instead of ["n", "e", "d", "y"]
Collapse
nedyudombat profile image
Nedy Udombat Author

Thanks a lot @akaustav , this must have been an oversight. I appreciate.

Collapse
benon_kityo profile image
Benon Kityo

Hi Nedy,thanks for the great article. Am a novice who is struggling with functions and would appreciate your help.
Var Repository =[
{
name:'Butterfree',
height:1.1,
types:['bug','flying']
},
{
name:'pidgey',
height:0.3,
types:['flying','normal']
},
{
name:'metapod',
height:0.5,
types:['bug']
}
];
repository.forEach(function(repository){
Please help me to write this repo using document.write

Collapse
seanmclem profile image
Seanmclem

Hey thanks. Just used array.fill and it worked perfectly

Collapse
nedyudombat profile image
Nedy Udombat Author

I am glad you found this useful, This has made my day @seanmclem .

Collapse
aphatheology profile image
mustbeta

A newbie is confused...
Why is array().fill and array.of returning undefined for numbers?

Collapse
nedyudombat profile image
Nedy Udombat Author

Hi @aphatheology Array.fill() takes three arguments.

The first argument is the value you want to fill the array with, it can range from a string to an number to to even another array.

The second argument is the index of the array in which you want to start filling the array from. If you do this Array(5).fill(3, 2). This means you want to fill the array from index 2 till the end with the value if 3. This will return [undefined, undefined, 3, 3, 3]

The third argument is the index position of the array in which you want to stop filling the array. Array(5).fill(3, 2, 4) will give you this [undefined, undefined, 3, 3, undefined].

Array.of() doesn't return undefined for numbers.

Collapse
fiyiin profile image
Fiyiin

Great article @Nedy, showed me some array methods I didn't know of.

Collapse
nedyudombat profile image
Nedy Udombat Author

Thank you @fiyiin I am glad I could help.

Collapse
umoren profile image
Umoren Samuel

Wow
I just learnt about array.fill, array.of and array.from.
Awesome.

Collapse
nedyudombat profile image
Nedy Udombat Author

I am glad I could help @umoren .

Forem Open with the Forem app