Using Arrays (integer, index, associative array)

1. Introduction

After completing this module, you are expected to:

• Understand how to add/remove element/s in an array;
• Use common method such as pop(), push(), shift(), unshift() and splice() to add/remove element/s in an array; and
• Differentiate arrays with objects.

(Source: https://imgur.com/r/programmerhumor/RfutaBk)

          In the previous lesson, you were able to learn how to declare and assign values to an array. An array is a collection of values. These values are known as elements. The elements are positioned according to their index. The index of an array starts with 0.

          For this lesson, you will learn common properties and methods that can be used to manipulate arrays.

2. Length of an Array

The length of an array is the total number of elements stored in an array. It can be returned using the length property.

 For example,

3. The push() Method

          The push() method enables you to add one or more items to an array. This method may contain several parameters where each of these parameters represents an item which will be added to the end of the array.

For example,

          When we try to print the array in the example above using console.log, it will print ["Kate", "Sun", "Juliet", "Libby", "Shannon"].

4. The unshift() Method

          Another way to add an element to an array is using the unshift() method. Unlike the push() method, this method will add an item at the beginning of an array.

 For example,

          Printing the array of the example above, the result would be ["Libby", "Shannon", "Juliet", "Kate", "Sun"].

5. The pop() and shift() Method

          In order to remove an element in an array, the method pop() and shift() will be used. The pop() method will remove the last element of an array while the shift() method will remove the first element of an array.

For example,

6. The splice() Method

          The splice() method allows us to add and/or remove items to or from an array, and to specifically indicate the index of the elements that have to be added or removed.

For example:

            The method splice() requires at least 2 parameters. The first parameter refers to the index that specify the position of the array item which will be added or removed. The second parameter will be the number of items to be removed. In the example, it is set to 0, - which means that no items will be removed. The succeeding parameters are optional. It is assigned to item/s that will be added to the array. Another example below will show how removing an item is done using splice().

             Take note that combining the two examples above would allow the use of the splice() method to both add and remove elements to and from an element at the same time.

7. Arrays are Objects

          When using the typeof operator in a JavaScript array, it returns an “object”. This is because arrays are special types of objects. The difference between arrays and objects is that when accessing an “element” of an array, numbers are used as compared to objects that use names to access its “members”.

 For example,

          In the example above, both of them will print “Jack”. However, accessing “Jack” in the array uses the index 0 while the name firstName is used in the object.

          The statement console.log(objPerson["firstName"]); could also be replaced with console.log(objPerson.firstName); and would still give you the same output. There are subtle differences between these two forms in accessing object items or elements and would leave that to you to experiment with them.

8. Associative Arrays

          Associative arrays are arrays with name indexes. Many programming supports this. However, in JavaScript, named indexes are not supported in arrays. Arrays in JavaScript always uses numbered indexes. Take note that arrays in JavaScript can contain an array with name indexes.

For example,

          In the example above, it will display “Philippines”. We cannot directly access “Philippines”. Instead, we need to access the element with index 2. This element is an object type. In order to access the members of this object, the named index is used. Thus, the code person[2][“country”].

          Aside from using the square bracket ([]) property accessor, element or item in an object can be accessed using the dot (.) property accessor. For example, to access the element “Philippines”, you can use the code person[2].country.

           For more information on the differences between the dot notation and the bracket notations in accessing object items, please visit:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors

9. Summary and References

Summary:

References: