Arrays are a fundamental datatype in JavaScript and in most other programming languages. An Array is basically an ordered collection of values. Each value is called Element, each element has a numeric position in the Array, known as its index.
Curiosities
- JavaScript Arrays are Untyped.
- An Array element may be of any type.
- Different elements of the same array may be of different types.
- Array elements may also be objects or other arrays, which allows you to create complex data structures.
- Arrays are zero-based and use 32-bit indexes.
- Arrays are dynamic, they grow or shrink as needed.
- You do not have to declare a fixed size for the array when it's being created.
- JavaScript Arrays may be sparse, which means that the indexes does not need to be continuos and could be gaps.
- Every Array has a length property.
- For sparse arrays, length is larger than the highest index of any element.
- For non-sparse arrays, length specifies the number of elements in the array.
Creating Arrays
There are maaaany ways to create arrays. In the following sections, I'll explain how to create arrays using:
- Array Literals
- The useful spread operator
- The Array constructor
- Array.of and Array.from static methods
1- Array Literals
The simplest way, I think is the most used way! Just a comma-separated list of elements within square brackets. Example:
const iamEmpty = [];
const iHaveNumbers = [2, 6, 8, 200, 423945, 32];
const iHaveMultipleThings = [4, true, 4.7, "Héctor", ["another", "array"], ];If the array contains multiple commas in a row, without values in between, the array is sparse.
const playerNumbers = [4,7,,,10];
const manchesterCityChampionsLeagues = [,,,]; // Array literals allows an optional trailing comma, Array length: 4 not 42- The Spread Operator ...
You can use the spread operator to include the elements of one array within an array literal:
const signings = ["Robert Lewandowski", "Franck Kessié", "Andreas Christensen"];
const barcelona2023 = ["Ansu Fati", "Ter Stegen", "Pedri", ...signings, "Auba"];The spread operator is useful when we try to create a shallow copy of an array:
const original = [4,6,2];
const copy = [...original];
copy[0] = 100; // copy => [100, 6, 2]
original[0]; // => 4The spread operator works on ANY iterable object, for example Strings:
const letters = [..."javascript"]; // => [ 'j', 'a', 'v', 'a', 's', 'c', 'r', 'i', 'p', 't' ]Now, a GEM 💎
Do you want to remove duplicate elements from an array?
Use Set Objects, they are iterable, so an easy way to remove duplicates is to convert the array to a set and then immediately "spread" the set back to the array. Example:
const letters = [..."javascript"]; // => [ 'j', 'a', 'v', 'a', 's', 'c', 'r', 'i', 'p', 't' ]
const uniqueLetters = [...new Set(letters)] // => [ 'j', 'a', 'v', 's', 'c', 'r', 'i', 'p', 't' ]3- The Array() Constructor
Another way to create arrays is to use the constructor, there are three different possibilities:
1 - Call it without arguments:
const nicaragua = new Array();The method above creates the array nicaragua with no elements, the equivalent using Array Literals is const nicaragua = [].
2 - Call it with a single numeric value, which would be the length:
const nicaragua = new Array(15); // => [ <15 empty items> ]
nicaragua[0]; // => undefinedThe code above it is very interesting, it is preallocating space in memory for the nicaragua Array, but please note that no values are stores in the Array. As a result, if you try to access the 0 index you will get undefined.
3 - Explicitly specify two or more array elements or a single non-numeric for the array:
const test = new Array(4,3,2,1,"help, help"); // => [ 4, 3, 2, 1, 'help,help' ]In this way the arguments of the Array constructor become the elements of the new test array.
4- Array.of()
If you take a look at the examples above, you will notice that there is a particular thing happening, remember that we can specify arguments when we use the Array constructor?, and those arguments become the elements of the new array, ok that is clear for now, bu what happens if we try to create an array with only 1 element?, you see? we can not use the Array constructor, because if we just add a numeric value to the constructor this will be taken as the length of the array!!
Fortunately, we have the static method Array.of(), this method creates and return a new array, using its argument values as the array elements, example:
Array.of() // => []
Array.of(10) // =>[10]
Array.of(3,2,1) // => [3,2,1]5- Array.from()
Easy, it expect an iterable or array-like object as its first argument and returns a new array that contains the elements of that object.
Do you remember our friend, the spread operator?, if so, this is very similar.
Do you need a copy of another array?
const copy = Array.from(arrayToCopy);I just gave you 5 ways of how to solve a common problem, I am pretty sure that there are more, I personally rather to declare my Arrays using the Array literals method. Are you using any of these? Which did you like the most?, see you next time.
Héctor.
