Javascript arrays

• Arrays are list-like objects that contain one or more elements.
• The members of an array do not have to be all of the same type.
• Arrays can be nested, to any depth.
• The list of Javascript Array methods and other information about the Array type can be found here.

Syntax for array literals

characters in blue

Must appear literally as shown.

element-list

A comma-separated list of Javascript expressions (remember that an expression must evaluate to something).

Array examples

Array literals

let emptyArray = [];
let arrayOfNumbers = [1, 2, 5.3, 8, 2, 4.4, 6];
let arrayOfStrings = ['&#@!?', 'John', 'Jane', 'bob@xyz.ie'];
let mixedArray = ['orange', 7.6, true, 1, 3, 'apple', false, 'banana'];

Accessing parts of the array and finding its length (try this code in the console)

let mixedArray = ['orange', 7.6, true, 1, 3, 'apple', false, 'banana'];

// we extract the 1st element using index 0
mixedArray[0];

// we extract the 5th element using index 4  
mixedArray[4];

// the length of the array is in property length
mixedArray.length;

// the slice includes elements at index 2 and
// above, up to index 6 but not including 6
mixedArray.slice(2, 6);

// use slice to make a new copy of the array
let copyOfMixedArray = mixedArray.slice();

Concatenation (try this code in the console)

let numArray = [ 1.1, 2.2, 3.3, 4.4, 5.5, 6.6 ];

// concat() returns a new array containing all the
// elements of the two arrays involved;
// it does not modify the original array
numArray.concat([7.7, 8.8]);
numArray.slice(1, 3).concat(numArray.slice(4));

Modifying arrays (try this code in the console)

let stringArray = ['a', 'b', 'c', 'd', 'e'];

// adding an element at the end
stringArray.push('f');

// removing an element from the end
let element = stringArray.pop();

// replacing an element at an index
stringArray[0] = 'zzz';	

// replacing a range of elements (splicing),
// with arguments:
//    index of first element in range
//    number of elements in range
//    new elements to insert
stringArray.splice(2, 2, 'w', 'x', 'y', 'z');

Some other methods (try this code in the console)

let nameArray = ['Flo', 'Hal', 'Bob', 'Con', 'Ger', 'Dan', 'Ali'];

// sort the array (the original is modified)
nameArray.sort();

// reverse the order (the original is modified)
nameArray.reverse();

// convert the array to a string, with argument as separator
nameArray.join(' ');

// convert a string to an array (opposite of join)
let s = "one two three four";
s.split(" ");

// place a new element in specified locations
// (the original array is modified):
// in example locations 3 and 4 (5 is the
// first to be excluded)
nameArray.fill('zzz', 3, 5);

// get the index of an element in the list
nameArray.indexOf('Hal');

			    

Array exercise

Using lists with loops: let's write some Javascript code that prints to the console a list of who would like which drink (like the one shown on the right), using the following arrays.

['Flo', 'Hal', 'Bob', 'Con', 'Ger', 'Dan', 'Ali']
['tea', 'coffee', 'tea', 'coffee', 'coffee', 'coffee', 'tea']
			    

let names = ['Flo', 'Hal', 'Bob', 'Con', 'Ger', 'Dan', 'Ali'];
let drinks = ['tea', 'coffee', 'tea', 'coffee', 'coffee', 'coffee', 'tea'];
let list = "";
for (let i = 0; i < names.length; ++i) {
    list += names[i] + " would like some " + drinks[i] + "\n";
}
console.log(list);