CODEWITHSUNDEEP
javascriptarrays
Raghav Motwani
Raghav Motwani

Reputation: 169

Handling arrays in Javascript in efficient way

Hi I have 3 javascript arrays that need to be passed in a function when one of the 3 available button is clicked (one button for each array)

     <button onclick="call(1)">Array1</button> 
        <button onclick="call(2)">Array2</button> 
        <button onclick="call(3)">Array3</button> 

        JS-
        var arr1 = ["s","o","m","e"];
        var arr2 =[];
        var arr3 =[];

        function call(x){
           // some code here
             if(x==1){
             another_func(arr1);
        }
             else if(x==2){
             another_func(arr2);
        }
             else if(x==3){
              another_func(arr3);
        }

        }

This is working fine but I wish to get rid of that if else loops. Since array names differ by only the numeral 'x' (x is passed by the button when clicked) I tried-

 function call(x){
               // some code here
                 var apple="arr"+x;

                 another_func(apple);
       }

But this turned haywire. I know the reason that since javascript is loosly typed language it interpreted latter parameter as a string instead of an array.

Could anybody suggest how should I proceed?

Upvotes: 0

Views: 93

Answers (3)

Dimos
Dimos

Reputation: 8898

You can get a working version in this jsfiddle (I have used jQuery). Your code should be the following by just changing the call() function to use another_func() instead of alert()

<button class="a" input="arr1" >Array1</button> 
<button class="a" input="arr2" >Array2</button> 
<button  class="a" input="arr3" >Array3</button> 

$( document ).ready(function() {
    var arr1 = ["s","o","m","e"];
    var arr2 =[];
    var arr3 =[];

    function call(x){
        another_func(x);
    }

    $('.a').click(function(){
        call(eval($(this).attr("input")));
    })
});

However, from your own version to this dynamic one, I had to make the following changes:

  • use document ready to load Javascript after the document has been loaded, so that all functions (including call()) are available in HTML elements if needed.
  • I got rid of the loop in call() function by adding an input attribute in button elements, defining which variable will be passed
  • I used Javascript eval() function, so that string passed by input attributes are evaluated to the corresponding variables
  • Got rid of onclick attributes (since they are not best practice and listeners should be attached in Javascript, where possible). Added class "a" in buttons, so that listener is attached uniformly everywhere.

Upvotes: 0

Pramodh Valavala
Pramodh Valavala

Reputation: 752

You could try using a multi dimensional array.

Change your code like this 

var arr = [];    
arr[1] = ["s","o","m","e"];
arr[2] =[];
arr[3] =[];

<button onclick="another_func(arr[1])">Array1</button> 
<button onclick="another_func(arr[2])">Array2</button> 
<button onclick="another_func(arr[3])">Array3</button>

Here is a working jsfiddle - http://jsfiddle.net/ao7jL1Lm/1/

Upvotes: 1

user2575725
user2575725

Reputation:

Possibly you can go for temp array:

var arr1 = ['f', 'i', 'r', 's', 't'];
var arr2 = ["s", "e", "c", "o", "n", "d"];
var arr3 = ["t", "h", "i", "r", "d"];
var temp = [arr1, arr2, arr3];//work around
var call = function(x) {
  alert('Array >> ' + temp[x - 1]); // -1 to get the index
};
<button onclick="call(1)">Array1</button>
<button onclick="call(2)">Array2</button>
<button onclick="call(3)">Array3</button>

OR, you can go for temp object:

var arr1 = ['f', 'i', 'r', 's', 't'];
var arr2 = ["s", "e", "c", "o", "n", "d"];
var arr3 = ["t", "h", "i", "r", "d"];
var temp = {
  '1': arr1,
  '2': arr2,
  '3': arr3
}; //work around
var call = function(x) {
  alert('Array >> ' + temp[x]);
};
<button onclick="call(1)">Array1</button>
<button onclick="call(2)">Array2</button>
<button onclick="call(3)">Array3</button>

Upvotes: 1

Related Questions