Basic Javascript Array Methods

Understanding some of the basic built-in javascript array methods 

This blog gives a brief overview of the basic javascript methods that are related to arrays.
    
1. concat()

This methods joins two arrays and outputs a new array

<script type="text/javascript">
    //concat()
    var arr1 = [1, 2, 3];
    var arr2 = [4, 5, 6];
    var resultarr = arr1.concat(arr2);
    document.write(resultarr); //Output will be 1,2,3,4,5,6
</script>


2. filter()

This method is used to filter out an array based on some functions. The output will be an array with elements from parent array which satisfies the condition.

<script type="text/javascript">
    //filter()
    var arr1 = ["1", "a", "b", "2", "3"];
    var resultarr = arr1.filter(checkifnumber); //Here we call a function to check whether element is number or not
    document.write(resultarr); //Output will be 1,2,3

    function checkifnumber(element, index, array) {
        return (!isNaN(parseFloat(element)));
    }
</script>

    
3. indexOf()

This method returns the index of the first occurance of an particular element in an array. If element not found in the array, then returns -1.

<script type="text/javascript">
    //indexOf()
    var arr1 = ["1", "a", "b", "2", "3", "b"];
    document.write(arr1.indexOf("b")); //Output will be 2
</script>


4. lastIndexOf()

This method returns the index of the last occurance of an particular element in an array. If element not found in the array, then returns -1.

<script type="text/javascript">
    //lastIndexOf()
    var arr1 = ["1", "a", "b", "2", "3", "b"];
    document.write(arr1.lastIndexOf("b")); //Output will be 5
</script>
    

5. join()

This method joins elements of an array into a string. We can pass a separator as an parameter to join method.

<script type="text/javascript">
    //join()
    var arr1 = ["This", "is", "a", "example", "of", "array", "join"];
    document.write(arr1.join(" ")); //Output will be "This is a example of array join"
    document.write(arr1.join("-")); //Output will be "This-is-a-example-of-array-join"
</script>    


6. reverse()

This method reverses teh order of elements in the array.

<script type="text/javascript">
    //reverse()
    var arr1 = ["a", "b", "c", "d", "e", "f", "g"];
    var resultarr = arr1.reverse(); // It will be  ["g", "f", "e", "d", "c", "b", "a"]
    document.write(resultarr); //Output will be g,f,e,d,c,b,a 
</script>


7. slice()

This method extracts a given number of elements from an array and returns a new array. We can pass begin & end (not included in reulting array) index of elements to be extracted as parameters.

<script type="text/javascript">
    //slice()
    var arr1 = ["a", "b", "c", "d", "e", "f", "g"];
    var resultarr1 = arr1.slice(1, 3); // It will be  ["b", "c"]
    var resultarr2 = arr1.slice(3, 6); // It will be  ["d", "e", "f"]
</script>


8. sort()

This method sorts the elements of an array in an alphabetical order.

<script type="text/javascript">
    //sort()
    var arr1 = ["red", "blue", "white", "green"];
    var resultarr1 = arr1.sort(); // It will be  ["blue", "green", "red", "white"]

    var arr2 = [5, 27, 16, 8];
    var resultarr2 = arr2.sort(3, 6); // It will be  [16, 27, 5, 8]
</script>

Here in the above script, we can find that the numerical array is also sorted in alphabetic order. Inorder to sort it in numerical order, we can wreite a custom function and call it inside our sort function as below.

<script type="text/javascript">
    //sort()
    var arr1 = [5, 27, 16, 8];
    var resultarr1 = arr1.sort(sortNumber); // It will be  [5, 8, 16, 27]

    function sortNumber(num1, num2) {
        return num1 - num2;
    }
</script>


Hope this will be helpful!