Skip to Content

Advertisement

You (Level 0)
0% Complete
Last Badge Earned
None

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

I've attached my favorite JavaScript and jQuery book. I would encourage you to read it as well.

Your code will execute in this window.



Let's explore some more tutorials or topics!

Next Tutorial Previous Tutorial

Advertisement

If you enjoyed this resource, support me by sharing this page with others.

Comment on

Show Comments
  • User

    ericWS Dec. 11, 2013, 1:58 a.m.

    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.

  • User

    JJChapman Oct. 18, 2013, 3:12 a.m.

    No actual line break in the first example (? am I missing something)



Advertisement