JavaScript arrays
last modified July 7, 2020
JavaScript arrays tutorial shows how to work with arrays in JavaScript.
An array is a collection of a number of values. The array items are called elements of the array. Each element can be referred to by an index. Arrays are zero based.
JavaScript array initialization
In the first example, we show how we can initialize arrays in JavaScript.
"use strict"; const nums = [1, 2, 3, 4, 5]; console.log(nums);
The example creates a simple array in JavaScript.
const nums = [1, 2, 3, 4, 5];
An array is created using square brackets. The elements are separated by a comma character.
$ nodejs array_init.js [ 1, 2, 3, 4, 5 ]
This is the output.
JavaScript array indexing
The next example shows the array indexing operations in JavaScript.
"use strict"; const nums = [1, 2, 3, 4, 5, 1]; const e1 = nums[0]; console.log(e1); nums[2] = 22; console.log(nums[2]); console.log(nums.indexOf(1)); console.log(nums.lastIndexOf(1));
We use the indexing operations to get and modify array values and get the index of an element.
const e1 = nums[0];
We get the first element of the array. The indexing starts from zero.
nums[2] = 22;
We modify the third value of the array.
console.log(nums.indexOf(1));
With indexOf()
we get the first occurrence of element 1.
console.log(nums.lastIndexOf(1));
With lastIndexOf()
we get the last occurrence of element 1.
$ nodejs array_index.js 1 22 0 5
This is the output.
JavaScript array basic operations
The following example presents some basic operations with JavaScript arrays.
"use strict"; const words = []; words.push("pen"); words.push("pencil", "knife", "chair"); console.log(words); const el1 = words.shift(); console.log(el1); console.log(words); const el2 = words.pop(); console.log(el2); console.log(words);
In the example, we present push()
, shift()
, and
pop()
methods of JavaScript arrays.
const words = []; words.push("pen"); words.push("pencil", "knife", "chair");
An empty array is created. With the push()
method, we
add one or more elements at the end of the array.
const el1 = words.shift();
The shift()
method removes the first element from an
array and returns the removed element. It changes the length
of the array.
const el2 = words.pop();
The pop()
method removes the last element from an array and
returns the element. This method also changes the length of the array.
$ nodejs basic_oper.js [ 'pen', 'pencil', 'knife', 'chair' ] pen [ 'pencil', 'knife', 'chair' ] chair [ 'pencil', 'knife' ]
This is the output.
JavaScript looping arrays
In the next example, we loop over JavaScript arrays.
"use strict"; const words = ["pen", "pencil", "rock", "sky", "earth"]; words.forEach(e => console.log(e)); for (let word of words) { console.log(word); } for (let idx in words) { console.log(words[idx]); } const len = words.length; for (let i = 0; i < len; i++) { console.log(words[i]); } const i = 0; while (i < len) { console.log(words[i]); i++; }
The example shows four ways of looping over a JavaScript array.
words.forEach(e => console.log(e));
We use the forEach()
method to traverse the array.
It executes the provided function once for each array element.
for (let word of words) { console.log(word); }
With for of
loop, we go over the values of the array.
for (let idx in words) { console.log(words[idx]); }
With for in
loop, we go over the indexes of the array.
var len = words.length; for (let i = 0; i < len; i++) { console.log(words[i]); }
Here we use the C-like for loop to traverse the array.
var i = 0; while (i < len) { console.log(words[i]); i++; }
Finally, we use the while
loop to traverse the array.
JavaScript array slice
The slice()
method returns a shallow copy of an array portion.
The method takes one or two parameters, which specify the indexes of the selection.
The original array is not modified.
"use strict"; const nums = [2, -3, 4, 6, -1, 9, -7]; const res = nums.slice(3); console.log(res); const res2 = nums.slice(2, 4); console.log(res2);
In the example, we create two slices.
const res = nums.slice(3);
We create a slice from index 3 until the end of the array.
const res2 = nums.slice(2, 4);
We create a slice from index 2, to index 4; the ending index is non-inclusive.
$ nodejs array_slice.js [ 6, -1, 9, -7 ] [ 4, 6 ]
This is the output.
Sorting arrays in JavaScript
The sort()
method sorts the elements of an array in place
and returns the array. The default sort order is according to string
Unicode code points. The sort()
method takes an optional
function which defines the sorting order.
"use strict"; const nums = [2, 3, 1, 6, 5, 8, 9, 0]; nums.sort(); console.log(nums); nums.reverse(); console.log(nums); const persons = [ {name: 'Peter', age: 21}, {name: 'Robert', age: 37}, {name: 'Martin', age: 45}, {name: 'Jane', age: 31} ]; persons.sort((a, b) => a.age - b.age); console.log(persons); persons.sort((a, b) => { const nameA = a.name.toLowerCase(), nameB = b.name.toLowerCase(); if (nameA < nameB) { return -1; } else if (nameA > nameB) { return 1; } else { return 0; } }); console.log(persons);
The example sorts an array of integers and an array of objects.
nums.sort();
The sort()
method sorts the array of integers in ascending order.
nums.reverse();
The reverse()
method sorts the array of integers in
descending order.
persons.sort((a, b) => a.age - b.age);
We sort an array of person objects by the age attribute.
persons.sort((a, b) => { const nameA = a.name.toLowerCase(), nameB = b.name.toLowerCase(); if (nameA < nameB) { return -1; } else if (nameA > nameB) { return 1; } else { return 0; } });
We sort an array of person objects by the name attribute.
$ nodejs array_sort.js [ 0, 1, 2, 3, 5, 6, 8, 9 ] [ 9, 8, 6, 5, 3, 2, 1, 0 ] [ { name: 'Peter', age: 21 }, { name: 'Jane', age: 31 }, { name: 'Robert', age: 37 }, { name: 'Martin', age: 45 } ] [ { name: 'Jane', age: 31 }, { name: 'Martin', age: 45 }, { name: 'Peter', age: 21 }, { name: 'Robert', age: 37 } ]
This is the output.
JavaScript multi-dimensional arrays
In JavaScript, we can create multi-dimensional arrays.
"use strict"; const nums = [2, 3, 2, [33, 44, 55], [7, 8, [77, 88]]]; console.log(nums[2]); console.log(nums[3]); console.log(nums[3][0]); console.log(nums[4][0]); console.log(nums[4][2][0]);
A multi-dimensional array is created by nesting arrays into other arrays.
const nums = [2, 3, 2, [33, 44, 55], [7, 8, [77, 88]]];
We have a multi-dimenstional array defined.
console.log(nums[2]);
To get an element from the first dimension, we use a single pair of square brackets.
console.log(nums[3]);
This line prints the entire inner array.
console.log(nums[3][0]);
To get an element from an inner array, we use two pairs of brackets.
console.log(nums[4][2][0]);
Here we get a value from the third dimension.
$ nodejs multi_dim.js 2 [ 33, 44, 55 ] 33 7 77
This is the output.
JavaScript filtering arrays
The filter()
method creates a new array with all elements
that pass the test implemented by the given function.
"use strict" const nums = [2, -3, 4, 6, -1, 9, -7]; const res = nums.filter(e => e > 0); console.log(res);
The example creates a new array that contains only positive values.
const res = nums.filter(e => e > 0);
The filter()
method takes a predicate method as a parameter.
The predicate returns true to keep the element, false otherwise.
$ nodejs filter_array.js [ 2, 4, 6, 9 ]
This is the output.
JavaScript array map
The map()
method creates a new array by applying a
provided function on every element in the calling array.
"use strict"; const a1 = ['dog', 'tree', 'smart']; const a2 = a1.map(e => e.toUpperCase()); console.log(a2);
We have an array of words. With the map()
method,
we apply the toUpperCase()
method on each of the words.
$ nodejs array_map.js [ 'DOG', 'TREE', 'SMART' ]
This is the output.
JavaScript array find
The find()
method returns the value of the first element
that satisfies the provided function; otherwise undefined
is returned.
"use strict"; const nums = [2, -3, 4, 6, 1, 23, 9, 7]; const e1 = nums.find(e => e > 10); console.log(e1);
In the example, we print the first value that is greater than 10.
$ nodejs array_find.js 23
This is the output.
JavaScript array reduction
Reduction is a terminal operation that aggregates array values
into a single value. The reduce()
method applies a function
against an accumulator and each element in the array (from left to right)
to reduce it to a single value.
"use strict"; const nums = [2, 3, 4, 5, 6, 7]; const res = nums.reduce((product, next) => product * next); console.log(res);
We use the reduce()
method to calculate a product from
array elements.
const res = nums.reduce((product, next) => product * next);
The product
is the accumulator, the next
is the next value in the array.
$ nodejs array_reduce.js 5040
This is the output.
In this tutorial, we have covered JavaScript arrays.
List all JavaScript tutorials.