Danieo's Blog

WebDev, programming and my thoughts

A brief introduction to JavaScript arrays

What is an array? How to create one? How to retrieve values from them? And more... just a short recap for beginners.


JavaScript arrays are objects, so they're not a separate type like in other languages. These objects hold a collection of elements. To create an empty array we got two ways. First, we can use the Array constructor.

const array = Array();

But the preferable method is using the array literal notation.

const array = [];

Arrays can be initialized with some values.

const array = ["🐒", "🐬", "🐅"];
console.dir(array); // Output: ["🐒", "🐬", "🐅"]

We can also achieve this with the constructor

const array = Array("🐒", "🐬", "🐅");
console.dir(array); // Output: ["🐒", "🐬", "🐅"]

But there comes a problem with this method. Let's assume that we want to create a single element array and that element would be the number 5.

const array = Array(5);
console.dir(array); // Output: [undefined, undefined, undefined, undefined, undefined]

We get an array with 5 undefined elements. To fix this we can use the Array.of() method.

const array = Array.of(5);
console.dir(array); // Output: [5]
const array = Array.of(5, 6, 7);
console.dir(array); // Output: [5, 6, 7]

Much better.


We can also fill empty arrays using the fill() method.

const array = Array(4);
array.fill(1);
console.dir(array); // Output: [1, 1, 1, 1]

We got an array with 4 empty elements so we filled them with 1. Filling can be also done only for certain indexes by passing two more arguments - start and end index.

const array = Array(4);
array.fill(1, 0, 2);
console.dir(array); // Output: [1, 1, undefined, undefined]

JavaScript has other data structures like Maps and Sets or iterable objects like String or NodeList. We can convert them to array using Array.from().

String to Array

const array = Array.from("Hello World!");
console.dir(array); // Output: ["H", "e", "l", "l", "o", " ", "W", "o", "r", "l", "d", "!"]

NodeList to Array

const nodeList = document.querySelectorAll('.element');
const array = Array.from(nodeList);

Set/Map to Array

const set = new Set();
set.add(1);
set.add(3);
const array = Array.from(set);
console.dir(array); // Output: [1, 3]
const map = new Map();
map.set('key1', 1);
map.set('key2', 2);
const array = Array.from(map);
console.dir(array); // Output: [['key1', 1], ['key2', 2]]

As you can see in the Set/Map example - JavaScript arrays can be multi-typed and multi-dimensional. So using different types in one array is possible...

const array = [1, "text", null, {}];
console.dir(array); // Output: [1, "text", null, {}]

...just like creating matrices

const matrix = [
  [0, 1, 2],
  [0, 3, 4],
  [1, 9, 8],
];

Values from an array can be retrieved by referencing their index

const array = [1, 2, 3];
console.dir(array[1]); // Output: 2

const matrix = [
  [0, 1, 2],
  [0, 3, 4],
  [1, 9, 8],
];
console.dir(matrix[1][2]); // Output: 4

Every array has its length which can be found under the length property.

const array = ["🐒", "🐬", "🐅"];
console.dir(array.length); // Output: 3

length is settable which means you can resize the array by changing its value.

const array = ["🐒", "🐬", "🐅"];
array.length = 5;
console.dir(array); // Output: ["🐒", "🐬", "🐅", undefined, undefined]
array.length = 1;
console.dir(array); // Output: ["🐒"]

As you can see if the new value for length is bigger than the old one, the array will extend but all of the new values are going to be undefined.

Liked this article? Want to know about future content? Join my newsletter!