Develop JavaScript to implement Array functionalities

Laboratory Objective:

  1. To be able to understand the concept of array.
  2. To be able to develop JavaScript programs using Array.
  3. To be able to use array methods in programs.

JavaScript Arrays

  • An array is a special variable, which can hold more than one value at a time.
  • JavaScript arrays are used to store multiple values in a single variable.

Declaring an array

  • There are 2 ways to construct an array in JavaScript

1) By array literal

2) By using an Array constructor (using new keyword)

1) By array literal

  • This is the easiest way to create a JavaScript Array.
  • Syntax

var array_name = [item1, item2, …];

  • Example:

var fruits = ["Apple", "Orange", "Plum"];

2) By using an Array constructor (using new keyword)

  • You can also create an array using Array constructor with new keyword
  • This declaration has five parts:

1) var keyword

2) Array name

3) Assignment operator

4) new operator

5) Array ( ) constructor

  • Syntax

var array_name = new Array();

  • Example:

var books = new Array();

books[0] = "C";

books[1] = "C++";

books[2] = "JavaScript";

books[3] = "PHP";

          OR

var books = new Array("C", "C++", "JavaScript", "PHP");

JavaScript Array Methods

  • The Array object has many properties and methods which help developers to handle arrays easily and efficiently.
  • You can get the value of a property by specifying arrayname.property and the output of a method by specifying arrayname.method().
  • The following are methods of the JavaScript Array:

1. length property → Returns the number of elements in an array.

2. prototype property → Used to add new properties and methods of object.

3. reverse() method → Returns the reverse order of items in an array.

4. sort() method → Returns the sort array.

5. pop() method → Remove the last item of an array.

6. shift() method → Remove the first item of an array.

7. push() method → Adds an array element to array at last.

8. unshift() method → Adds an array element to array at beginning.

Sample Programs

1) Develop a JS program to demonstrate Arrays and its methods.

<html>

<head>

 <title>Arrays!!!</title>

 <script type="text/javascript">

  var languages = new Array("C", "C++", "HTML", "Java", "VB");

  Array.prototype.displayItems=function(){

   for (i=0;i<this.length;i++){

    document.write(this[i] + "<br />");

   }

  }

  document.write("Programming lanugages array<br />");

  languages.displayItems();

  document.write("<br />The number of items in languages array is " +  languages.length + "<br />");

  document.write("<br />The SORTED languages array<br />");

  languages.sort();

  languages.displayItems();

  document.write("<br />The REVERSED languages array<br />");

  languages.reverse();

  languages.displayItems();

  document.write("<br />The languages array after REMOVING the LAST item<br />");

  languages.pop();

  languages.displayItems();

   document.write("<br />THE languages array after PUSH<br />");

   languages.push("JavaScript");

  languages.displayItems();

   document.write("<br />The languages array after SHIFT<br />");

   languages.shift();

  languages.displayItems();

 </script>

</head>

<body>

</body>

</html>

2) Develop a JavaScript program to display the sum and product of array elements.

<html>

<head>

 <title>Display sum and product of array elements</title>

</head>

<body>

 <script type="text/javascript">

  var arr = [13, 56, 7, 23, 1, 7, 8];

   var sum=0, product = 1;

   for(var i=0; i<arr.length; i++) {

           

      sum += arr[i];

      product *= arr[i];    

   }

   document.write("Array elements are " + arr + "<br />");

   document.write("<h3>Sum : " + sum + "</h3>");

   document.write("<h3>Product : " + product + "</h3>");

 </script>

</body>

</html>

3) Develop a program to find the minimum and maximum element in an array.

<html>

<head>

    <title>Display minimum and maximum element in Array</title>

</head>

<body>

    <p id="result"></p>

    <script>

        var arr = [54, 21, 74, 31, 12];

        var max = arr[0];

        var min = arr[0];

       document.write("Array elements given are: " + arr + "<br/>");

       

        for(var i=1; i<arr.length; i++) {

           

            if(arr[i] > max)

                max = arr[i];

            if(arr[i] < min)

                min = arr[i];

        }

        document.write("<h3>Minimum element is " + min + "</h3>");

        document.write("<h3>Maximum element is " + max + "</h3>");

    </script>

</body>

</html>