How to create a modular function whose parameter is an operator?

Question

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

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 changes the src of the image raising the index of the array at each click. This works, but what if I want to use the same function to decrease the index and instead of being count+1 and count++ was count-1 and count--?

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

Answer 1

There really isn’t much to do the way you’re planning. There are a few options:

1. Some programmers have the culture to create two functions as you did.

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

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

4. Another highly recommended option is to eval() to solve this. In the background is a variation of the second case but in this case would not use the if And yes I would ride the expression as string and run it. I put it only to show varied paths. This option has performance problems, readability depending on the case and security.

---

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

imagem.src = arrayimgs[++count];

So you increment the counter before using as the index of the array.

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

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

Global state in a general way is problematic. Cases such as document It even makes sense because it’s actually a global object for an application running in a browser. Even so there are those who say that even it should not be accessed directly.

I’d probably do something like that:

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 put in the Github for future reference.

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

---

Looking at the code you posted later on in the comment makes me think that having two functions is the best solution in this case. You can turn it into just one function but the code would be so complicated that I don’t 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 it a lot when I was learning. And at the time it even made sense, I started programming in computer with 2KB of memory and any byte saved was critical even in code that was interpreted. But over time I learned that readability is better.

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

Use auxiliary functions, even if only to take a value from a variable that holds a value globally (global state), is one of the ways to canonize a knowledge of the application.