JavaScript Array Basics

Posted on February 8, 2014 by Aleksandar Gichevski (G+)

Array is an object that is used for storing multiple values in a single variable. When first time JavaScript was published array objects weren't available. So if you wanted to store more values under one variable you needed to write:

var v1 = 1;
var v2 = 2;
var v3 = 3;
var v4 = 4;
...

But this is not practical solution at all. What if you had 500 values? I'm sure nobody would write 500 variables or even if you do how would you loop over all variables and find a specific one? Array can store multiple values under same name using index parameter. So when you would like to access any value of the array you just need to refer to the index number.

JavaScript Array Syntax

Here are some JavaScript syntax examples:

Create Array

There are 2 ways how you can create an array:

var newArr = new Array();  //Array Constructor
var newArr = []; //Array Literal

Create Array with 50 empty slots (undefined values):

var newArr = new Array(50);

Create Array with already defined items:

var newArr = new Array("one", "two", "three", "four");  
var newArr = ["one", "two", "three", "four"];

Access Array

To access an array value refer to the array index. In below example we get the third array value:

var newArr = ["one", "two", "three", "four"];  
var thirdValue = newArr[2];

Modify Array

Modifying an array value is very easy, again based on the array index you assign new value.

var newArr = ["one", "two", "three", "four"];  
var newArr[3] = '4';
//["one", "two", "three", "4"];

Loop over Array

Using FOR Loop you can go over all elements in an array and execute any code you want. To get the size of the array use ".length" property.

var newArr = ["one", "two", "three", "four"];  
for (var i = 0; i < newArr.length; i++) {
    console.log(newArr[i]);
}

Add new value in Array

To add new value at the end of the array use ".length" property to get the last index. This property starts counting from 1 while array index from 0 so arr.length will always show you last array position.

var newArr = ["one", "two", "three", "four"];  
newArr[newArr.length] = "five";  
// ["one", "two", "three", "four", "five"]

You can also add a value to an array using "push" method:

var newArr = ["one", "two", "three", "four"];  
newArr.push("five");  
// ["one", "two", "three", "four", "five"]

Remove value from Array

To remove last value from an array use "pop()" method:

var newArr = ["one", "two", "three", "four"];  
newArr.pop();  
// ["one", "two", "three"]

You can also use "splice()" method:

var newArr = ["one", "two", "three", "four"];  
newArr.splice(2, 1); // removes 1 element from index 2  
// ["one", "two", "four"];

"splice()" method can be also used for adding an value or replacing depending on second and third passed argument.

JavaScript Array Properties

Here is a list of each property and its description.

Property	Description
constructor	Returns a reference to the array function that created the object.
index	The property represents the zero-based index of the match in the string
input	This property is only present in arrays created by regular expression matches.
length	Reflects the number of elements in an array.
prototype	The prototype property allows you to add properties and methods to an object.

JavaScript Array Methods

Here is a list of each method and its description.

Method	Description
concat()	Returns a new array comprised of this array joined with other array(s) and/or value(s).
every()	Returns true if every element in this array satisfies the provided testing function.
filter()	Creates a new array with all of the elements of this array for which the provided filtering function returns true.
forEach()	Calls a function for each element in the array.
indexOf()	Returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found.
join()	Joins all elements of an array into a string.
lastIndexOf()	Returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found.
map()	Creates a new array with the results of calling a provided function on every element in this array.
pop()	Removes the last element from an array and returns that element.
push()	Adds one or more elements to the end of an array and returns the new length of the array.
reduce()	Apply a function simultaneously against two values of the array (from left-to-right) as to reduce it to a single value.
reduceRight()	Apply a function simultaneously against two values of the array (from right-to-left) as to reduce it to a single value.
reverse()	Reverses the order of the elements of an array -- the first becomes the last, and the last becomes the first.
shift()	Removes the first element from an array and returns that element.
slice()	Extracts a section of an array and returns a new array.
some()	Returns true if at least one element in this array satisfies the provided testing function.
toSource()	Represents the source code of an object
sort()	Sorts the elements of an array.
splice()	Adds and/or removes elements from an array.
toString()	Returns a string representing the array and its elements.
unshift()	Adds one or more elements to the front of an array and returns the new length of the array.