Javascript Array

In this chapter we will learn about array.

Let's imagine you have many variables and don't know how to keep it and where to keep it. Array is the thing, which will help you to solve that problem. Array is set of variables and with it you can keep many values in one variable.

As every programming language, javascript has arrays too. In javascript language there is not any constraint of values to keep in array.

In javascript you can declare an array with following way.

 var variable = []
var variable = new Array()

If we use one argument for declaring array with 2-th way (new Array(...)), then in that array will not be one element. That array will be an empty array, which size will be that argument.

var simpleArray = []    // declare an empty array.way 1


var simpleArray = new Array() //  declare an empty array.way 2

If you want to declare not an empty array, you can set it some information. You can declare an array ,then set it to some information or declare an array with some information.

Let's see how we can do that.

var notEmptyArray = ["John",12.5,{name: "example"}]; // good way


var notEmptyArray = new Array("John",12.5,{name: "example"}); // bad way

Indexation in arrays

As you know, in arrays there can be many values and here rises a new problem.

How to get these values? how to know where are these values in array?

Here is how we can do that. There is Indexation idea in every array. Index is the number which says, where the value is in array. Using indexes, we can get whole values in the arrays.

Here is how we can use it.

var variable = [value1,value2,..]
variable[index]  // index is between [0,length(variable)-1]

<!DOCTYPE html>
<html>
  <body>

    <p id="element"></p>

    <script>
      var simpleArray = new Array("Arame", "Hayk", 112.6);
      document.getElementById("element").innerHTML = simpleArray[1];
    </script>
</body>
</html>

Using indexation, we can set value to the given array. Here is how we can do that.

var simpleArray = [];
simpleArray[index] = "Ararat";

Here is another interesting thing about javascript indexation. The array indexes must not be sequence. There can be indexes as 65 then 78 then 125 etc..

In javascript as an index for arrays, we can use strings (associated arrays). But that array will be more object, than array.

Here is how we can use string as an index.

var simpleArray = [];
simpleArray['name'] = "Vahagn";

Array properties

In javascript, there are some properties for every array, which will help you to use it more easily.

Lenght

First property is most important and most useful property. It's a size of array. Every array has its size (length).

var simpleArray = [] // empty array
simpleArray.length // the size (length) of array.it will be 0

When we declare an empty array, its length will be 0.

In Associative arrays, length will be 0, if we don't use any number as an index of that array.

Here is another interesting thing. If we have an array, which indexes are for example: 98,156,167,then it's length will be 168,because javascript looks at the last number index for length of that array.

Sort

Every array in javascript has a property, which name is sort. That property is a method (function) to sort that array.

Here is an example.

<!DOCTYPE html>
<html>
  <body>

   <p id="element"></p>

   <script>
     var simpleArray = ['Vardan', 'David', 'Mary', 'Ani', 'Argishti', 'Hayk'];
     simpleArray.sort()
     document.getElementById("element").innerHTML = simpleArray;
   </script>
  </body>
</html>

Typeof

I think you have heard about typeof in javascript. It shows you the type of that variable. If we use it for arrays, we will see that arrays are objects in javascript

var simpleArray = [...]
typeof simpleArray // will return "object"

Methods

As I said, arrays are most useful things in javascript. They give us several methods, which will help us to work with it more flexible.

Here is the list of it.

Method Description
concat() Joins two or more arrays, and returns a copy of the joined arrays
indexOf() Search the array for an element and returns its position
join() Joins all elements of an array into a string
lastIndexOf() Search the array for an element, starting at the end, and returns its position
pop() Removes the last element of an array, and returns that element
push() Adds new elements to the end of an array, and returns the new length
reverse() Reverses the order of the elements in an array
shift() Removes the first element of an array, and returns that element
slice() Selects a part of an array, and returns the new array
sort() Sorts the elements of an array
splice() Adds/Removes elements from an array
toString() Converts an array to a string, and returns the result
unshift() Adds new elements to the beginning of an array, and returns the new length
valueOf() Returns the primitive value of an array

Let's make some examples.

Concat()

As you saw, the Concat method lets you join 2 or more arrays and to have one arrays instead of one.

Here is how we can do that.

<!DOCTYPE html>
<html>
  <body>

   <p id="element"></p>

   <script>
     var simpleArray1 = ['Vardan', 'David'];
     var simpleArray2 = ['Ani', 'Argishti', 'Hayk'];
     document.getElementById("element").innerHTML = simpleArray1.concat(simpleArray2);
   </script>
  </body>
</html>

IndexOf()

Here is another interesting method. This method is very useful. Using it we can get the index of given value in the given array.

<!DOCTYPE html>
<html>
  <body>

   <p id="element"></p>

   <script>
     var simpleArray = ['Vardan', 'David', 'Ani', 'Argishti', 'Hayk'];
     document.getElementById("element").innerHTML = simpleArray.indexOf('Argishti');
   </script>
  </body>
</html>

Push()

This method is very useful too. Using it we can add value to the give array.

<!DOCTYPE html>
<html>
  <body>

   <p id="element"></p>

   <script>
     var simpleArray = ['Vardan', 'David', 'Ani', 'Argishti'];
     simpleArray.push('Hayk');
     document.getElementById("element").innerHTML = simpleArray;
   </script>
  </body>
</html>

Slice()

In javascript arrays methods are very useful, and this following method is useful too. Using this function, we can cut the array and get a piece of it.

Let's make an example to know how to use it.

<!DOCTYPE html>
<html>
  <body>

   <p id="element"></p>

   <script>
     var simpleArray = ['Vardan', 'David', 'Ani', 'Argishti'];
     var result = simpleArray.slice(0,2); // 1th argument is start index,2th is the end

     document.getElementById("element").innerHTML = result;
   </script>
  </body>
</html>

Splice()

Here is one method of javascript arrays. Using this function, we can add new values to given index.

Let's make an example to know how to use it.

<!DOCTYPE html>
<html>
  <body>

   <p id="element"></p>

   <script>
     var simpleArray = ['Vardan', 'David', 'Ani', 'Argishti'];
     simpleArray.splice(2, 0, 'Hayk', 'Ararat');
     document.getElementById("element").innerHTML = simpleArray;
   </script>
  </body>
</html>