1

JavaScript Arrays

 Dr. Sandhya P,
 VIT Chennai

Dr. Sandhya P VIT Chennai

 2

JavaScript Arrays
 Array Object
 Creating Arrays
 Indexed Arrays
 Multidimensional Arrays
 Iterating over an Array
 Adding Element to an Array
 Removing Elements from an Array
 Associative Arrays
 Arrays and Strings
Dr. Sandhya P VIT Chennai
 3

Array Object
 Arrays are reference types.
 Array is a variable that holds multiple values.
 In JavaScript all arrays are instances of global Array object
(wrapper class).
 length is an important property of Array

Dr. Sandhya P VIT Chennai

 4

Creating Arrays
 Arrays can be created in two ways:
 Using constructors of Array (There are 3 versions of constructors)
 Creating using array literal

Dr. Sandhya P VIT Chennai

 5

Creating Arrays - Constructors

obj = new Array();
obj = new Array(arraysize);
obj=new Array(elements,…);

Examples:
var arr=new Array();
var arr=new Array(10);
var arr=new Array(“Mon”,”Tue”,”wed”);

Dr. Sandhya P VIT Chennai

 6

Creating Arrays - Literals

var a=[“Mon”,”Tue”,”Wed”];
var b=[1,2,3,true,[“Mon”,”Tue”]];

Dr. Sandhya P VIT Chennai

 7

Indexed Arrays
 Normal arrays are indexed.
 The index starts from zero.
 Each item can be accessed based on its position or index in the
array.

Dr. Sandhya P VIT Chennai

 8

Indexed Arrays
var arr = [“Kevin”, “Eric” , “Jacob” , 20 , true];

document.write(arr[0]); //Kevin
document.write(arr[1]); //Eric
document.write(arr[2]); //Jacob
document.write(arr[3]); //20
document.write(arr[4); //true

Dr. Sandhya P VIT Chennai

 9

Multidimensional Arrays
 Also called as jagged arrays.
 They are array of arrays.
var student = [[“Kevin”,90,”CSE”] , [“Eric”,40,”IT”] ,
[“Jacob”,60,”ECE”]];

document.write(student[1][0]); //Eric
document.write(student[2][2]); //ECE

Dr. Sandhya P VIT Chennai

 10

Detecting Arrays

Dr. Sandhya P VIT Chennai

 11

Iterating Over an Array

Dr. Sandhya P VIT Chennai

 12

Adding Element to an Array

 Using array index
 Using methods of Array
 push – Append an item to an array
 unshift – Inserts item in the beginning of the array

Dr. Sandhya P VIT Chennai

Adding Element to an Array – 13

Using Index

Dr. Sandhya P VIT Chennai

Adding Element to an Array – 14

Using push() and unshift()

Dr. Sandhya P VIT Chennai

Adding Element to an Array – 15

Using push() and unshift()

Dr. Sandhya P VIT Chennai

Combining Arrays – Using 16

concat()

Dr. Sandhya P VIT Chennai

Removing Elements from an 17

Array
 Manipulating the length of the array
 If the last element needs to be deleted decrement the length of the
array by 1.
 Using methods of Array
 pop – Deletes the last element of the array
 shift – Deletes the first element of the array

Dr. Sandhya P VIT Chennai

Removing Elements from an 18

Array – Decrementing length

Dr. Sandhya P VIT Chennai

Removing Elements from an 19

Array – pop() and shift()

Dr. Sandhya P VIT Chennai

 20

Editing Elements of an Array

 Array object provides the following methods to edit arrays
 Array.slice(beginindex,[endindex])
 Returns an array from the begin index to end index
 If endindex not specified returns till the end of the array
 If the index is negative perform slicing in reverse
 Does not modify original array
 Array.splice(index,deletecount,[element0,…,elementn])
 Returns the array by extracting elements from index to deletecount
 deletecount – is not index but the number of elements to be deleted from the index
 Optional elements are the elements to be replaced in the positions where the original
elements were removed
 Modifies the original array
Dr. Sandhya P VIT Chennai
Extracting Elements of an Array – 21

slice()

Dr. Sandhya P VIT Chennai

 22

Editing an Array – splice()

Dr. Sandhya P VIT Chennai

 23

Associative Arrays
 Associative arrays are arrays with key/value pairs.
 It does not have numeric index.
 The keys are used to access or modify the values.

var stud={“regno”:”19MIA1234”,”name”:”kevin”}
 regno and name are keys
 19MIA1234 and Kevin are respective values

Dr. Sandhya P VIT Chennai

 24

Associative Arrays
 Associative arrays do not support length property.
 Hence we use a for..in loop

Dr. Sandhya P VIT Chennai

 25

Arrays as Reference Types

 Arrays are reference types.
 Hence if we create an array the variable holds the reference or
memory address of that array.
 If we copy this array the new array will also hold the same address.
 Hence any changes done in the new array will affect the original
array and vice versa.

Dr. Sandhya P VIT Chennai

 26

Arrays as Reference Types

Dr. Sandhya P VIT Chennai

 27

Arrays and Strings

 String.split(); - Returns an array by splitting the string into tokens
based on delimiter
 Array.join(); - joins the elements of an array by placing the
delimiters alternative to elements

Dr. Sandhya P VIT Chennai

 28

split() and join()

Dr. Sandhya P VIT Chennai

 29

REFERENCE
 Alexei White, JavaScript Programmer’s Reference, Wrox, ISBN:978-
81-265-2363-4

Dr. Sandhya P VIT Chennai