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

Tags: javascript, react, html, css
Published: 2019-09-30 21:27:48

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

{% link https://dev.to/nedyudombat/understanding-javascript-array-series-i-what-is-an-array-l1i %}

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).
```javascript

  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.

```javascript
  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.

```javascript

  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".

```javascript

  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. 

```javascript

  // 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()`.

```javascript

  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.

```javascript
  // 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:
* [What is an Array?](https://dev.to/nedyudombat/understanding-javascript-array-series-i-what-is-an-array-l1i)
* [Array Properties](https://dev.to/nedyudombat/understanding-javascript-array-series-iii-array-properties-43co)

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

Thank you for reading. :thumbsup: