Home » Tutorials » JavaScript » Arrays

Arrays

Javascript Arrays are an object that permits you to store multiple values into a collection for easy reference. For example, if you wanted to track a user’s position position over some time, you could insert the x and y values into an array. Arrays are more than just the example of x and y values though.

Let’s say we are building a calculator. Initially, we might think that we only need to variables. We need one for the first number before the operator is pressed and another one after. Congratulations on us being super static. Maybe we now want to be able to add more than just 2 values before calculating the sum. We should have used an array from the very beginning. If we would have used an array, we could have put all of those numbers in one single array, which is a 1000 times better than having to create a new variable for each number. It is a compliment in the world of programming if someone says your coding is dynamic. Arrays are in fact just that, dynamic.

Example
var example = new Array(“aa”,”bb”,”cc”);
example[3] = “dd”;
example[4] = “ee”;
document.write(example); // write out our entire array
document.write(“<br/>”); // line break
document.write(example[2]); // write out array item with an index of 2
Result
aa,bb,cc,dd,ee
cc

Common Array Properties

constructor – tells us the function that created the Array object’s prototype

Example
var example = new Array(“aa”,”bb”,”cc”);
document.write(example.constructor);
Result
function Array() { [native code] }

length – returns the total number of items in a array

Example
var example = new Array(“aa”,”bb”,”cc”);
document.write(example.length);
Result
3

Common Array Methods

As an object, arrays have a variety of methods. Since arrays are super dynamic, we have a lot of things we want to do with them. The creators of JavaScript gave us plenty of methods to use on our arrays.

concat() – this is the proper way to combine multiple arrays

Example
var example1 = new Array(“aa”,”bb”,”cc”);
var example2 = new Array(“dd”,”ee”,”ff”);
var example3 = new Array(“gg”,”hh”,”ii”);
var example4 = example1.concat(example2,example3);
document.write(example4);
Result
aa,bb,cc,dd,ee,ff,gg,hh,ii

indexOf() – finds item and returns it’s position

Example
var example = new Array(“aa”,”bb”,”cc”,”cc”);
document.write(example.indexOf(“cc”));
Result
2

lastIndexOf() – finds item’s finale occurrence and returns it’s position

Example
var example = new Array(“aa”,”bb”,”cc”,”cc”);
document.write(example.lastIndexOf(“cc”));
Result
3

join() – joins all of the elements in an array into a string (values separated by a comma)

Example
var example = new Array(“aa”,”bb”,”cc”);
document.write(example.join());
Result
aa,bb,cc

slice() – selects and returns part of an array

Example
var example = new Array(“aa”,”bb”,”cc”,”dd”);
document.write(example.slice(2,4)); 
Result
cc,dd

reverse() – reverses the order of the array

Example
var example = new Array(“aa”,”bb”,”cc”);
document.write(example.reverse());
Result
cc,bb,aa

sort() – sorts elements as you would expect

Example
var example = new Array(“dd”,”cc”,”bb”,”aa”);
document.write(example.sort()); 
Result
aa,bb,cc,dd

splice() – add and/or removes elements from array

Example
var example1 = new Array(“aa”,”bb”,”cc”,”dd”);
example1.splice(2,1);
document.write(example1);
document.write(“
“); // line break

var example2 = new Array(“aa”,”bb”,”cc”,”dd”);
example2.splice(1,1,”ee”,”ff”);
document.write(example2);
Result
aa,bb,dd
aa,ee,ff,cc,dd

push() – adds items to the end of array, and returns position of the added item

Example
var example = new Array(“aa”,”bb”,”cc”);
document.write(example.push(“dd”));
Result
4

pop() – removes and returns the last item of the array

Example
var example = new Array(“aa”,”bb”,”cc”);
document.write(example.pop()); 
document.write(“
“); // new line
document.write(example);
Result
cc
aa,bb

shift() – removes and returns the first item of the array

Example
var example = new Array(“aa”,”bb”,”cc”);
document.write(example.shift()); 
document.write(“
“); // new line
document.write(example);
Result
aa
bb,cc

unshift() – adds item to beginning of the array and returns its new length

Example
var example = new Array(“aa”,”bb”,”cc”);
document.write(example.unshift(“zz”)); 
document.write(“
“); // new line
document.write(example);
Result
4
zz,aa,bb,cc


Link/cite this page

If you use any of the content on this page in your own work, please use the code below to cite this page as the source of the content.

  • Stewart, Suzy. "Arrays". After Hours Programming. Accessed on March 16, 2024. https://www.afterhoursprogramming.com/tutorial/javascript/arrays-js/.

  • Stewart, Suzy. "Arrays". After Hours Programming, https://www.afterhoursprogramming.com/tutorial/javascript/arrays-js/. Accessed 16 March, 2024.

  • Stewart, Suzy. Arrays. After Hours Programming. Retrieved from https://www.afterhoursprogramming.com/tutorial/javascript/arrays-js/.



0 thoughts on “Arrays”

  1. It seems that the push() method actually returns the new length of the array, not the position of the new item, as it says above. In the example a 4th item is pushed on a 3-item array. The position of the newest item is 3, but the method returns 4, which is the new length of the array.

Leave a Comment

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