Arrays in JavaScript

An array is an ordered collection of data. It is a container that holds multiple values. Each element of the array has a fixed position called an index and stores a value. All indexes are numeric, the first element has index 0, second 1, etc.
Arrays in JavaScript are dynamic and increase or decrease as needed. Their size do not have to be predetermined. JavaScript arrays may be sparse – there can be gaps in the indexes.
Another feature of arrays in JavaScript is that they are untyped, elements of an array can be of different types.
In fact JavaScript arrays are specialised form of objects. So indexes are property names that are integers.
JavaScript provides predefined Array object that you can use to work with arrays.

Creating arrays

Arrays you can create using array literal or the Array() constructor.

Array literal is a list of array elements separated by commas and enclosed within square brackets.

To create an empty array simply use empty square brackets:

var emptyArray = [];

To create array of elements enclose them in square brackets:

var numbers = [1,3, 40, 102];
var texts = ["IT", "software", "engineer", "dev"];

In one array you can enclose values of different types:

var mixture = [0, 10.5, true, "child"];

An array can contain objects and other arrays:

var complexity = [{age: 20, name: 'Jack'}, ["good", "strong"]];

Another way of creating arrays is to use the Array constructor.

Creating an empty array:

var emptyArray = new Array();

To create an array of elements pass more than one numeric value or non-numeric value as constructor arguments:

var array1 = new Array ('a'); // single element array
var array2 = new Array(4, 8, 12); // array of numbers
var array3 = new Array(1, 3.14, false, "lambda"); // array of different types values

If you pass a single numeric value as an argument, it is treated as an array length specification.

var emptyArray = new Array(5);

This creates an empty array with the specified length.
Note that calling the constructor Array with a single numeric argument, which is not an integer, causes an error.

var myArray = new Array(3.5); // RangeError: invalid array length

Writing and Reading Arrays

You can access an array element using the [] operator following a reference to the array. Inside the brackets, give the index of the element, which should be a non-negative integer. This way you can use for both reading and writing elements.

var myArray = [];
myArray[0] = 1; // write first element of myArray
myArray[1] = 2.7 // write second element of myArray
myArray[2] = "gamma"; // write third element of myArray
var i = 3;
myArray[i] = true; // write fourth element of myArray

You can also write values to an array when you create it:

var secondArray = [1, 4.5, false, "y"];

To read the value of an array element, specify its index. Indexes are integers and the first element has index 0.

var collection ["blue", "red", 7, false];
collection[0]; // blue
collection[2]; // 7
collection[3]; // false

Indexes and properties

Arrays are specialised form of object and you can use square brackets also to access the array’s properties.
Internally JavaScripts converts indexes to string properties, so the index 0 becomes “0”, the index 1 becomes “1” etc. For indexes that are non-negative integers it does not matter, they are still indexes. But if you put in square brackets non-integer value as an array index and assign a value to it, new property of the array will be created instead of an array element.

var array = [];
array[0] = 1; // array element
array[1] = 2; // array element
array[1.5] = 3; //array property
array['d'] = 4; // array property

If index is string that is integer or it is floating point value it is treated as equivalent of integer index.

When you refer to not existing element there is no error, but undefined is returned.

var smallArray = [10, 20, 30];
console.log(smallArray[5]); //undefined

Array length

The array has a length property. It returns the value which is the highest index plus one. If there are no gaps in the array’s indexes, the length specifies the number of elements in the array.

var array = ['x', 'y', 'z'];
array.length; // 3

If there are gaps in the array’s indexes, the length is greater than the number of elements.

var array = [];
array[5] = 'x';
array.length; // 6

You can also set the length of the array. If it is bigger than the previous one, it does not affect the list of elements. If the new length it is smaller than the previous one, all elements whose indexes are greater than or equal to current length are deleted.

var array = [];
array.length = 4; // no new elements are added, it is equivalent of new Array(4)

var array = [2, 4, 6, 8, 10];
array.length = 3; // new length is 3, it removed the last 2 elements

Deleting Array Elements

To delete an array element you can use the delete operator. This operation does not shift the array’s indexes and does not change the length of the array. In the position of the removed element of the array, a gap is left.

var array = [2, 4, 6];
delete array[1];
array[1]; // undefined
array.length; // 3

Multidimensional Arrays

JavaScript does not have true multidimensional arrays. But you can create the equivalent as array of arrays. To access the array element, use the appropriate number of times the [] operator and enter the appropriate indexes.

var multi = [];
multi[0] = ['a', 'b', 'c'];
multi[1] = ['x', 'y', 'z'];
console.log(multi[1][2]); // z

var matrix = new Array(3);
matrix[0] = new Array(1, 2);
matrix[1] = new Array(10, 20);
matrix[2] = new Array(100, 200);
console.log(matrix[2][1]); // 200

Iterating Arrays

To access and process all elements of the array an iteration is used.

One of the ways to iterate an array is through the for loop.

var flowers = ['rose', 'tulip', 'lily', 'aster'];
for (var i = 0; i < flowers.length; i++) {
    console.log(flowers[i]);
}
// Output:
// rose
// tulip
// lily
// aster

Note that an array may have gaps, then in your code you should handle nonexistent elements.

Second way is to use for-in loop. It iterates only existing elements. In fact it iterates over all enumerable properties, also inherited from Array.prototype. It is advisable not to use this loop to iterate arrays unless you filter redundant items.

var fruits = ['apple', 'strawberry', 'cherry'];
fruits[5] = 'pear';
for (var index in fruits) {
    if (fruits.hasOwnProperty(index)) {
        console.log(fruits[index]);
    }
}
//Output:
// apple
// strawberry
// cherry
// pear

Another way of iterating arrays is the forEach method. It iterates array elements in index order and each one passes to a function passed as an argument.

var trees = ['brich', 'pine', 'oak'];
trees.forEach(function(tree){
    console.log('tree: ' + tree);
});
// Output:
// tree: brich
// tree: pine
// tree: oak

New added in ECMAScript 2015 the for–of loop is another choice. It does not iterate over indexes like the for-in but over values.

var vegetables = ['tomato', 'cucumber', 'carrot'];
for (var vegetable of vegetables) {
    console.log(vegetable);
}
// Output:
// tomato
// cucumber
// carrot

Typed Arrays

Typed arrays were introduced in ECMAScript 2015. They provide interface for accessing raw binary data. JavaScript Array can store any type of JavaScript value. Currently web APIs allow to manipulate audio, video, access to raw data. Hence the need for the JavaScript code to be able to easily manipulate raw binary data in typed arrays.

Implementation of typed arrays in JavaScript provides buffers and views. A buffer is an object representing chunk of data with no functionality to access its content. A view provides context (data type, offset, size) and allows access data stored in a buffer.

ArrayBuffer

ArrayBuffer is a data type to represent binary data in buffer. You cannot directly manipulate ArrayBuffer data.

// create an ArrayBuffer with 16 bytes size
var buffer = new ArrayBuffer(16);

Typed array views

Typed array views provide views for numeric types. They represent arrays of numeric values and allows you to read and write the content of the buffer. Typed array views have self-descriptive names like Int8Array, Uint8Array, Int16Array, Uint16Array, Float32Array, BigInt64Array.

// create Int8Array from a length
var int8Array = new Int8Array(8);
int8Array[0] = 20;
int8Array[1] = 12;
console.log(int8Array[0]); // 20

// create Int16Array from an array
var int16Array = new Int16Array([2, 77]);
console.log(int16Array[1]); // 77

// create Int32Array from a buffer
var buffer = new ArrayBuffer(16);
var int32Array = new Int32Array(buffer, 0, 4);

DataView

DataView represents buffer and allows you to read and write the content of the buffer for any data type.

var buffer = new ArrayBuffer(16);

var dataView = new DataView(buffer);
var dataView2 = new DataView(buffer, 4, 8); //from byte 4 for the next 8 bytes