Javascript switch versus if/else

Question

I'm going through Codecademy's Javascript - Intro to Objects course, and am currently hung up on the the "4. I have to celebrate you baby" exercise in the "Review: The story so far..." lesson.

The exercise is:

This exercise has lots of movies and reviews to type in. You might wonder, "Is this teaching coding or typing?!"

But there's a reason why there are so many cases to deal with. We want to show that if we used if-else statements, it would be inefficient. What alternative from the conditionals lesson can we use?

Imagine you have a movie collection and you want to write some code that assigns your review to each of them. Obviously each review differs depending on the movie. Below are the movies and your review. Use a structure learned in an earlier lesson to write code for the information below:

• "Matrix" - "good trip out"
• "Princess Bride" - "awesome date night movie"
• "Welcome to America" - "Amjad's favorite"
• "Remember the Titans" - "love the sports"
• "Why do I look like I'm 12?" - "The Ryan and Zach story"
• "Fighting Kangaroos in the wild" - "Token Australian movie for Leng"

getReview should be a function that takes a movie name and returns its review based on the information above. If given a movie name not found just return "I don't know!".

My understanding is that it is important to separate data from logic. So, my initial solution was:

var getReview = function (movie) {
    for (var i = 0; i < movieReviews.length; i++) {
        if (movie === movieReviews[i].name) {
            return(movieReviews[i].review);
        }
    }
    return("I don't know!");
};

var movieReviews = [{name: "Matrix", review:"good trip out"},
    {name: "Princess Bride", review:"awesome date night movie"},
    {name: "Welcome to America", review:"Amjad's favorite"},
    {name: "Remember the Titans", review:"love the sports"},
    {name: "Why do I look like I'm 12?", review:"The Ryan and Zach story"},
    {name: "Fighting Kangaroos in the wild", review:"Token Australian movie for Leng"}];

console.log(getReview("Matrix"));

I'm sure there are ways to optimize this, but overall I think it would be easier to add, edit, modify, etc. the movieReviews array than it would be to program switch statements.

In otherwords, I'm not seeing why a switch statement would be inefficient in comparison to an if-else statement. What am I missing?

EDIT: The help text for the problem is:

It is possible to use if, else if and else statements, but that is inefficient. In situations where you have lots of different scenarios and different comes, try using a switch statement!

Because we are defining a function, we can make use of the return keyword!

Make sure that what you return matches the case of the review text

Answer 1

Try the following:

var getReview = function (movie) {
    switch (movie) {
        case 'Matrix': return "good trip out";
        break;
        case 'Princess Bride': return "awesome date night movie";
        break;
        case 'Welcome to America': return "Amjad's favorite";
        break;
        case 'Remember the Titans': return "love the sports";
        break;
        case 'Why do I look like I\'m 12?': return "The Ryan and Zach Story";
        break;
        case "Fighting Kangaroos in the wild": return "TOken Australian movie for Leng";
        break;
        default: return "I don't know!"
        break;
    }
};

Answer 2

Really, the question as it stands is flawed. The course you're taking is an Introduction to Objects, so why both with arrays that aren't associative? Simply:

movieReviews = { 
  "matrix": "a good trip"
}
// These are now both valid for accessing "a good trip"
movieReviews["matrix"];
movieReviews.matrix

Every movie is going to have a unique name, which makes it a perfect candidate for a key. Furthermore, the function used for searching for reviews should be a method of the review object. For what it's worth (and hopefully it's something, even if not right now), this is how I would implement the solution.

MovieReviews = function() {
  /* Private data. */
  var data = {
    "matrix": "good trip out",
    "Princess Bride": "awesome date night movie",
    "Welcome to America": "Amjad's favorite"
  }
  /* Get a review for a movie by name, or notify that we don't know */
  this.getReview = function(movie) {
    if(data.hasOwnProperty(movie)) { return data[movie]; }
    return "I don't know!";
  }
  /* Add a review by movie name, and review string. */
  this.addReview = function(movie, review) {
    data[movie] = review;
  }
}

Now instantiate a new MovieReview object, add a new movie review, and print some tests.

var reviews = new MovieReviews();
reviews.addReview("Remember the Titans", "love the sports");

console.log(reviews.getReview("matrix")); // 'good trip out'
console.log(reviews.getReview("Remember the Titans")); // 'love the sports'
console.log(reviews.getReview("A Scanner Darkly")); // 'I don't know!'

This way accessing your reviews for each movie is trivial, and requires no iteration at all. You are also containing your data within an object, providing encapsulation and forcing users to use your interfaces.

As for your original question, it's hard for me to say whether and if-else or switch statement would be more efficient without performing some timed tests (maybe something you could do and let us know!). But based on what's written here,

"If multiple cases match the provided value, the first case that matches is selected..."

this seems like it's just iterating through the cases anyway. How the JavaScript control structures are translated with your current JS engine probably optimises your switch statement, and I would bet that it performs better over if-else with a large quantities of options.

Performance aside, it's much nice reading a switch statement that has many elements, compared to an if-else. Also, there are often time when you can change other factors like your object types (array -> object in my example), to better fix an issue.

Don't get caught in the trap of prematurely optimising your code, or else you'll never get anything finished and people that maintain your work will hate you, forever, and ever.

Answer 3

You're storing everything in an array, running loops when you could just use case/switch. You could complete this task in numerous different ways, but you'll use less characters if you use a case/switch as opposed to a massive amount of conditionals.

function movieReviews(movie) {
var x = "No review.";
switch (movie)
{
case 'Matrix':
  x="good trip out";
  break;
case 'Princess Bride':
  x="awesome date night movie";
  break;
case 'Remember the Titans':
  x="love the sports";
  break;
case 'Welcome to America':
  x="Amjad's favorite";
  break;
default:
  x="No movie selected.";
}
document.write("Movie: " + movie + " Review: " + x);
}

It makes for cleaner code too.