The array is a linear data structure and used to store multiple values in a single variable at a time. Today, we will look at three ways to create an array in JavaScript and the array fill() method.
So, let's get started.
The basic way
The simplest way you can create an array is using the opening and closing brackets, that how arrays are mostly created in JavaScript.
const array = [];
The above code will initialize an empty array and it will be stored in the array variable. Any number of values can be stored in the array where values are comma-separated.
const array = ['junaid', 1, true, [{one: 1}, {two: 2}], undefined];
Sometimes an array can be as simple or as complex as you want.
Using Array() Constructor
Say, you have to create an array of definite length then you can use Array() constructor to create it.
Syntax
Array(<length>)
For example,
const array = Array(5)
console.log(array.length) // 5
// An array of length 5 will be created with all values are undefined
console.log(array[0]) // undefined
You can also create an array from different elements using this constructor.
const fruit1 = "banana"
const fruit2 = "mango"
const fruit3 = "orange"
const fruits = Array(fruit1, fruit2, fruit3)
console.log(fruits) // [ 'banana', 'mango', 'orange' ]
Using Array.from()
The Array.from() method returns a new array from an array-like or iterable object.
Let's look at the example.
// create an array from string
const name = 'junaid'
const nameLetters = Array.from(name)
console.log(nameLetters) // [ 'j', 'u', 'n', 'a', 'i', 'd' ]
Syntax
Array.from(iterable [,mapFunction])
The second optional argument is the map function which will be applied to all the elements of the array.
const numbers = [1,2,3]
const addTwo = Array.from([1,2,3], x => x + 2)
console.log(addTwo) // [ 3, 4, 5 ]
You will often use this method to convert the NodeList to Array. We get NodeList when we select multiple HTML elements in JavaScript.
Bonus: Array fill() method
Now that you have learned three ways to create arrays in Javascript. Let's look at the last part of this article, the array fill() method.
Say, you want an array of length 5 with all the initial values set to 0. How would you do that?
You may say,
const array = [0, 0, 0, 0 , 0]
which is totally correct. But what if the length is much larger, that's a lot of hard work. Don't worry, the fill() method got you covered. This method is used to fill the specified elements in the array with static values.
Syntax
array.fill(value [, start, end])
start and end are optional parameters which specifies where to start filling (default 0) the value and where to end (default array.length)
Example
const array = Array(10).fill(0)
console.log(array.length) // 10
console.log(array) // [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ]
Using start and end parameters
const numbers = [1, 2, 3, 4, 5, 6, 8, 9]
// fill with 1 from position 4 to 7 (exclusive)
const filledOnes = numbers.fill(1, 4, 8)
console.log(filledOnes) // [ 1, 2, 3, 4, 1, 1, 1, 9 ]
You can pass any value to the fill() method. For example, you want to create a 2D array of length 8. Well, you can try it out yourself now.
Cool, thank you for reading this. I hope you enjoyed it and learned something new. If you found any mistakes in the article or any suggestions to improve feel free to contact me.
If you liked this article, you will love my tweets, I share useful things that may help you in your web development journey. You can follow me on Twitter here or if you are a LinkedIn type person you can connect with me here
See you in the next post, till then keep coding :)