JavaScript | Indexed Collections

Indexed Collections are collections that have numeric indices i.e. the collections of data that are ordered by an index value.

In JavaScript, an array is an indexed collection. An array is an ordered set of values that has a numeric index. For example, an array called ‘student’ that contains the name of the students and the index values are the Roll Numbers of the students. JavaScript does not have an explicit array data type. However, we can use the predefined Array object in JavaScript and its methods to work with arrays.

Creating an Array: There are many ways to create and initialize an array that are listed below:

  • Creating arrays without defining the array length. In this case, the length is equal to the number of arguments.
    var arr = new Array( element0, element1, ... );   
    var arr = Array( element0, element1, ... );       
    var arr = [ element0, element1, ... ];  
  • Creating an array with the given size
    var arr = new Array(6); 
    
    var arr = Array(6);
    
    var arr = [];
    arr.length = 6;
  • Creating a variable-length array and add many elements as you need.
    // First method: Initialize an empty
    // array then add elements
    var students = [];
    students [0] = 'Sujata Singh';
    students [1] = 'Mahesh Kumar';
    students [2] = 'Leela Nair';
     
    // Second method: Add elements to
    // an array when you create it
    var fruits = ['apple', ‘mango', 'Banana'];

Accessing the Array Elements: Use indices to access array elements. Indices of Arrays are zero-based which means the index of the elements begins with zero.

filter_none

edit
close

play_arrow

link
brightness_4
code

<script>
  
var fruits = ['Apple', 'Mango', 'Banana']; 
console.log(fruits [0]); 
console.log(fruits[1]);  
  
</script>

chevron_right


Output:



Apple
Mango

Obtaining array length: To obtain the length of an array use array_name.length property.

filter_none

edit
close

play_arrow

link
brightness_4
code

<script>
  
var fruits = ['Apple', 'Mango', 'Banana']; 
  
console.log(fruits.length)
  
</script>

chevron_right


Output:

3

Iterating over arrays: There are many ways to iterate the array elements.

  • Using for loop: for loop provides a concise way of writing the loop structure. Unlike a while loop, a for statement consumes the initialization, condition, and increment/decrement in one line thereby providing a shorter, easy to debug structure of looping.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script>
      
    var fruits = ['Apple', 'Mango', 'Banana']; 
    for (var i = 0; i < fruits.length; i++) {
      console.log(fruits[i]);
    }
      
    </script>

    chevron_right

    
    

    Output:

    Apple
    Mango
    Banana
  • Using forEach() Loop: The forEach() function provide once for each element of the array. The provided function may perform any kind of operation on the elements of the given array.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script>
      
    var fruits = ['Apple', 'Mango', 'Banana'];  
    fruits.forEach( function(fruit) {
        console.log(fruit);
    });
      
    </script>

    chevron_right

    
    

    Apple
    Mango
    Banana
  • Using forEach Loop with Arrow Functions:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script>
      
    var fruits = ['Apple', 'Mango', 'Banana'];  
      
    fruits.forEach(fruit => console.log(fruit)); 
      
    </script>

    chevron_right

    
    

    Apple
    Mango
    Banana

Array Methods: There are various array methods available to us for working on arrays. These are:

  • push() Method: This method adds one or more elements to the end of an array and returns the resulting length of the array.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script>
      
    var numbers = new Array('1', '2');
      
    numbers.push('3');
      
    console.log(numbers);
      
    </script>

    chevron_right

    
    

    Output:

    ["1","2","3"]
  • pop() Method: This method removes the last element from an array and returns that element.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script>
      
    var numbers = new Array('1', '2', '3');
      
    var last = numbers.pop(); 
      
    console.log(last);
      
    </script>

    chevron_right

    
    

    3
  • concat() Method: This method join two arrays and returns a new array.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script>
      
    var myArray = new Array('1', '2', '3');
      
    myArray = myArray.concat('a', 'b', 'c'); 
      
    console.log(myArray);
      
    </script>

    chevron_right

    
    

    Output:

    ["1","2","3","a","b","c"]
  • join() Method: This method creates a string by joining all the elements of an array.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script>
      
    var students = new Array('john', 'jane', 'joe');
      
    var list = students.join(' - ');
      
    console.log(list);
      
    </script>

    chevron_right

    
    

    Output:



    john - jane - joe
  • sort() Method: This method sorts the elements of an array.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script>
      
    var myArray = new Array('West', 'East', 'South');
      
    myArray.sort(); 
      
    console.log(myArray);
      
    </script>

    chevron_right

    
    

    Output:

    ["East","South","West"]
  • indexOf() Method: This method searches the array for Element and returns the index of the first occurence of element.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script>
      
    var myArr = ['a', 'b', 'a', 'b', 'a'];
       
    console.log(myArr.indexOf('b'));
      
    </script>

    chevron_right

    
    

    Output:

    1
  • shift() Method: This method removes the first element from an array and returns that element.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script>
      
    var myArr = new Array('a', 'b', 'c');
      
    var first = myArr.shift(); 
       
    console.log(first);
      
    </script>

    chevron_right

    
    

    Output:

    a
  • reverse() Method: This method reverse the first array element becomes the last and the last becomes the first. It transposes all the elements in an array in this manner and returns a reference to the array.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script>
      
    var myArr = new Array('a', 'b', 'c');
      
    myArr.reverse(); 
       
    console.log(myArr);
      
    </script>

    chevron_right

    
    

    Output:

    ["c","b","a"]
  • map() Method: This method returns a new array of the returned value from executing function on every array item.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script>
      
    var myArr1 = ['a', 'b', 'c'];
      
    var a2 = myArr1.map(function(item) { 
        return item.toUpperCase(); 
    });
      
    console.log(a2);
      
    </script>

    chevron_right

    
    

    Output:

    ["A","B","C"]
  • filter() Method: This method returns a new array containing the items for which function returned true.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script>
      
    var myArr1 = ['a', 10, 'b', 20, 'c', 30];
      
    var a2 = myArr1.filter(function(item) { 
        return typeof item === 'number'
    });
      
    console.log(a2);
      
    </script>

    chevron_right

    
    

    Output:

    [10,20,30]

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.