Efficient way to if else statement with hundreds of blocks

Question

I've got a list of hundreds of numbers that the user can click on, each number corresponds with a scene variable that ends with the same number the user clicks on, ie if user picked "43", renderer.render(scene43,camera) is performed.

//jumpSwitcher is defined the numerical value that the user has clicked on 
jumpSwitcher = +value;

if (jumpSwitcher == 1) {
     renderer.render(scene1, camera);
} else if (jumpSwitcher == 2) {
     renderer.render(scene2, camera);
}

This could go on hundreds of times though. How do I write the above code so that I may save myself a lot of work. And how do I efficiently define an array worth of hundreds of these scene variables?

`switch(case)` > `if/else` http://www.w3schools.com/js/js_switch.asp — roberrrt-s, Oct 28 '16 at 11:34
use a `switch`? Have an array of `scenes` and just do `renderer.render(scenes[jumpSwitcher], camera)`? Consider a state machine? — VLAZ, Oct 28 '16 at 11:34
An array containing the scenes and then accessing each using `jumpSwitcher[scene]` sounds like the easiest way to go — Pekka, Oct 28 '16 at 11:35

score 9 · Answer 1 · edited Oct 28 '16 at 21:34

9

I suggest using "literal object"

var conditions = {
    "1": ..., // treat condition to 1
    "2": ... // treat condition to 2
    "default": ... // default treatment
}

var treatment = conditions[scene] || conditions.default;

edited Oct 28 '16 at 21:34

Nina Scholz

376,160
25
347
392

answered Oct 28 '16 at 11:55

Giovane

1,421
1
15
25

I don't see how map would resolve that question. Could you give an example? – Giovane Oct 28 '16 at 14:03
1

*A* [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) is one of the new ES6 collections, meant to replace objects for key-value lookups. They're very similar, map is just a more formal way of expressing this. – ssube Oct 28 '16 at 14:06
Wow! That's awesome. I did't know it. I thought you were talking about the array.map – Giovane Oct 28 '16 at 14:09

score 5 · Answer 2 · answered Oct 28 '16 at 11:38

5

Use an array.

var scenes = [ null, scene1, scene2, scene3 ];
renderer.render(scenes[jumpSwitcher], camera);

answered Oct 28 '16 at 11:38

Thilo

257,207
101
511
656

score 2 · Answer 3 · edited May 23 '17 at 11:45

2

One approach would be to use eval(), but don't.

You can populate a scenes array using this:

scenes = Array.apply(null, Array(100)).map(function () {return new Scene();});

Alternatively, with ES6,

scenes = Array.from(Array(100), () => new Scene())

Then just use:

renderer.render(scenes[jumpSwitcher-1], camera);

edited May 23 '17 at 11:45

Community

1
1

answered Oct 28 '16 at 11:43

Anish Gupta

101
1
6

You'd do `Array.apply(null, Array(100))` for a new empty array? It actually sounds like clean code? You can do `Array.from({length: 100}, () => new Scene)` instead of that line. Even `''.repeat(100).split("").map(x => new Scene)` is cleaner or heaven forbid a for loop/generator. – Benjamin Gruenbaum Oct 28 '16 at 13:51
@BenjaminGruenbaum I agree it is really ugly. I just used it because it is compatbile with older browsers. I guess that would be a better solution, I'd prefer `Array.from(Array(100))` from a cleanness point of view. – Anish Gupta Oct 28 '16 at 14:47

Nina Scholz · Answer 4 · 2016-10-28T14:06:47.207

You could use either an array, if you have contiguous numbers

scenes = [scene0, scene1, ..., sceneN ]
// access
renderer.render(scenes[scene], camera);

or an object for numbers with gaps

scenes = { 10: scene10, 15: scene15 }
// access
renderer.render(scenes[scene], camera);

or a Map

scenes = new Map([[4, scene4], [20, scene20]]);
// access
renderer.render(scenes.get(scene), camera);

The other possibillity is to use the programming style return early, which means, to make a condition and end the function if the condition is met.

function callScene(scene) {
    if (scene === 1) {
        renderer.render(scene1, camera);
        return;
    }
    if (scene === 2) {
        renderer.render(scene2, camera);
        return;
    }
    // ...
}

I think this could be a good answer if you demoed using the array/object. — Luggage, Oct 28 '16 at 13:40

score 1 · Answer 5 · answered Oct 28 '16 at 11:35

1

Use the switch statement, example

switch(jumpSwitcher)
{
    case 1: {renderer.render(scene1, camera); break;}
    ...
}

answered Oct 28 '16 at 11:35

Aleksandar Matic

789
1
9
21

score 1 · Answer 6 · answered Oct 28 '16 at 13:45

1

Since the scenes appear to be global variables, you can also use this:

renderer.render(window['scene' + jumpSwitcher], camera);

No eval, single line, variable scene number... It doesn't get any more simple than this.

If the scenes aren't on window, replace it with the proper scope object. (this, for example).

answered Oct 28 '16 at 13:45

Cerbrus

70,800
18
132
147

1

Probably better to use an array. – Benjamin Gruenbaum Oct 28 '16 at 13:49
No doubt, @BenjaminGruenbaum. But still better than `eval`. – Cerbrus Oct 28 '16 at 13:50

István · Accepted Answer · 2016-10-28T13:37:38.957

-10

Just simply write this:

"use strict";
renderer.render(eval('scene' + jumpSwitcher), camera);

And you don't need if or switch.

UPDATE: Strict mode added for safer eval(), docs

edited Oct 28 '16 at 13:37

answered Oct 28 '16 at 11:36

István

5,057
10
38
67

2

With `eval()` comes great responsibility – Giovane Oct 28 '16 at 12:13
@Giovane can you please elaborate more what you trying to point out – anshuVersatile Oct 28 '16 at 12:45
@anshu the `eval` function is something really really delicate that you need be aware when using it. It you execute anything passed as argument to it, really anything. I know that it way be the only answer for some specific super problems, but for simple use I see the usage of it as Laziness. Unless you treat the data passed as argument to it, it is pure evil! Take a look here, http://stackoverflow.com/questions/86513/why-is-using-the-javascript-eval-function-a-bad-idea – Giovane Oct 28 '16 at 13:10
@István I saw, interesting. I didn't know about eval and strict mode, I'll take a look, thanks. – Giovane Oct 28 '16 at 13:40
2

@Giovane: Don't use eval. There are better ways. (See the other answers). – Cerbrus Oct 28 '16 at 13:44
1

@Cerbrus I know, I never see eval as an option hahaha – Giovane Oct 28 '16 at 13:50
2

Using strict mode does not make `eval` any safer, that's very misleading. It prevents existing code from using the results of the `eval`, but does nothing to sanitize input. – ssube Oct 28 '16 at 13:52
2

Strict mode doesn't solve anything with regards to eval. The only thing that'd actually help is "variable safe eval" as specified by Miller in http://research.google.com/pubs/pub37199.html or as in https://github.com/FUDCo/proposal-frozen-realms – Benjamin Gruenbaum Oct 28 '16 at 13:53
when the person have 10,000 if-else conditions ? now compare it with eval() . I am not sure eval() will win or loose in this condition. Just curious to know who will win "10,000 if-else" or "eval" – anshuVersatile Oct 28 '16 at 14:09
1

@anshu: There are other options that are faster than both `eval` and 10k `if-else` statements. – Cerbrus Oct 31 '16 at 08:38

Efficient way to if else statement with hundreds of blocks

7 Answers7