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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
<!DOCTYPE html> <html lang="en"> <head> <title>Learning Array as Object</title> </head> <body> <script> //Example 01: Pusing Elements to an Array var Items = []; Items.push("Item 1"); Items.push("Item 2"); Items.push("Item 3"); document.writeln("The Array is: " + Items + "</br>"); document.writeln("Array Length : " + Items.length + "</br>"); //Example 02: Join Two Array var Prices = [4,8,12]; document.writeln("Items Array: " + Items + "</br>"); document.writeln("Prices Array: " + Prices + "</br>"); document.writeln("Items + Prices Join: " + Items.concat(Prices) + "</br>"); document.writeln("Prices + Items Join: " + Prices.concat(Items) + "</br>"); //Example 03: Slicing the Array var ItemPrices = Items.concat(Prices); document.writeln("ItemPrices: " + ItemPrices + "</br>"); document.writeln("ItemPrices Sliced - 2 to 5 :" + ItemPrices.slice(2,5) + "</br>"); //Example 04: Convert Array as a String document.writeln("ItemPrices: " + ItemPrices + "</br>"); document.writeln("ItemPrices.join() : " + ItemPrices.join() + "</br>"); document.writeln("Join with ~ :" + ItemPrices.join(" ~ ") + "</br>"); document.writeln("Join with html break : </br>" + ItemPrices.join("</br>") + "</br>"); //Example 05: Array Sorting & Reversing var Numbers = [4,2,3,1,7]; document.writeln("Numbers: " + Numbers + "</br>"); document.writeln("Numbers After Sort : " + Numbers.sort() + "</br>"); var Sorted = Numbers.sort(); document.writeln("Sorted Numbers Reversed: " + Sorted.reverse() + "</br>"); //Example 06: Find Array Element Numbers.push(3); document.writeln("Numbers: " + Numbers + "</br>"); document.writeln("Number 3 is at Index : " + Numbers.indexOf(3) + "</br>"); document.writeln("The Last occurance of 3 is at: " + Numbers.lastIndexOf(3) + "</br>"); //Example 07: Test Elements in the Array every & some predicates function positive(value, location, array) { if (value < 0) { return false; } else { return true; } } document.writeln("Check All Numbers are Positive: " + Numbers.every(positive) + "</br>"); Numbers.push(-2); document.writeln("Check All Numbers are Positive: " + Numbers.every(positive) + "</br>"); document.writeln("Check at least one number is positive: " + Numbers.some(positive) + "</br>"); </script> </body> </html> |
Categories: JavaScript
Tags: concat(), every predicate, reverse(), slice(), some predicate, sort()