What is an array

An array is a collection or a list of similar items logically grouped together. Similar items means values which represent a particular type of entity.

Examples are names of car companies, list of car models, laptop types, smartphone brands etc.

Similar items in above definition does NOT mean those which have the same data type such as a list of strings, list of numbers or a list of boolean values.

A single array in javascript can contain a string, an integer, a decimal value, an object and an array also. Thus, array in javascript is just a logical group of values.



Javascript array syntax



var cars = ['Honda', 'Hyundai', 'BMW', 'Audi']; var laptops = ['Dell', 'Sony', 'Lenovo']; // different data types var hybrid = [1.2, 'string', true, 24]; // array inside array or nested array var ramSizes = [8, 16, 32, 64]; var laptops = ['Dell', 'Sony', 'Lenovo', ramSizes];

A javascript array is declared or initialized by surrounding it with square brackets (‘[‘ & ‘]’). Elements of the array are separated by a comma(,).An array is assigned to a variable which becomes the name of the array.Name of variable is user defined. It is not mandatory to assign an array to a variable but you have to do it if you want to use it anywhere else.Thus, an array looks like

You can also declare an empty javascript array and add elements to it later. Empty javascript array is defined by using empty square brackets and assigning to a variable.

Create javascript array

There are 2 ways to create an array

Using array literal

Create 2 enclosing square brackets, place the array values inside them and assign it to a variable. Just as shown in examples above. Simple as that. var arrayName = [element1, element2, …..];

Create 2 enclosing square brackets, place the array values inside them and assign it to a variable. Just as shown in examples above. Simple as that. Using new keyword

Using this approach, an array can be created using the below syntax var arrayName = new Array(element1, element2, ….); We are creating an array object using its constructor. Syntax is similar to previous approach but is not the preferred way. Elements can be of any type as in earlier approach.

If you provide a single numeric argument to the constructor, then it is considered as the size of the array. That is, var arrayName = new Array(5) will create an array of 5 elements and not an array with a single element whose value is 5.

Thus, in order to create array with this approach and add elements to it, 2 statements are required.

Add elements to array



push

push

push

var evenNumbers = [0, 2, 4, 6]; evenNumbers.push(8); // array becomes [0, 2, 4, 6, 8] var length = evenNumbers.push(10, 12, 14); // length will be 8

Javascript arrays have amethod which allows you to add element to the array. It takes the element to add as argument and adds the element to the end of array.returns the length of the array. Also, more than 1 elements may be added to the array usingmethod.

When an element is added to the array using push, it is appended at the end of the array.

Accessing array elements

Array elements are index based(index starts at 0) and its elements can be accessed using indexes. Syntax to access an array element is :

var element = arrayName[ elementIndex];

Thus, to access first element of an array, following syntax is used

var laptops = ['Dell', 'Sony', 'Lenovo']; var l = laptops[1]; // This returns Sony

Loop array in javascript



for

length

for

var laptops = ['Dell', 'Sony', 'Lenovo']; for (var index = 0; index < laptops.length; i++) { console.log('Laptop : '+laptops[index]); }

A javascript array can be iterated using aloop. Since array indexes start at 0, the loop starts from 0.Also, array has aproperty which returns the total number or count of elements in the array.Thus, the last element of the array will haveTherefore, to iterate over an array, aloop starting from 0 to length – 1 can be used.

In order to iterate over an array for...of loop can also be used. It is a newer feature in javascript. Syntax is:

let laptops = ['Dell', 'Sony', 'Lenovo']; for (let laptop of laptops) { console.log('Laptop : '+laptop); }

let followed by a name declares a variable. In each iteration, this variable contains the current array element.

Javascript array functions

Following are the commonly used javascript array methods

Method Description Usage push Used to add an element to array.(Has been discussed above) toString Converts an array to a string of comma separated values var laptops = [ ‘Dell’ , ‘Sony’ , ‘Lenovo’ ];

laptops.toString(); // returns Dell, Sony, Lenovo pop Returns the last element of the array. The element is also removed from the array. var laptops = [ ‘Dell’ , ‘Sony’ , ‘Lenovo’ ];

laptops.pop(); //returns Lenovo



/* array is now [‘Dell’, ‘Sony’] */

shift Returns the first element of the array. The element is removed from the array and all the remaining elements are shifted towards the left. var laptops = [ ‘Dell’ , ‘Sony’ , ‘Lenovo’ ];

laptops.shift(); //returns Dell



/* array is now [‘Sony’, ‘Lenovo’] */ join Returns a string combined with a separator. The separator is passed as an argument to this method. var laptops = [ ‘Dell’ , ‘Sony’ , ‘Lenovo’ ];

laptops.join(‘ & ‘); //returns Dell & Sony & Lenovo unshift This method is opposite of shift method. It adds an element to the beginning of the array and shifts other elements to the right. The element to be added is passed as an argument to this method. This method returns the new length of the array. var laptops = [ ‘Dell’ , ‘Sony’ , ‘Lenovo’ ];

laptops.unshift(‘Apple’); //returns 4



/* array is now [‘Apple’, ‘Dell’, ‘Sony’, ‘Lenovo’] */

slice Accepts two integers as arguments and returns the array of elements whose indexes lie in between the two arguments. Note that the indexes are zero-based and array elements till (second argument – 1) are considered. var laptops = [ ‘Apple’ , ‘Dell’ , ‘Sony’ , ‘Lenovo’ ];

laptops = laptops.slice(1,2); // returns [‘Dell’] sort This method sorts an array in alphabetical order. If the array is of numbers, then it sorts the array from low to high values. var laptops = [ ‘Apple’ , ‘Dell’ , ‘Sony’ , ‘Lenovo’ ];

laptops.sort(); // returns [‘Apple’, ‘Dell’, ‘Lenovo’, ‘Sony’]; reverse Reverses the elements of the array. That is, last element becomes the first, second last becomes the second element and so on. var laptops = [ ‘Apple’ , ‘Dell’ , ‘Sony’ , ‘Lenovo’ ];

laptops.reverse(); // returns [‘Lenovo’, ‘Sony’, ‘Dell’, ‘Apple’] indexOf This method accepts an array element as argument and returns the index of that element inside the array. It returns -1 if the element does not exist in the array. This method can be used to check if an array contains an element. var laptops = [ ‘Apple’ , ‘Dell’ , ‘Sony’ , ‘Lenovo’ ];

laptops.indexOf( ‘Dell’ ); // returns 1

How to recognize array

Suppose you want to test whether a given variable represents an array or not. One will suggest to use typeof operator.

But the problem is that typeof used on array will return “object“. This is because an array is also an object. So, the question is how to tell whether a variable represent an array.

Following methods will be useful in this case.

Method 1 : Using instanceof operator

instanceof operator used on array variable will return true if the variable is an array, false otherwise. Example,

var laptops = [‘Apple’, ‘Dell’, ‘Sony’, ‘Lenovo’];

laptops instanceof Array // will return true

Method 2 : Using isArray method

Array object defines a method isArray which takes an argument which will return true if the argument is an array, false otherwise. Example,

var laptops = ['Apple', 'Dell', 'Sony', 'Lenovo']; Array.isArray(laptops); // returns true var value = 5; Array.isArray(value); // returns false Array.isArray(new Array()); // returns true Array.isArray(); // returns false

This method was introduced in ECMAScript 5 and will not work in older browsers.

Method 3 : Using constructor property

Array variable has a constructor property. This property returns the function name which created the array. Converting the value to a string using toString method returns a string representation of this function.

Now, whether the variable is an array can be tested by checking the presence of “Array” in this string. Example,



var laptops = ['Apple', 'Dell', 'Sony', 'Lenovo']; var functionName = laptops.constructor; // returns Array() var functionStr = functionName.toString(); // returns function Array() { [native javascript code] } var isarray = functionStr.indexOf("Array") > -1; // returns true

Hope this post was useful.

2