Wednesday, 26 March 2014

Using Arrays In Javascript

javascript arrays
What is a Javascript Array?

If you are new to programming and Javascript in general then you may be have landed here with that very question in your head. In programming terms arrays in Javascript are variables which can hold multiple values, as opposed to other variable types, which will only hold a single value at any given time. The best way to get a handle on these special variables is by example so take a look at the small example below and I'll explain what's going on after you have read over it.



Declaring A Javascript Array:
  1. var friends = new Array("Jim","Bob","Steve","Jane");
  2. var foes = new Array();
  3. foes[0] = "Eric";
  4. foes[1] = "Claude";
  5. foes[2] = "Will";
  6. foes[3] = "Howard";

The example above declares two arrays. On line 1 we create an array called friends and pass it four strings separated by comas. These four names will be the values stored in the array. On line 3 we declare another array called foes, but this time, we use bracket notation to supply each element with a value. Numerically indexed arrays in Javascript always start at zero and work upwards from there, and that is something you will need to keep in mind when iterating over the elements of an array as you will see soon enough.

Accessing The values In A Javascript Array:

The answer to this question is actually in the example code above. If you look closely at how we added our values to the second array called foes, you will notice that we used a number between each set of brackets. These are the arrays indices which we can also use to gain access to our values by doing something like the code below:

  1. console.log(foes[0]);

The code above would output Eric to the browsers developer console if it was run, and that is how you can manually access each element of an array in Javascript, but what about those times when you may not know the exact location of a value within your array. Well, finding it is fairly straight forward. We can iterate over each element of our array and check if it matches the value we are looking for, just like the code below will loop over each element of the foes array and print a message to the console if it finds the one containing the name Will:

  1. for(name in foes)
  2. {
  3. if(name === "Will"){
  4. console.log("Found him!");
  5. }
  6. }

You could also use a standard for loop to iterate over each element. Depending on what you are trying to achieve, looping over an array in this way can give you greater flexibility over how to work with each element, but for most cases the for in loop above is normally all you need.

  1. for(var i = 0; i != foes.length; i++){
  2. if(foes[i] === "Will"){
  3. console.log("Found Him!");
  4. }
  5. }
Finding The Length Of An Array In Javascript:

There will be plenty of times during your coding endeavours where you will need to know exactly how many elements are contained within an array. Fortunetly Javascript has the built in length property, which can you see in action in the previous example. This property not only gets the length of arrays but it can also find the length of a string since its nothing more than an array of characters. The code below shows how we could get the number of elements contained in our foes array:

  1. var arlen = foes.length;
  2. console.log(arlen);
  3. //returns 4
Methods Of A Javascript Array:

Okay, so I've given you a taste of just how useful a Javascript array can be in your programming projects, but there is a lot more you can do with them. There are a multitude of built in methods which can help you do various things with your arrays, such as joining them together (concatenation), splicing them, re-ordering them and the list goes on. So rather than fill up this page with a description of every method and how to use them, I've provided a link to the w3cschools website which has a full explanation of each function and how to use them: Javascript Array Method Docs

Related Articles:
Associative Arrays In Javascript

No comments:

Post a Comment