1. JavaScript Array Object

We already learned about Array in JavaScript. In this article, we look at the functionalities offered by the array object in detail. We will go through a set of examples and learn how to use Array Object Functions.

2. Array Length

Array object exposes a property called length which tells the size of the array. Example is below:

1) First, we declared an Array and named it as Items.
2) In the Items array, we added three sample items.
3) Using length property, we find the size of the items array.
4) Shows the output and array length is printed as three, as we have three items in the array.

3. Join Two Arrays

In JavaScript, you can join two arrays using the concat method and you get the merged array as a return value. We already have items array from the previous code snippets. In the below code, we have one more array to test the concat method.

1) Here we declare Prices array and initialize it.
2) Method writeln prints both Items and Prices array.
3) Browser shows content of both the arrays.
4) Here, we access the concat method on the Items array and pass Prices array as a parameter. When concat merges the array elements, it appends elements of the Prices array towards the end and returns the resulting array. Note, both the arrays are intact, and you get the merged array as a return value.
5) From the result, we can observe that concat method appended the Prices array elements towards the end of the Items array.
6) This time, we call the concat method on the Prices array and pass Items array as a parameter to it.
7) In the result, we can see Prices Array elements are displayed first.

4. Getting Sub-Array

Just like a substring, one can get part of the array elements using the slice method. Below is the example:

1) Here, we stored the concat result of the array in a new array variable ItemPrices and then printed its content.
2) The slice method fetches the range of elements from the array and returns it. First param denotes the start index location and second param denotes the end index location. In our case, we asked to slice the array elements from index location 2 to 5.
3) Shows the sliced result in the browser.

5. Join Array Element by a Letter

It is possible to stitch the JavaScript Array elements by a given delimiter. The method used is join() and it returns the string.

1) Here, we print the content of the array, ItemPrices.
2) Shows the elements in the array.
3) The join() method, when called with no argument, joins the array elements by a comma (,) and returns the resulting string.
4) Shows the result of join.
5) This time, we pass the delimiter as ~ and printed the resulting string.
6) Shows the resulting string. You can see each element is separated by the ~ letter. Also notice, the ~ is not there in start and end of the elements.
7) We check the join method by passing the html tag for line break. The resulting string contains a line break between every element in the array.
8) When we print the resulting array, each element is printed in its own line because of the line break tag.

6. Sorting a JavaScript Array

The method sort() will sort an array in ascending order. One can use the reverse() method to reverse an array.

1) Here, we created an array and printed it. Notice that all elements are numbers here.
2) Shows the content of the array Numbers. You can see the array elements are not in the sort ed order.
3) Here, we call the sort() method on the Numbers array and print the result returned.
4) Result shows that the array is in sorted order.
5) In this code location, we store the sorted array in an array variable called Sorted. Then, we call the reverse() method on this array.
6) The result here shows that array was reversed, and it is in the descending order now.

7. Finding an Element

The methods indexOf() and lastIndexOf() take an argument and searches that in the array. The function indexOf() returns the first index location of the element which was found in the search action whereas lastIndexOf() tells you the last found element in the array.

1) Our Numbers array already contains 3 and we push one more element with the same value 3. Then we print the result to ensure the element 3 is found two times in the array.
2) Here, we search for the element 3 and the method indexOf returns the first found index location, which is 2. Remember indexing starts from zero.
3) Here, we make a call to the lastIndexOf with an argument 3. Now; we get the index location of the last occurrence of 3.

8. The predicates – every() and some()

In JavaScript you can create a callback function, which will be called for each element. The predicate methods every() and some() is useful to test each element in the array to perform a test. Have a look at the below example:

1) The methods some() and every() expect a callback method and they will call it for each element in the array to arrive at true or false decision making. Here, we write a callback method positive which will tell the first argument is positive or not. The meaning of each params are: 1) Array Element Value 2) Index Location 3)The array itself.
2) Here, we make call on the method every() on the Numbers array. Note, we pass our call back function as a parameter to every() method. The method calls positive for each element in the array. The method every returns true when all the numbers in the array elements are positive. You can see it in the result.
3) We push a negative number to the array to check every() returns correct result.
4) Here, we call the method again and result correctly prints false.
5) The some() method returns true if positive call back returns true for at least one element. In the result, you are seeing true because all element are positive except one element.

9. Code Reference

• ASP 4.0 – Image Control – Lab #011
• ASP 4.0 – ImageButton Control – Lab #012

Categories: JavaScript

Tags: concat(), every predicate, reverse(), slice(), some predicate, sort()

This site uses Akismet to reduce spam. Learn how your comment data is processed.