JavaScript Arrays

Arrays are used to store multiple values of different types in single variable.

What is an Array?

JavaScript Array is a special variable. An array can hold more than one values. For example to store a student information.

var student1Name = 'ABC';
var student1Class = '1F';
var student1RollNum = '12';

It is not ideal to use different variable for each information for each student, like print all students details or find top student or order students by name or roll number.

It can be easily stored using an array variable.

Create an Array

A JavaScript array can be created using strings within square brackets [].

Syntax

var array_name = [item1, item2, item3, ...];

Example

var studentList = ["ABC1", "ABC2", "XYZ"];

JavaScript new Keyword

An array can be created using new Keyword

<!DOCTYPE html>
<html>
<body>
<p id="demo">
<script>
var studentList = new Array("ABC1", "ABC2", "XYZ");
document.getElementById('demo').innerHTML="First student :" +studentList[0];

</script>

</body>
</html>

Download the code Run the code

An array can contain any number of values.

Accessing array Elements

Array elements can be accessed using array index number.An array index always starts with 0 index.

var studentName = studentList[0];

An array can contains different type of values, variables and objects

var arr[0] = function() {};
var arr[1] = new Date();
var arr[2] = "This is a string";
var arr[3] = 123;

Arrays are objects

In JavaScript array are objects, i.e. typeof Array will return an “Object”.

Accessing array methods and properties

An array properties and methods can be accessed using dot(.). There are many inbuilt JavaScript array properties and methods for working with arrays

length Property

Array length property let you know the length(number of elements) of an array variable. As the array index starts with 1, the length property is always one more than largest array index.

<!DOCTYPE html>
<html>
<body>
<p id="demo">
<script>
var studentList = new Array("ABC1", "ABC2", "XYZ");
document.getElementById('demo').innerHTML="There are " +studentList.length +" students in class.";
</script>

</body>
</html>

Download the code Run the code

Looping array element

An array can be loop using For loop statement.

<!DOCTYPE html>
<html>
<body>
List or array elements:
<p id="text"></p>
<script>
var studentList = new Array("ABC1", "ABC2", "XYZ");
var text = '';
for (i = 0; i < studentList.length; i++) {
    text += "<li>" + studentList[i] + "</li>";
}

text = '<ul>'+text+'</ul>';
document.getElementById('text').innerHTML = text;
</script>

</body>
</html>

Download the code Run the code

Associative array

An array having named index(non number indexs) are called associative array

Unlike other programming languages which supports associative array, JavaScript arrays are not associative.

<!DOCTYPE html>
<html>
<body>

<p id="text"></p>
<script>
var studentInfo = [];
studentInfo[0] = 'ABC';
studentInfo[1] = '1F';
studentInfo[2] = '12';

var count = studentInfo.length;
var studentName = studentInfo[0];

document.getElementById('text').innerHTML = 'Student name : ' + studentName + 
'<br />Total students : ' + count;
</script>

</body>
</html>

Download the code Run the code

If an array is defined with an named index, an array result in an unexpected behavior.

<!DOCTYPE html>
<html>
<body>

Using named indexes with arrays will result in unexpected behavior
<p id="text"></p>
<script>
var studentInfo = [];
studentInfo['name'] = 'ABC';
studentInfo['class'] = '1F';
studentInfo['roll_number'] = '12';

var count = studentInfo.length;
var studentName = studentInfo[0];

document.getElementById('text').innerHTML = 'Student name : ' + studentName + 
'<br />Total students : ' + count;
</script>

</body>
</html>

Download the code Run the code

How to know a variable is an Array

The problem is that a JavaScript returns an Object for typeof an array variable.

<!DOCTYPE html>
<html>
<body>

typeof an array returns 
<p id="text"></p>
<script>
var studentList = ["ABC1", "ABC2", "XYZ"];
// typeof studentList returns an Object

document.getElementById('text').innerHTML = typeof studentList
</script>

</body>
</html>

Download the code Run the code

To overcome this problem, ECMAScript 5 has a new method to check type of an array

<!DOCTYPE html>
<html>
<body>

typeof an array returns 
<p id="text"></p>
<script>
var studentList = ["ABC1", "ABC2", "XYZ"];
// typeof studentList returns an Object

document.getElementById('text').innerHTML = Array.isArray(studentList) ? 'studentList is an array' : 'studentList is not an array';
</script>

</body>
</html>

Download the code Run the code

or we can use instanceof Variable to check array type

<!DOCTYPE html>
<html>
<body>

typeof an array returns 
<p id="text"></p>
<script>
var studentList = ["ABC1", "ABC2", "XYZ"];
// typeof studentList returns an Object

document.getElementById('text').innerHTML = studentList instanceof Array ? 'studentList is an array' : 'studentList is not an array';
</script>

</body>
</html>

Download the code Run the code

<<< JavaScript Date MethodsJavaScript Array Methods >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .