JavaScript Arrays

The Array object is used to store group or multiple values in a single variable. JavaScript arrays can store any valid value, including strings, numbers, objects, functions, and even other arrays, thus making it possible to create more complex data structures such as an array of objects or an array of arrays.

Syntax-:

var myArray = [element0, element1, ..., elementN]; 

Accessing the Elements of an Array

Array elements can be accessed by their index using the square bracket notation. An index is a number that represents an element's position in an array.

Example of Code

<script>
    var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
    document.write(fruits[0] + "<br>"); // Prints: Apple
    document.write(fruits[1] + "<br>"); // Prints: Banana
    document.write(fruits[2] + "<br>"); // Prints: Mango
    document.write(fruits[fruits.length - 1]); // Prints: Papaya
</script>

Output

How to Get the Length of an Array

The JavaScript has length property which is used to get the length of an array, which is the total number of elements contained in the array. Array length is always greater than the index of any of its element.

Example of Code

<script>
    var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
    document.write(fruits.length); // 0utputs: 5
</script>

Output

Looping Through Array Elements

You can use for loop to access each element of an array in sequential order.

Example of Code

<script>
    var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"]; 
    // Iterates over array elements
    for(var i = 0; i < fruits.length; i++){    
        document.write(fruits[i] + "<br>"); // Print array element
    }
</script>

Output

How to Add New Element to an Array

The push() method is used to add a new element at the end of an array.

Example of Code

<script>
    var colors = ["Red", "Green", "Blue"]; 
    colors.push("Yellow");
    document.write(colors + "<br>"); // Prints: Red,Green,Blue,Yellow
    document.write(colors.length); // Prints: 4
</script>

Output

How to Remove Element from an Array

The pop() method is used to remove element from an array.

Example of Code

<script>
    var colors = ["Red", "Green", "Blue"];
    var last = colors.pop(); 
    document.write(last + "<br>"); // Prints: Blue
    document.write(colors.length); // Prints: 2
</script>

Output

How to Create a String from an Array

The join() method is used to create string from an array. This method takes an optional parameter which is a separator string that is added in between each element.

Example of Code

<script>
    var colors = ["Red", "Green", "Blue"];
    document.write(colors.join() + "<br>"); // Prints: Red,Green,Blue
    document.write(colors.join("") + "<br>"); // Prints: RedGreenBlue
    document.write(colors.join("-") + "<br>"); // Prints: Red-Green-Blue
    document.write(colors.join(", ")); // Prints: Red, Green, Blue
</script>

Output

How to Extract a Portion of an Array

If you want to extract out a portion of an array (i.e. subarray) but keep the original array intact you can use the slice() method. This method takes 2 parameters: start index (index at which to begin extraction), and an optional end index (index before which to end extraction), like arr.slice(startIndex, endIndex).

Example of Code

<script>
    var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
    var subarr = fruits.slice(1, 3);
    document.write(subarr); // Prints: Banana,Mango
</script>

Output

Merging Two or More Arrays

The concat() method is used to merge or combine two or more arrays. This method does not change the existing arrays, instead it returns a new array.

Example of Code

<script>
    var pets = ["Cat", "Dog", "Parrot"];
    var wilds = ["Tiger", "Wolf", "Zebra"];     
    // Creating new array by combining pets and wilds arrays
    var animals = pets.concat(wilds); 
    document.write(animals); // Prints: Cat,Dog,Parrot,Tiger,Wolf,Zebra
</script>

Output

Searching Through an Array

If you want to search an array for a specific value, you can simply use the indexOf() and lastIndexOf(). If the value is found, both methods return an index representing the array element. If the value is not found, -1 is returned. The indexOf() method returns the first one found, whereas the lastIndexOf() returns the last one found.

Example of Code

<script>
    var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
    document.write(fruits.indexOf("Apple") + "<br>"); // Prints: 0
    document.write(fruits.indexOf("Banana") + "<br>"); // Prints: 1
    document.write(fruits.indexOf("Pineapple")); // Prints: -1
</script>

Output