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. 👍
Top comments (11)
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:
Thanks a lot @akaustav , this must have been an oversight. I appreciate.
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
Hey thanks. Just used array.fill and it worked perfectly
I am glad you found this useful, This has made my day @seanmclem .
A newbie is confused...
Why is array().fill and array.of returning undefined for numbers?
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.Great article @Nedy, showed me some array methods I didn't know of.
Thank you @fiyiin I am glad I could help.
Wow
I just learnt about array.fill, array.of and array.from.
Awesome.
I am glad I could help @umoren .