articles

Home / DeveloperSection / Articles / JavaScript Array Object

JavaScript Array Object

Danish Khan 4899 12-Nov-2012
JavaScript Array Object
Introduction:

 In this article I am going to show what arrays are and how to declare and use it in Java Script.

The Array object is used to store multiple values in a single variable. It is a special variable which

 can hold multiple values at a single time. Arrays save a lot of memory space suppose if we have

 1 car and we want to store it , we can use a variable But if we have 1000 cars name and to store

 these names require 1000 variable so this limitation was removed by array. In an array we can

 have multiple values within one variable and we can access those values with the index number.

 Array index starts with 0.

Creating and assigning values in an array:  
var clothes = new Array();

clothes[0] = "Trousers";
clothes[1] = "Shirts";
clothes[2] = "T-shirts"; 
Another Shorthand method for creating and assigning values in an array:  
var clothes=new Array("Trousers","Shirts","T-Shirts"); 
Accessing an Array:

var cloth = clothes[0];

Modify First element of an array which is at index position 0:

clothes[0]=”Shirts”;

We can have different objects in one array, In Java Script all the variables, array elements and functions are

objects. So we can assign these different objects to a single array.

For eg:

clothes[0]=Date.now;

clothes[1]=myarray(); 

Java Script Array Methods:

 1 .  concat() : It will return a new array comprising this array and the other array(s) joined.
2. filter(): Creates a new array with all the elements of this array for which provided filtering function returns true.
3. forEach(): Calls the function for each element of the array.
4. indexOf(): It will return the first index of the array where the value is equal to a specified value otherwise if not found, it will return -1.
5. join(): It joins all the element of a particular array into a string.
6. lastIndexOf(): It returns the last index where specified value matches the array element else it will return -1.
7. push(): It Adds one or more elements to the end of an array and returns the new length of an array.
8. pop(): It removes the last element from an array and returns that element.
9. toString(): It returns a string representation of an array.
10. sort(): It will sort the element of an array lexicographically.
11. reverse(): It reverses the order of an array the first become the last and last becomes first.
12. splice(): It adds or remove the elements of an array.
13. shift(): Removes the first element of an array and returns that element. 

Example of Declaring and accessing arrays:
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
</head>
<body>
    <script type="text/javascript">
        var clothes = new Array();
        clothes[0] = "Trousers";
        clothes[1] = "Shirts";
        clothes[2] = "T-shirts";
        for (var i = 0; i < clothes.length; i++) {
            document.write(clothes[i] + "<br />");
        }
    </script>
</body>
</html>
Output:

JavaScript Array Object

Example of using Arrays methods:

1.       Concat():   

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
</head>
<body>
<script type="text/javascript">
var director = new Array("Neeraj");
var manager = new Array("Abhishek", "Pankaj");
var employee = new Array("Amit", "Ashutosh");
var total_Persons = director.concat(manager, employee);
document.write("Total Persons in the company are: " + total_Persons + "<br/>");
</script>
</body>
</html>
Output is:   

JavaScript Array Object

2.       indexOf():   

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
    <script type="text/javascript">
        function FindIndex() {
            var names = ["Abhishek", "Pankaj", "Ashutosh"];
            var findIndex = names.indexOf("Pankaj");
            document.write("Index at Pankaj is: " + findIndex + "<br/>");
        }
    </script>
</head>
<body onload="FindIndex()">
</body>
</html>
Output is:

Index at Pankaj is: 1 

3.       join():  

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<script type="text/javascript">
 function joinArray() {
     var names = ["Abhishek", "Pankaj", "Ashutosh"];
     var namejoin = names.join();
     document.write("After joining the string is: " + namejoin + "<br/>");
  }
</script>
</head>
<body onload="joinArray()">
</body>
</html>
output:

JavaScript Array Object

4.       lastIndexOf()  

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
    <title>Finding Last index of </title>
    <script type="text/javascript">
        function FindLastIndex() {
            var names = ["aa", "ba", "bc", "aa"];
            var findIndex = names.lastIndexOf("aa");
            document.write("Index is: " + findIndex + "<br/>");
        }
    </script>
</head>
<body onload="FindLastIndex()">
</body>
</html>

   Output: 

JavaScript Array Object

5.       sort():

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
    <title>Sorting the string </title>
    <script type="text/javascript">
        function sortArray() {
            var names = ["aa", "ba", "bc", "ab"];
            document.write("Before sorting the value are: " + names + "<br/ >");
            names.sort();
            document.write("After sorting the value are: " + names + "<br/ >");
        }
    </script>
</head>
<body onload="sortArray()">
</body>
</html>

  Output: 

JavaScript Array Object 

6.       reverse():   

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
    <title>Reversing the string </title>
    <script type="text/javascript">
     function reverseArray() {
     var names = ["aa", "ab", "ba", "bc"];
     document.write("Before reversing the array values are: " + names + "<br/ >");
     names.reverse();
     document.write("After reversing the array values are: " + names + "<br/ >");
        }
    </script>
</head>
<body onload="reverseArray()">
</body>
</html>
  Output: 

  JavaScript Array Object 

7.       splice():


<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
    <title>Using Splice Method</title>
    <script type="text/javascript">
        function spliceArray() {
            var names = ["Apple", "Mango"];
            names.splice(2, 0, "Banana", "Orange");
            document.write(names);
        }
    </script>
</head>
<body onload="spliceArray()">
</body>
</html>

Output:

JavaScript Array Object

 

8.        shift():

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<title>shift method </title>
<script type="text/javascript">
 function shiftArray() {
 var names = ["Apple", "Mango", "Orange"];
 document.write("Before shifting the value of an array is : " + names + "<br />");
 names.shift();
 document.write("After shifting the value of an array is : " + names + "<br />");
 }
</script>
</head>
<body onload="shiftArray()">
</body>
</html>


Output:


JavaScript Array Object


Conclusion:

Through this article we came to know about Arrays in Java Script and methods which can be applied on arrays to  perform various operations.

 


Updated 07-Sep-2019

Leave Comment

Comments

Liked By