Javascript Array And Its Different Types In Javascript

Posted By Bajarangi soft , Posted On 16-09-2020

JavaScript array contain different types

List of JavaScript array contain different types.

Array is special variable which can store more than one value at time.
Array elements can be any type,and different elements of the same array can be different types (string,boolean,even objects or other arrays) its possible to create an array that has a string in the first position.
Arrays in Javascript are zero-based,it means first element index value of an array start from 0.

Syntax and Usage.

var array_name = [item1, item2, ...];

var         -> variable to hold array elements. 
array_name  -> variable.
item        -> elements of array.

1.Create array:

var array = [ "Strawberries", "banana", "apple", "kiwi" ];

array can also create in another way:

var array = new Array("Strawberries", "banana", "apple", "kiwi" );

An array in JavaScript can hold different elements
We can store Numbers, Strings and Boolean in a single array.

// Storing number, boolean, strings in an Array
var bike = ["bike-1", 25000, "bike-2", 50000, "cost", true];

2.Write javascript to display all elements in an array.

<script>
    var array = [ "Strawberries", "banana", "apple", "kiwi" ];
    document.getElementById("demo").innerHTML = array;
</script>

3.Access the Elements of an Array using index value.

To print only one element in an array we can access an array element by referring to the index number.

document.getElementById("demo").innerHTML = array[0];

4.change particular array element use index value.

var bike = ["bike-1", "bike-2", "bike-3"];
bike[0] = "bike-4";

the index 0 value as changed from bike-1 to bike-4.

5.Create Objects for an array.

Objects use names to access particular array element.objects use named indexes.

var student = {firstName:"Robin", lastName:"Doe", age:20};
document.getElementById("demo_4").innerHTML = student["firstName"];

6.Array Properties .

birds.length -> display the total number of elements present in an array

var birds  = ["Crow", "Peacock", "Sparrow", "Ostrich"];
document.getElementById("demo_5").innerHTML = birds.length;//displays length of array

7.Print first element of array.

var animal = ["dog", "cat", "lion", "tiger"];
var first = animal[0];
document.getElementById("demo_6").innerHTML = first;

8.Print last element of array.

var last = animal[animal.length-1];
document.getElementById("demo_7").innerHTML = last;

Complete Code of JavaScript array contain different types:

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript array contain different types</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <div class="text-center">
        <h1>JavaScript array contain different types</h1>
    </div>
    <h3></h3>
    <h2>Access the Elements of an Array</h2>
    <div class="well">
        <h3 id="demo_1"></h3>
    </div>
    <h2>Access the Elements of an Array using index value</h2>
    <div class="well">
        <h3 id="demo_2"></h3>
    </div>
    <h2>Replace array element using index number</h2>
    <div class="well">
        <h3 id="demo_3"></h3>
    </div>
    <h2>Create object to use for name index</h2>
    <div class="well">
        <h3 id="demo_4"></h3>
    </div>
    <h2>Display length of array elements</h2>
    <div class="well">
        <h3 id="demo_5"></h3>
    </div>
    <h2>Display first element</h2>
    <div class="well">
        <h3 id="demo_6"></h3>
    </div>
    <h2>Display last element</h2>
    <div class="well">
        <h3 id="demo_7"></h3>
    </div>
    <br>
</div>
</body>
<script>
    var array = [ "Strawberries", "banana", "apple", "kiwi" ];

    document.getElementById("demo_1").innerHTML = array;
    document.getElementById("demo_2").innerHTML = array[0];

    var bike = ["bike-1", "bike-2", "bike-3"];
    bike[0] = "bike-4";
    document.getElementById("demo_3").innerHTML = bike;

    var student = {firstName:"Robin", lastName:"Doe", age:20};
    document.getElementById("demo_4").innerHTML = student["firstName"];

    var birds  = ["Crow", "Peacock", "Sparrow", "Ostrich"];
    document.getElementById("demo_5").innerHTML = birds.length;

    var animal = ["dog", "cat", "lion", "tiger"];
    var first = animal[0];
    document.getElementById("demo_6").innerHTML = first;

    var last = animal[animal.length-1];
    document.getElementById("demo_7").innerHTML = last;
</script>
</html>

Related Post

How To Get Today's Date With Javascript Using Html And Css
How To Create Slider Animation Example Using Javascript
How To Get Geolocation Using Javascript With Example
What Is Meant By NaN Function In Javascript With Examples
Learn How To Use Extract Function With Example In PHP
Learn How Crop Image While Uploading With Jquery In PHP
What Is Javascript RegExp \0 Metacharacter In Javascript
Javascript Array And Its Different Types In Javascript