Array Basics in ECMAScript 2015

ECMAScript Basics - Part 11

ECMAScript 6

Foreword: In ECMAScript an array is an object that would hold a list of items. In this tutorial I explain the ECMAScript Array.

By: Chrysanthus Date Published: 12 May 2016

Introduction

This is part 11 of my series, ECMAScript Basics. In ECMAScript an array is an object that would hold a list of items. In this tutorial I explain the ECMAScript Array. You should have read the previous part of the series before reaching here, as this is a continuation.

List Example
Imagine that you are a proprietor of a small company, and you have 10 employees. In your ECMAScript program, you can have their first names in an array. Each list item here is a first name. Let the list be: John, Mary, Peter, Augustine, Angela, Susan, Martin, Grace, Paul, Simon. These items can be placed in a special ECMAScript object called an array. An array item is called an element.

Creating an Array
You create your own array using what is called the array constructor. The array constructor is:

new Array()

You begin with the operator, new, then followed by the word, Array, then parentheses. The parentheses may have components within its pair. ECMAScript is case sensitive; so reserved words must be spelled exactly as they are given. new, and Array, above are reserved words. You must type them exactly as given above. In the word, “Array”, A is in uppercase while the rest of the letters are in lowercase.

You can create an array and at the same time populating (put in the elements) it. You can create an array giving it an initial length (number of elements). You can create an array without populating it or giving it a length; the items may be added to the array later.

You can create an array for the list in the example above, populating it at the same time, as follows:

    empArr = new Array("John", "Mary", "Peter", "Augustine", "Angela", "Susan", "Martin", "Grace", "Paul", "Simon")

empArr is a name given to the array; it is a variable (identifier). Generally, array elements are literals. So, you type a string in quotes and you type a number without quotes.

Giving Length at Creation
If you type only one number within the parentheses of the constructor, that number will not be a value, it will be the length of the array. The following creates an array of length 10, but without any element.

    empArr = new Array(10)

The length value goes into the parentheses alone. In the previous case, you have the elements without any length value. To create the array without any element or length value, you type,

    empArr = new Array()

The parentheses is empty. The syntaxes for the three methods of creating an array are:

arrayObjectName = new Array(element0, element1, ..., elementN)
arrayObjectName = new Array(Length)
arrayObjectName = new Array()

You can consider an array to be made up of cells where each cell receives a value.

Populating an Array
The first method above creates and populates an array at the same time. The syntax to change the content of a cell or give it a new value is:

      arrayObjectName[i] = literal;

You begin with the name, followed by the open square bracket, then the cell index number, the close square bracket, then the assignment operator and then the literal. You can use a variable (identifier) in place of the literal, here. Array cell position counting begins from zero, not 1. So, the first position is index zero, the second is index 1, the third is index 2, etc. In general, counting in computing and programming begins from zero, not 1. You use the above syntax to populate an array. If you create an array using the second and third syntaxes above, then you still have to populate the array. You populate as in the following code:

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>

<script type="text/ECMAScript">

    empArr = new Array();

    empArr[0] = "John";
    empArr[1] = "Mary";
    empArr[2] = "Peter";
    empArr[3] = "Augustine";
    empArr[4] = "Angela";
    empArr[5] = "Susan";
    empArr[6] = "Martin";
    empArr[7] = "Grace";
    empArr[8] = "Paul";
    empArr[9] = "Simon";

    alert(empArr[2]);

</script>

</body>
</html>

The extra HTML code is to produce a web page. You can try the above code. The alert box should show, Peter. Array cell position is called Index (and begins from 0, not 1).

Accessing an Element in an Array
Use the following syntax to access an element:

    arrayObjectName[i]

See the alert statement in the above code, for illustration.

Reading the Value of an Array
The syntax to read the value of an array into a variable (identifier), is:

    vaiableName = arrayObjectName[i]

Displaying the Elements of an Array
You can display the elements of an array. The elements appear as a comma separated list of items. Try the following code:

<script type="text/ECMAScript">

    empArr = new Array();

    empArr[0] = "John";
    empArr[1] = "Mary";
    empArr[2] = "Peter";
    empArr[3] = "Augustine";
    empArr[4] = "Angela";
    empArr[5] = "Susan";
    empArr[6] = "Martin";
    empArr[7] = "Grace";
    empArr[8] = "Paul";
    empArr[9] = "Simon";

    document.write(empArr);

</script>

You simply make the argument of the alert or write function, the name of the array.

The length Property
The Array object has a length property. This is the number of elements in the array. You can use it to set the length of an array. If the length of the array was not set during creation of the array, then you can use the length property to set the length at run time.

If at run time, the array is very long, then the length property can be used to truncate the array. In the following code the length of the array is set and read (displayed), using the length property:

<script type="text/ECMAScript">

    empArr = new Array();
    empArr.length = 10;
    alert(empArr.length)

</script>

Here, the alert argument is the expression, “empArr.length”. You could still assign the return value of this expression to a variable and display the value of the variable, something like:

    myVar = empArr.length;
    alert(myVar);

Array as Object
The array is an object where, the indexed elements are properties. As an object the array also has methods, some of which are given below:

Some Array Object Methods
To execute a method, you type the name of the array first, followed by a dot, then the method name, and then parentheses. The parentheses may have arguments.

The shift Method
The Array shift method removes the first element from an array and returns that element. Read and try the following code (note how the shift method has been used):

<script type="text/ECMAScript">

    empArr = new Array();

    empArr[0] = "John";
    empArr[1] = "Mary";
    empArr[2] = "Peter";
    empArr[3] = "Augustine";
    empArr[4] = "Angela";
    empArr[5] = "Susan";
    empArr[6] = "Martin";
    empArr[7] = "Grace";
    empArr[8] = "Paul";
    empArr[9] = "Simon";

    myVar = empArr.shift();
    alert(myVar);
    alert(empArr.length);

</script>

The pop Method
The pop method removes the last element from an array and returns that element. Read and try the following code (note how the pop method has been used):

<script type="text/ECMAScript">

    empArr = new Array();

    empArr[0] = "John";
    empArr[1] = "Mary";
    empArr[2] = "Peter";
    empArr[3] = "Augustine";
    empArr[4] = "Angela";
    empArr[5] = "Susan";
    empArr[6] = "Martin";
    empArr[7] = "Grace";
    empArr[8] = "Paul";
    empArr[9] = "Simon";

    myVar = empArr.pop();
    alert(myVar);
    alert(empArr.length)

</script>

The sort Method
This function sorts the elements of an array, in dictionary order, unless some other feature is specified. Read and try the following code (note how the sort method has been used):

<script type="text/ECMAScript">

    empArr = new Array();

    empArr[0] = "John";
    empArr[1] = "Mary";
    empArr[2] = "Peter";
    empArr[3] = "Augustine";
    empArr[4] = "Angela";
    empArr[5] = "Susan";
    empArr[6] = "Martin";
    empArr[7] = "Grace";
    empArr[8] = "Paul";
    empArr[9] = "Simon";

    myVar = empArr.sort();
    alert(myVar);
    alert(empArr.length)

</script>

The push Method
The push method adds one or more elements to the end of an array and returns the new length of the array. Try the following code (note how the push method has been used):

<script type="text/ECMAScript">

    empArr = new Array();

    empArr[0] = "John";
    empArr[1] = "Mary";
    empArr[2] = "Peter";
    empArr[3] = "Augustine";
    empArr[4] = "Angela";
    empArr[5] = "Susan";
    empArr[6] = "Martin";
    empArr[7] = "Grace";
    empArr[8] = "Paul";
    empArr[9] = "Simon";

    myVar = empArr.push("Charles", "James");
    alert(myVar);
    alert(empArr.length)

</script>

The splice Method
The splice method adds and/or removes elements from an array. This is what (quoting) the ECMAScript specification has about the splice method:

Syntax:
splice(index, howMany, [element1[, ..., elementN]])

Parameters:
Index: Index at which to start changing the array.

howMany: An integer indicating the number of old array elements to remove. If howMany is 0, no elements are removed. In this case, you should specify at least one new element.

element1, ..., elementN:  The elements to add to the array. If you don't specify any elements, splice simply removes elements from the array.

The last parameter (set in square brackets) in the splice method is optional.

Read and try the following code:

<script type="text/ECMAScript">

    empArr = new Array();

    empArr[0] = "John";
    empArr[1] = "Mary";
    empArr[2] = "Peter";
    empArr[3] = "Augustine";
    empArr[4] = "Angela";
    empArr[5] = "Susan";
    empArr[6] = "Martin";
    empArr[7] = "Grace";
    empArr[8] = "Paul";
    empArr[9] = "Simon";

    myVar = empArr.splice(3, 2, "Roland", "Dorothy");
    alert(myVar);
    alert(empArr.length)

</script>

With the splice method, you must either remove elements or add elements or remove and add elements, within the array.

The array and the for-Loop
A for-loop can be used to return the elements of an array. Read and try the following code:

    <script type="text/ECMAScript">

        empArr = new Array("John", "Mary", "Peter", "Augustine", "Angela", "Susan", "Martin", "Grace", "Paul", "Simon")

        for (i=0; i<empArr.length; ++i)
            {
                document.write(empArr[i]); document.write('<br>');
            }

    </script>

Array counting begins from zero, so in the for-loop parentheses you have, i=0. The maximum index is of the array; it is the length of the array minus 1, so the while condition is “i<empArr.length”. Inside the loop, “document.write(empArr[i])” displays the element value, and “document.write('<br>')” creates an HTML line break.

We have come to the end of this part of the series. Remember, to have a number as value to an array element, type the number without quotes. Rendezvous in the next part of the series

Chrys

Broad Network

Related Articles

Array Basics in ECMAScript 2015

ECMAScript Basics - Part 11

ECMAScript 6

Introduction

Related Links

Comments