Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to work with Array functions in Javascript

See in this article what are and how to use the native functions of manipulation of arrays in Javascript language.

On general computing, an array is one of the most used structures. Most of the actual programming languages implement arrays and give native functions in order to manipulate them.

On this article, there will be presented the natively available functions on Javascript in order to work with arrays, allowing, for instance, to add, to remove, to locate, and put in an order elements of a collection.

Manipulating arrays with Javascript

Figure 1: Manipulating arrays with Javascript

Beyond the conceptual presentation, it will be shown a practical example of each function use, as well as a brief discussion about the obtained results.

concat

The concat method is used to put together two or more arrays to an array that calls the function. The initial objects are not altered, but the result is an array containing the first array data and the elements of the arrays passed as parameters.

Listing 1: Concat's example of use

<script type="text/javascript">
	var array1 = new Array(1, 2, 3);
	var array2 = new Array(4, 5, 6);
	var array3 = new Array(7, 8, 9);
	var result = array1.concat(array2, array3);
	document.write(result);
</script>

Executing this code, we have a resulting array containing the elements 1,2,3,4,5,6,7,8 and 9, on that order. After the method's calling, none of the original arrays suffered any alterations.

indexOf

This function receives as parameter a value to be located in the array and returns, in case it is found, its position on the list. The counting of the positions start on zero, and not at one as we're used in our daily lives. In case the element does not be located, the value of return is -1.

Listing 2: Example of use of indexOf

<script type="text/javascript">
	var array1 = new Array(1, 2, 3, 4, 5);
	var index = array1.indexOf(3);
	document.write(index);
</script>

On this case, the value exhibited in the browser will be "2", because the element 3 is found on the second position of the array.

join

The join function can be called in two ways: in the first one it is not informed parameters and the return is a string containing all the elements of the array separated by commas. In the second one, it is informed a text that will serve as a separator, and the return is similar to the first one, but instead of the commas, it is exhibited the cited separator.

Listing 3: Example of join's use

<script type="text/javascript">
	var array1 = new Array(1, 2, 3, 4, 5);
	var elements =array1.join(“-“);
	document.write(elements);
</script>

The result, on this case, is the text "1-2-3-4-5". In case it was not informed the separator, the result would be "1,2,3,4,5".

lastIndexOf

Similar to the indexOf, but in this case it returns the position of the last occurrence of an element in the array, it means, in case the element shows up more than one time on the list, the return is the position in the last one. In the same way as the indexOf, if the element does not exist on the list, the return is -1.

Listing 4: Example of use of the lastIndexOf

<script type="text/javascript">
	var array1 = new Array(1, 2, 3, 2, 7);
	var index = vetor1.lastIndexOf(2);
	document.write(index);
</script>

pop

The method called pop removes the last element of an array and returns it as a result. On this case, the original array is altered.

Listing 5: Pop's example of use

<script type="text/javascript">
	var array1 = new Array(1, 2, 3, 2, 7);
	var last =array1.pop();
	document.write(last);
</script>

On the execution of the code above, the number 7 is exhibited on the screen, because it is the last element of the array, which will have four items.

push

The push is used to add one or many elements, received as parameters, at the end of the array that calls it. Next we have an example use the same array of the Listing 5. On it, we have inserted the values 9 and 5 at the end of the array.

Listing 6: Push's example of use

<script type="text/javascript">
	var array = new Array(1, 2, 3, 2, 7);
	array1.push(9, 5);
	document.write(array1);
</script>

As it was expected, it will be written on the browser the text "1,2,3,2,7,9,5", it means, the new content of the array.

reverse

As the name suggests, the method reverse inverts the elements of an array, making the last one to become the first one, the first one to become the last one, and the middle ones to follow the same scheme. This method's calling does not require any parameter.

Listing 7: Reverse's example of use

<script type="text/javascript">
	var array1 = new Array(1, 2, 3, 4, 5);
	array1.reverse();
	document.write(array1);
</script>

After calling the reverse method, the original array is altered and the text exhibited on the browser is "5,4,3,2,1".

shift

This function removes the first element of a random array and returns it as a result. As in the method called pop, the array that originates the calling to this method becomes altered after its execution.

Listing 8: Example of the shift's use

<script type="text/javascript">
	var array1 = new Array(1, 2, 3, 4, 5);
	var first = vetor1.shift();
	document.write(first);
</script>

On this case, we have as the result the value 1, it means, the first element of the list.

slice

The function slice receives as parameters two integer values and returns a fraction of the original array based on the informed limits. The first parameter indicates the position of the first element of the array to become part of the selection, while the second one indicates the following position of the last selected element (one more than its position).

On the following example, we have selected the elements 2, 3and 4 of the original array, informing the position of the element 2 (first of the selection) and of the element 5 (follows the 4, which is the end of the selection).

Listing 9: Example of slice's use

<script type="text/javascript">
	var array1 = new Array(1, 2, 3, 4, 5);
	var selection = vetor1.slice(1, 4);
	document.write(selection);
</script>

sort

This method, which has a suggestive name, orders the elements of an array. The simplest calling of this function does not require parameters and orders in the array in a crescent way. A more complex calling receives a function of ordination as a parameter, this function defines the calculation to be considered in the comparison between two elements.

Listing 10: Example of sort's use

<script type="text/javascript">
	var array1 = new Array(3, 2, 1, 5, 4);
	array1.sort();
	document.write(array1);
</script>

The result is the sorted array since the element 1 until the 5 in a crescent order.

splice

Until here the splice is the most complex method presented, it is used to remove and/or add items of/into an array. The calling to this method requires two or many (three or more) parameters.

The first parameter represents the position of the element to be removed (starting from zero) and the second indicates the quantity of elements to be removed from the array, from the indicated position. In case it is not desired to remove any item, it just takes to input 0 (zero) as the second parameter. In the following example, the second and the third elements are removed.

Listing 11: Example of splice's use to removal of elements

<script type="text/javascript">
	var array1 = new Array(1, 2, 3, 4, 5);
	array1.splice(1,2);
	document.write(array1);
</script>

In case it is desired only to insert elements on determined position, it takes only to inform it as the first parameter, then inform 0 (zero) as the second one and, so on, inform the element, or elements, to be added.

Listing 12: Example of splice's use to the adding of elements

<script type="text/javascript">
	var array1 = new Array(1, 2, 3, 4, 5);
	array1.splice(1, 0, 9, 8);
	document.write(array1);
</script>

The code above makes with the values 9 and 8 to be added after the second element. The text exhibited is then: "1,9,8,,2,3,4,5".

A third way to use this function would be as to remove and add elements at the same time. Based on the past examples, the code on the Listing 13 removes the second and the third elements and adds the values 9 and 8 into their places.

Listing 13: Example of splice's use to the removal and adding of elements

<script type="text/javascript">
	var array1 = new Array(1, 2, 3, 4, 5);
	array1.splice(1,2, 9, 8);
	document.write(array1);
</script>

The result now is: "1,9,8,4,5".

toString

Method that is common to all objects, the toString converts the array into string, returning this text as the result. In the case of arrays, the result contains all the elements separated by commas.

Listing 14: Example of use of toString

<script type="text/javascript">
	var array1 = new Array(1, 2, 3, 4, 5);
	array1.unshift(-1, 0);
	document.write(array1);
</script>

The result exhibited on the browser is "1,2,3,4,5".

unshift

The unshift function works likewise the push, however instead of inserting elements at the end of the array, add them on the beginning. It can be passed just one or many elements as parameters.

Listing 15: Example of the unshift's use

<script type="text/javascript">
	var array1 = new Array(-1, 0 ,1, 2, 3, 4, 5);
	var text =array1.toString();
	document.write(text);
</script>

The code of the Listing 15 makes with the values -1 and 0 be inserted at the beginning of the array, making them first and second elements.

valueOf

This last function, maybe the less used, have as result the primitive representation of the array, it means, a text containing all of its elements separated by commas. Its calling does not require parameters.

Listing 16: Example of valueOf's use

<script type="text/javascript">
	var array1 = new Array(1, 2, 3, 4, 5);
	var text = array1.valueOf();
	document.write(text);
</script>

The result on this case is the same of the method toString, it means, "1,2,3,4,5".

Conclusion

As we have seen, the Javascript give us a series of functions that ease a lot the work with arrays. Know them is fundamental to the web programmers that use this language on their projects, since that the manipulation of arrays is commonly necessary in the programming world.

I hope you liked the article, thanks to the attention of the readers and goodbye. See you next time.



Microsoft MVP, Bachelor in Science And Technology, Editor and Consultant at DevMedia with more than 7 years of experience in software development.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login