JavaScript Tutorial
JS - Introduction JS - Basic JS - Placement JS - Output JS - Statements JS - Syntax JS - Variables JS - Comments JS - Data Types JS - Operators JS - Operator Precedence JS - Condition JS - Switch JS - Functions JS - Objects JS - Loops For JS - Loops While JS - Break JS - Strings JS - String Methods JS - Numbers JS - Number Methods JS - Arrays JS - Array Methods JS - Array Iteration JS - Events JS - Event Listener JS - Event Propagation JS - Date JS - Math JS - Random JS - Boolean JS - Type Conversion JS - RegExp JS - Exception JS - Scope JS - Debugging JS - Hoisting JS - Strict Mode JS - this Keyword JS - Mistakes JS - Best Practices JS - Performance JS - Form Validation JS - ES6 Features
JS Objects
Object Definitions Object Properties Object Methods Object Constructors Object Prototypes
JS Functions
Function Definitions Function Parameters Function Call Function Apply Function Closures
JS HTML DOM
DOM Introduction DOM Methods DOM Selectors DOM HTML DOM CSS DOM Attributes DOM Navigation
JS Browser BOM
JS - Window JS - Screen JS - Location JS - History JS - Navigator JS - Popup Alert JS - Timing JS - Cookies
JS AJAX
AJAX - Introduction AJAX - XMLHttp AJAX - Request AJAX - Response AJAX - PHP
JS JSON
JSON - Introduction JSON - Syntax JSON - Data Types JSON - Parse JSON - Stringify JSON - Objects JSON - Arrays JSON - PHP JSON - JSONP
JS References
JavaScript Reference JavaScript Methods HTML DOM Reference

JavaScript Array Methods

JavaScript has many useful built-in methods to work with arrays.

Methods that modify the original array are known as mutator methods.

Methods that return a new value or representation are known as accessor methods.


Converting Arrays to Strings

The toString() array method converts an array to a string of (comma separated) array values.

Run code

The join() array method also converts all the elements of an array into a new string.

This method behaves just like toString(), but in addition you can specify the separator.

Run code

JavaScript automatically converts an array to a comma separated string when a primitive value is expected.

This is always the case when you try to output an array.

Run code

Adding array elements

The push() array method adds a new element or elements to the end of an array.

Run code

The push() method returns the new array length.

The following code appends three elements to the array. The total variable contains the new length of the array:

Run code

The unshift() array method adds a new element or elements to the beginning of an array.

Run code

The unshift() method returns the new array length.

The following code adds three elements to the array. The total variable contains the new length of the array:

Run code

Removing array elements

The pop() array method removes the last element from the end of an array.

Run code

The pop() method returns the value that was "popped out":

Run code

The shift() array method removes the first element from the beginning of an array.

Run code

The shift() method returns the element that was "shifted out":

Run code

Splicing an Array

The splice() method changes an array by removing existing elements and/or adding new elements.

Run code

The first argument (1) defines the position where new elements should be added (spliced in).

The second argument (0) defines how many elements should be removed.

The third argument ('Feb') define the new element to be added.

In the following example we will replace 1 element at 4th index:

Run code

In the following example we will remove 1 element from index 3:

Run code

In the following example we will remove 2 elements starting from index 2:

Run code

The splice() method returns an array containing the deleted elements:

Run code

Note that splice() is not to be confused with slice() an accessor array which will make a copy of a section of an array.


Modifying array elements

We can overwrite any value in an array by assigning a new value using the assignment operator.

Run code

Concatenating Arrays

The concat() array method merges two or more arrays together to form a new array.

In the below example, we will create two arrays and combine them into one new array:

Run code

The concat() method can take multiple arguments, effectively allowing you to concatenate many arrays together with a single method.

Run code

Slicing an Array

The slice() array method copies a portion of an array to a new array.

Run code

The first argument (1) defines the position at which to start extraction.

The second argument (3) defines the position before which to end extraction.

If the second argument is omitted, the slice() method slices out the rest of the array.

In the following example we will extract elements without using second argument:

Run code

In the following example we will extract elements using negative values:

Run code

Finding elements in an Array

The indexOf() array method returns the first index at which a given element can be found in the array.

Run code

Note: The index of the first element is 0, the second element is 1, and so on.

If the given argument is a value that does not exist in the array, it will return -1.

Run code

The lastIndexOf() array method returns the last index at which a given element can be found in the array.

We can test on the same example from indexOf(), which includes "Apple" twice.

Run code

Note: The lastIndexOf() will search the array starting from the end and return the first index number it finds.

If the given argument is a value that does not exist in the array, it will return -1.

Run code

The fill() Method

The fill() array method replaces all the elements in an array with a static value.

Run code

All four elements in the array have been replaced with the same value, 17.

The fill() also takes optional arguments of start and end points.

Fill with 0 from position 2 until position 4 (4 not included):

Run code

Using fill() we can replace one or more elements in an array with a static value.


Sorting Arrays

The reverse() array method reverses the order of the elements in an array.

Run code

Using reverse(), the last element will be first, and the first element will be last.

The sort() array method sorts the elements in an array based on the first character in the element. In the case that the first character is identical, it will continue down the line and compare the second character, and so on.

By default, sort() will alphabetize an array of strings that are all either uppercase or lowercase.

Run code

Since sort() is based on the first unicode character, it will sort uppercase items before lowercase.

Let's modify our original array so that one of our strings begin with an lowercase letter.

Run code

Single digit numbers can be sorted using sort() method.

Run code

sort() will not sort an array of numbers by size by default. Instead, it will only check the first character in the number.

Run code

In order to sort numbers properly, you could create a comparison function as an argument.

Run code

If you need to sort numbers repeatedly you can create a separate function.

Run code

Complete Array Reference

For a complete properties and methods reference, visit our JavaScript Array Reference.

The reference section contains descriptions and examples of all array properties and methods.