Skip to content

JavaScript Arrays

Javascript has an Array object for storing and manipulating data in applications.  JavaScript Arrays are container-like values that can hold other values, Essentially JavaScript arrays are used to store multiple values in a single variable..

The values inside an array are called elements. The element values within a JavaScript Array don’t all have to be the same type of value. Elements can be any kind of JavaScript value and even contain other arrays!.

In the examples below I will create a simple module in Node.js to develop a Fibonacci sequence  number generator to help illustrate how and why you may want to use JavaScript array's in your software application.  

The Fibonacci Sequence is the series of numbers: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, . . .

Information

In the Fibonacci sequence, each subsequent number is the sum of the previous two

Creating a JavaScript array objects

There are 3 ways of creating arrays.

1. Create an array object

var fibonacci = [];

2. Create an Array object by instantiating the Array object.

var fibonacci = new Array();

3. Create an Array object by inserting collection data

 var fibonacci = [1,1,2,3,5,8,13,21,34,55,89];

Inserting data into a JavaScript Array

After creating an Array object, we can insert data. Use [] with index if you want to assign the value.

fibonacci[0] = 1;
fibonacci[1] = 1;
fibonacci[2] = 2;
fibonacci[3] = 3;

JavaScript Array push method

The Array push method adds an element to the array and returns the array’s length.

In the example below we use the push() function to insert data.

fibonacci.push(5);
fibonacci.push(8);
fibonacci.push(13);
fibonacci.push(21);
fibonacci.push(34);
fibonacci.push(55);
fibonacci.push(89);

In the example below we'll use the push method to add an element to an array and then log the count of elements in the array to the console.

var fibonacci = new Array();
fibonacci.push(13);
fibonacci.push(21);
fibonacci.push(34);
fibonacci.push(55);
console.log(fibonacci.push(8));

Accessing JavaScript array values

To access array data, you can use [] with data index parameter.

//iterate through the array 
for(var i=0;i<fibonacci.length;i++){
    console.log(fibonacci[i]);
}

JavaScript Array popmethod

The array pop method removes the last element in the array and returns that element’s value.

console.log("The Last element of fibonacci : " +  fibonacci.pop());

Additional JavaScript Array Properties and Methods

Arrays have additional built-in variables and functions, which are also known as properties and methods, that provide addtional value when working with arrays in code.

JavaScript Array length function

An array’s length property provides the number of elements contained within the array.

console.log("There are  " +  fibonacci.length + " in the fibonacci ");

JavaScript Array concat function

The Array concat method returns a new array that combines the values of two arrays. Which is useful if you want to join two arrays to each other.

fibonacci =  fibonacci.concat([8,13,21,34,55,89]);

JavaScript Array reversefunction

The array reverse method returns a copy of the array in opposite order.

fibonacci = fibonacci.reverse();
for(var i=0;i<fibonacci.length;i++){
    console.log(fibonacci[i]);
}

JavaScript Array splice function

The splice() method adds/removes items to/from an array, and returns the removed item(s).

fibonacci = [ 1,1,13];    //Incorrectly defined the array
console.log(fibonacci);
fibonacci.splice(2,0, 2,3,5,8)

An application example of JavaScript Arrays

I'll create a simple node.js application which will illustrate how to make use of arrays.

The code below includes a reference to simple Fibonacci sequence generator class which exposes two methods to generate a Fibonacci sequence, Looping or Recursion,  the source code for the class is included in the GitHub Repository.

// Import our fibonacci class
var f = require('../Array/Fibonacci')();
var fibonacci = new Array();
 
// Use a simple fibonacci module to create a fibonacci sequence
for(var i =1 ; i <= 8; i++){
    fibonacci.push(f.recursive(i));
}
 
//iterate through the array and print out using the array accessor
 
//iterate through the array
for(var i=0;i<fibonacci.length;i++){
    console.log(fibonacci[i]);
}

Our console window should look something similar to the below with all our values contained in the array printed out

1
1
2
3
5
8
13
21

Updating data

To update an item of array data, you can use [] with data index and thus assign a new value.

fibonacci[4] =  7;
fibonacci[10] = 365;

Removing data

You can use the pop() function to remove data from the Array.
The pop() method removes the last element from an array and returns that element.

If you want to remove data by specific index then you can use the splice() function.

//remove data
fibonacci.pop();
// remove data by index 
var index = 1; 
fibonacci.splice(index,1);  
console.log(fibonacci);

Summary

Arrays are simply data types that can store more than one variable. Each variable is stored in an array element.

Arrays are usually Zero-bound so the first element in the array is always 0.

As programmer you will be required to develop and implement algorithms for a variety of tasks, As tasks become more complex algorithm development is facilitated by structuring or organizing data in specialized ways.

Arrays are suitable data structures that can be selected for the specific task Some data structures are provided by programming languages others must be derived by the programmer from available data types and structures.

The JavaScript Array object is a global object that is used in the construction of arrays; which are high-level, list-like objects.

Gary Woodfine
Latest posts by Gary Woodfine (see all)
Tags: