⛓ Revisiting Arrays in JavaScriptJun 10, 2021JavaScript 169 words

In this post, I’ll talk a bit about different ways to create an array in JavaScript and ways to empty an array.

Creation

To create new array which, you cannot iterate over, you can use array constructor:

const arr = Array(10); // => Array(10) [ <10 empty slots> ]
// OR
const arr = new Array(10); // => Array(10) [ <10 empty slots> ]

If you try to use .map() you’ll get undefined.

To create arrays, which can be iterated over we can:

  • Array.apply: Array.apply(null, Array(10))
  • Destructuring operator: [...Array(10)]
  • Array.from Array.from({ length: 10 })
const arr = Array.apply(null, Array(10));
// OR
const arr = [...Array(10)]
// OR
const arr = Array.from({ length: 4 })

// => Array(10) [ undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined ]
  • Array.prototype.fill Array(10).fill('Hello!')
Array(10).fill('Hello!')

// => Array(10) [ "Hello!", "Hello!", "Hello!", "Hello!", "Hello!", "Hello!", "Hello!", "Hello!", "Hello!", "Hello!" ]

Filling in

We can use the map method to fill in values after initialising the array:

Array.apply(null, Array(4)).map((u, i) => i) // => [0, 1, 2, 3]

[...Array(5)].map((u, i) => i) [0, 1, 2, 3] // => [0, 1, 2, 3, 4]

Array.from({ length: 4 }).map((u, i) => i) // => [0, 1, 2, 3]

Array(5).fill(null).map((u, i) => i + 1 ) // => [1, 2, 3, 4, 5]

Emptying out

Usually when we want to empty an array, we can simply re-initialize to []. This creates a new array and assigns a reference to it to a variable. Any other references are unaffected and still points to the original array.

let arr = Array.from({ length: 4 }).map((u, i) => i) // => [0, 1, 2, 3]
let arr2 = arr;
arr = [];
console.log(arr); // => []
console.log(arr2); // => [0, 1, 2, 3]

Another way to empty an array is to assign it’s length property to 0. This modifies the array itself. If you access it via a different variable, then you still get the modified array.

let arr = Array.from({ length: 4 }).map((u, i) => i) // => [0, 1, 2, 3]
let arr2 = arr;
arr.length = 0;
console.log(arr); // => []
console.log(arr2); // => []

And that’s it!

Do you know more ways to create and manipulate arrays? Let me know in the comments below