Saturday 1 September 2018

JavaScript: iterate over the elements of array

In this post, I am going to explain how to iterate over the elements of array and explain the drawbacks in every approach.

Let me start with basic approach.

var arr1 = [2, 3, 5, 7];
                          
for(var i=0; i < arr1.length; i++){
         document.write(arr1[i] + "<br />");
}

traversal.html
<!DOCTYPE html>

<html>

<head>
    <title>Array Traversal</title>
</head>

<body>
    <script type="text/javascript">
        var arr1 = [2, 3, 5, 7];

        for (var i = 0; i < arr1.length; i++) {
            document.write(arr1[i] + "<br />");
        }
    </script>
</body>

</html>

What if your array is sparse. If your array is sparse and you use the above approach, you will get lot of undefined values.

traversal.html
<!DOCTYPE html>

<html>

<head>
    <title>Array Traversal</title>
</head>

<body>
    <script type="text/javascript">
        var arr1 = [2, 3, 5, 7];
        arr1[10] = 1234;

        for (var i = 0; i < arr1.length; i++) {
            document.write(arr1[i] + "<br />");
        }
    </script>
</body>

</html>

Open above page in browser, you will get following text.

2
3
5
7
undefined
undefined
undefined
undefined
undefined
undefined
1234

One way to resolve this problem is escape all the undefined values.

for(var i=0; i < arr1.length; i++){
         if(!arr1[i])
                  continue;
         document.write(arr1[i] + "<br />");
}


traversal.html
<!DOCTYPE html>

<html>

<head>
    <title>Array Traversal</title>
</head>

<body>
    <script type="text/javascript">
        var arr1 = [2, 3, 5, 7];
        arr1[10] = 1234;

        for (var i = 0; i < arr1.length; i++) {
            if (!arr1[i])
                continue;
            document.write(arr1[i] + "<br />");
        }
    </script>
</body>

</html>

Open above page in browser, you can able to see following text.

2
3
5
7
1234

One problem with above program is, it escapes null values also. If you are specific about escaping only undefined values, you need to update logic like below.


traversal.html
<!DOCTYPE html>

<html>

<head>
    <title>Array Traversal</title>
</head>

<body>
    <script type="text/javascript">
        var arr1 = [2, null, 5, 7, null];
        arr1[10] = 1234;

        for (var i = 0; i < arr1.length; i++) {
            if (arr1[i] === undefined)
                continue;
            document.write(arr1[i] + "<br />");
        }
    </script>
</body>

</html>

Open above page in browser, you can able to see following text.

2
null
5
7
null
1234

Can I use fo-in loop to traverse array?
One problem with for-in loop is it traverse inherited properties also. If you want to traverse and skip inherited properties update your logic like below.

for(var i in arr1){
         if (!arr1.hasOwnProperty(i))
                  continue;
         document.write(arr1[i] + "<br />");

}



Previous                                                 Next                                                 Home

No comments:

Post a Comment