Special Objects: Arrays

Arrays are similar to objects (in fact, they are objects), the only difference is that they are contiguous ordered lists of elements of any type. You can create an array with let arrayName = []; or, less often, with let arrayName = new Array();. Elements can be added, replaced, or deleted.

If you need to access something within an array you have to use square brackets: []. The first element will be numbered 0, the second 1, and so on; this means that in order to access the n-th element you’ll have to write: arrayNumber[n-1]; .

In JS arrays can be both queues and stacks: they allow to remove or add elements from/to their beginning or their end. To do so there are 4 important methods to consider:

1. .shift(): extracts the first element of the array and returns it.
2. .unshift(element): adds an element to the beginning of the array.
3. .pop(): extracts the last element of the array and returns it.
4. .push(element): adds an element to the end of the array.

To completely clear arrays you can take advantage of the fact that their length is writable: if we set arr.length = 0; the whole array “arr” will be cleared.

Moreover, arrays can use a special kind of “for” loop that only iterates the numeric properties of an object; that is the “for … of” loop: for (let element of arrayName) {}.

Other commonly used methods

• Splice: the .splice() method is a very important tool that allows you to completely remove one or more elements, as well as insert new ones. It is a destructive function, and its syntax is: arrayName.splice(startPosition, #ofElementsToDelete, element1, ..., elementN]);. If the number of elements to be deleted is set to 0, then this method can be used to simply insert new elements (element-1 — element-n) into an array. The array containing the deleted elements can be returned with arrayName.splice(startPosition, #ofElementsToDelete).
• Slice: the .slice() method is non-destructive, as it doesn’t modify your original array, but simply returns a new one which is going to be a copy of a portion of your initial array. It can also be used for strings. Its syntax is arrayName.slice(startPosition, endPosition);; the end position is not included.
• Split: the .split() method is used to turn a string into a new array of (sub)strings; you can choose where to cut by specifying a separator (the character of the string to use as a divider, which is going to be substituted by a comma). Its syntax is stringName.split(separator, limit);.
• Join: it can be considered the opposite of split. The .join method is used to join the elements of an array into a string. Those items will be divided by the separator that you specified; the default one is comma (“,”). Its syntax is arrayName.join(separator);.
• Reverse: the .reverse() method can be used to revert an array in place, and it is therefore a destructive method. Its syntax is arrayName.reverse();.
• Sort: the .sort() method is used to sort the elements of an array in place based on a default sort order, or according to the callback function you provided. It is a destructive method, as it changes the original array. Its syntax is arrayName.sort(optionalCallback);.
• Map: the .map() method applies a callback function to every element in an array, and returns a new array containing the new elements. This new array is therefore going to be the same length as the original one. Its syntax is arrayName.map(callback);.
• Filter: the .filter() method applies a callback function to every element in an array, and returns a new array containing all the elements of the original array that return true. Its syntax is arrayName.filter(callback);.
• Concat: the .concat() method can be used to concatenate two arrays, joining them end to end; it returns a new combined array containing all the elements of the first and the second array. Its syntax is firstArray.concat(secondArray);.

Rest syntax and spread syntax look exactly the same (“…”), but they are fundamentally the opposite. Rest syntax can be used at the end of a list of elements in other to gather the remaining elements and to organise them into an array. Spread syntax, on the other hand, can be found in a function call, and it’s used in order to expand an array into a list of its elements (and it works as a spread operator).