Menu Close

Articles

JavaScript: arrays

JavaScript arrays are used to store multiple values in a single variable. An array can hold many values under a single name, and you can access the values by referring to an index number.

Array Literals

An array literal is list of values separated by comma and enclosed in square brackets: […, …,  …]. For element access you can use a special notation that is based on variable name followed by index value enclosed in square brackets like this: identifier[x], where x = index. 

Example:

In this example an array is declared in two distinct ways.

  1. we can define an array using type inference from a literal.
  2. we can define an array using keyword “new” follow by the constructor “Array(…)”.

Empty Array

To create an empty array it is best to use empty array literal symbol “[]”.

Push()

To add elements into an array we can use array method push().

Pop()

To remove last element from array we can use method pop();

Shift()

To remove first element from array we can use method shift();

Unshift()

To add element as first element in array we can use method unshift();

Slice()

The slice(first, last) method slices out a piece of an array into a new array but the old array remain unchanged. To change the old array we use splice() method.

Splice()

The method splice(start_position, how_many) is removing elements from array.

Note: Splice() method can be used to insert elements into array using a third parameter.

splice(start_position, how_many, new_elements)

More functions:

For details about all array functions check external Mozilla documentation:

MethodDescription
concat()Joins two or more arrays, and returns a copy of the joined arrays
copyWithin()Copies array elements within the array, to and from specified positions
entries()Returns a key/value pair Array Iteration Object
every()Checks if every element in an array pass a test
fill()Fill the elements in an array with a static value
filter()Creates a new array with every element in an array that pass a test
find()Returns the value of the first element in an array that pass a test
findIndex()Returns the index of the first element in an array that pass a test
forEach()Calls a function for each array element
from()Creates an array from an object
includes()Check if an array contains the specified element
indexOf()Search the array for an element and returns its position
isArray()Checks whether an object is an array
join()Joins all elements of an array into a string
keys()Returns a Array Iteration Object, containing the keys of the original array
lastIndexOf()Search the array for an element, starting at the end, and returns its position
map()Creates a new array with the result of calling a function for each array element
pop()Removes the last element of an array, and returns that element
push()Adds new elements to the end of an array, and returns the new length
reduce()Reduce the values of an array to a single value (going left-to-right)
reduceRight()Reduce the values of an array to a single value (going right-to-left)
reverse()Reverses the order of the elements in an array
shift()Removes the first element of an array, and returns that element
slice()Selects a part of an array, and returns the new array
some()Checks if any of the elements in an array pass a test
sort()Sorts the elements of an array
splice()Adds/Removes elements from an array
toString()Converts an array to a string, and returns the result
unshift()Adds new elements to the beginning of an array, and returns the new length
valueOf()Returns the primitive value of an array

Note:  In future examples we will use some of these functions.

Using console

You can use JavaScript console for debugging purposes. The console output is not published on your web page. However if you run the code in NodeJS this is the fastest method to display values for variables and investigate what’s going on.

Example:

Output:

‘road’
(2) [“mountain” ,”cruiser”]

Destructuring Assignment

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables, using array like notation […].

Example:

In next example you can see the syntax used to define two variables and assign first two values from array. This is how destructuring array works: “by position”.

Note: You will learn more about destructuring after you learn about objects.

Example: swap

Swapping two values with destructuring syntax:

Note: You can do more with destructuring: MDN Destructuring

Read next: Variables