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.