Is checking in a conditional faster than rewriting, and is there an easy way to check for myself?

JavaScript
1

So I have two version of the same conditional here, both do the same thing, but the first conditional checks for two conditions using && while the other simply rewrites the variable over and over again.

  1. If we use this problem as an example and expand the input size/length of the conditional to generate an obvious difference, is checking or rewriting faster?

  2. Also, is there a way to check the speed of a function using devTools?

  3. And finally, is the answer to my first question universal across all languages?

First version of the conditional:

if (gradesAverage < 60) {
    gradeLetter = 'F';
} else if (gradesAverage >= 60 && gradesAverage < 70) {
    gradeLetter = 'D';
} else if (gradesAverage >= 70 && gradesAverage < 80) {
    gradeLetter = 'C'
} else if (gradesletter >= 80 && gradesAverage < 90) {
    gradeLetter = 'B';
} else {
    gradeLetter = 'A';
}

Second version of the conditional:

if (gradesAverage < 60) {
    gradeLetter = 'F';
} else if (gradesAverage < 70) {
    gradeLetter = 'D';
} else if (gradesAverage < 80) {
    gradeLetter = 'C'
} else if (gradesAverage < 90) {
    gradeLetter = 'B';
} else {
    gradeLetter = 'A';
}
2

The second version is objectively better code for several reasons:

  1. It is shorter and easier to read.
  2. It is less error prone. In fact, your original example has a typo (gradesletter >= 80). As an example, here I have introduced a simple typo in your original condition Can you spot it?
if (gradesAverage < 60) {
    gradeLetter = 'F';
} else if (gradesAverage >= 60 && gradesAverage <= 70) {
    gradeLetter = 'D';
} else if (gradesAverage >= 70 && gradesAverage <= 80) {
    gradeLetter = 'C'
} else if (gradesAverage >= 80 && gradesAverage <= 90) {
    gradeLetter = 'B';
} else {
    gradeLetter = 'A';
}
  1. It should be a very slight amount faster because it has to do fewer comparisons.

None of these things have any dependence on a particular language so the answer is the same across all languages that have this type of if/else if/else syntax.

For your second question, you are looking for a benchmarking tool which I am sure exists, I just have never needed to use one.

3

The second column of inequalities must be strictly less than. I see your point about readability, thanks for replying.

4

FWIW: This appears to be one of the more common benchmarking libraries out there: https://benchmarkjs.com/

There also appear to be a number of tools that wrap around benchmark.js to make it more manageable to use.

5

I just wanted to note that you said the second snippet of code is being rewritten each time, and you wanted to know which is faster.

Are you thinking that the if statement is working like a fall-through structure, similar to a switch statement? Once the if statement finds the first true then it will execute the code for that block, and then jump out of the if statement immediately. For example, here are two statements that are true, but only the code for the first block will be executed.

if (true) {
    console.log('code 1 executing');
} else if (true) {
    console.log('code 2 executing');
}

Maybe you meant something else but it sounded like what you were explaining.

6

Yes, I was confused. The moment the conditional evaluates to true, the computer exits the structure. The reason why my second code block worked was because the moment it eval’d as true, the comp was already in the correct range. To check this I tried swapping it around so that:
if (variable < 90) {Grade = B},
and it automatically exited and assigned B even if the grade D or F. I was working with for loops before this exercise so I guess I just had a brain fart.

My main takeaway, however, is that visually simpler code is always better. Make it readable first and then optimize if need be.

7

Huge +1 that is the right takeaway. Readable code is the best code.