How to create modular function whose parameter is an operator?

3

I assume that I want to create a function that changes the src of an image by another in the index of an array, like this:

var arrayimgs = ["js/img1.jpg","js/img2.jpg","js/img3.jpg"];
var imagem = document.getElementById('imagemslide');
imagem.src = arrayimgs[0];
var count = 0;

function rodarslider(){
    imagem.src = arrayimgs[count+1];
    count++;
}

The above function causes the src of the image to be changed by moving the index of the array with each click. This works, but what if I want to use the same function to decrement the index and instead of being count+1 and count++ be count-1 and count-- ?

I only managed to create two functions because Firebug did not recognize operator as argument in the call.

    
asked by anonymous 06.12.2014 / 15:41

1 answer

3
You really do not have much to do the way you are planning. You have a few options:

  • Some programmers have the culture to create two functions like you did.

  • Others create one by passing a parameter that indicates which operator will be used. But note that you are not passing the operator itself but rather some indicator of which operator should be used. The parameter will be a numeric value, string or something specific. Within the function there will be a if to decide according to the parameter which code to execute.

  • Depending on your case, it is possible to not worry about the operator and send the information ready in any case, that is, you resolve the issue before calling the function. You set the increment or decrement as the parameter. According to the mathematical rules, "more with more" gives "more" and "more with less" gives less ", so within function you only use addition.

  • Another unsatisfactory possibility is to use eval() to solve this. In the background it is a variation of the second case but in this case it would not use if but would mount the expression as string and execute it. I put it just to show you various paths. This option has performance problems, readability depending on the case, and security.

  • As additional notes you can simplify the current function code and leave it with only one line:

    imagem.src = arrayimgs[++count];
    

    So you increment the counter before using array .

    Another problem is that it is not ideal to access an outside variable, which has global scope . Do the right thing and pass count as parameter and return it incremented. It will save you trouble in the future. Do the same with arrayimgs and imagem . If it's really these variables need to exist outside this function.

    Have you ever wondered why you need to access imagemslide with the getElementById('imagemslide'); function and not access the direct variable? You need to minimize the risk area (this is not the only reason to use this function). In this way few global variables need to be exposed. document is one of these few variables.

    global status is generally problematic. Cases like document even make sense because it really is a global object for an application running in a browser. Even so, some people say that even it should not be accessed directly.

    I would probably do something like this:

    function rodarSlider(contador, rolagem) {
        var arrayimgs = ["js/img1.jpg","js/img2.jpg","js/img3.jpg"];
        var imagem = document.getElementById('imagemslide');
        imagem.src = arrayimgs[contador + rolagem];
        return contador;
    }
    
    algumContador = rodarSlider(algumContador, 1); //próximo
    algumContador = rodarSlider(algumContador, -1); //anterior
    

    I placed GitHub for future reference .

    It would be something like that because in the way your code is it does not seem to make much sense.

    Looking at the code that you posted later in the comment makes me think that having two functions is the best solution in this case. It could turn into just one function but the code would get so complicated that I do not think it's worth it. Two functions would be more readable.

    It seems to me that you are wanting to save code at any cost. I did this a lot when I was learning. And at the time it even made some sense, I started programming on a computer with 2KB of memory and any byte saved was critical even in code that was interpreted. But over time I learned that legibility is better.

    Of course watching the DRY principle is very good and is still one of the things I most look for. But it takes time to figure out when to duplicate something or not. Sometimes duplicating improves the code. And even when it is better to have a canonical form this needs to be done without incurring other errors with the use of global variables.

    Use helper functions, even if it is just to get a value from a variable that stores a value in a global way ( status global ), is one of the ways to canonize a knowledge of the application.

        
    06.12.2014 / 16:08