Alternatives to eval()?

JavaScript
1

In my current project, I’m working on my new portfolio site. I’m using the jQuery scrollTo plugin to scroll the page, but to make sure it didn’t go too fast in certain places I passed it a speed for each type of link. To keep my markup looking clean, I aliased the speeds as variables within the code. The code looked like this:

$(".navigation a").click(function(){
		var slow = 4500;
		var normal = 2500;
		var fast = 1700;
		$.scrollTo($(this).attr('href'), eval($(this).attr('rel')),{easing:'easeInOutQuint'});
		return false;
	});

and then the links looked kind of like this:

<a href="#contact-me" rel="slow">contact me</a>

I used eval() to make JavaScript recognize the rel attribute as being a variable and not a string, but I’ve been reading everywhere that eval() is “evil”. Is this a bad place to use it? If so, why? What could I use instead?

Thanks for the help!

2

This is a terrible use of eval. :slight_smile:

There is no reason why your code shouldn’t be this:

$(".navigation a").click(function(){
  var speed = $(this).attr('rel');
  if (speed === 'slow') speed = 4500;
  else if (speed === 'fast') speed = 1700;
  else speed = 2500;
  $.scrollTo($(this).attr('href'), speed, {easing:'easeInOutQuint'});
  return false;
});

In any case, this is an unsuitable use of the “rel” attribute as well. You might as well use a class name, and then just apply this transition to things with the class name.

3

It should be that. However, when I do it that way the JavaScript thinks I’m trying to tell the scrollTo duration to be “slow” instead of 2500. It doesn’t recognize that “slow” is a variable unless I use eval.

At first, the scroll was default speed so I tried to figure out what was going on by alerting $(this).attr(‘rel’). Initially it would do this:

alert($(this).attr('rel'));
// alerts: "slow"

once I used eval it did this:

alert(eval($(this).attr('rel')));
// alerts: "2500"

So what I mean by “rel” is a variable and not a string is that I used eval to get the JavaScript to see that $(this).attr(‘rel’) is referencing a variable value and not the literal interpretation of the rel value.

edit in reply to your edit: Yeah that probably wasn’t a good use of rel. I do think I’ll switch it to a class name. Thanks for the advice!

4

I edited my post - see above.

5

I edited mine as well.

As a personal preference, I don’t really like using if statements where I feel like I don’t need to. That’s why originally I wanted to pass the variable directly.

While I’ll probably end up doing as you’ve shown above, would you mind explaining to me why using if statements to set the speed variable is better than setting a variable through an html attribute?

6

Via the if statemenets, I only declared one variable (“speed”) whereas you were declaring three (slow, fast, normal). The number of lines of code is only one more, so no big deal. And above all, the main advantage is not having to use eval! There are other ways you could have done it, like using an object literal or a switch() statement, but I think the if statement method is still simpler when you only have three possible values. If there had been four or more, then I would probably have done something else, like use an array or an object literal.

7

Thank you! That explanation is very helpful. I’ll go see what I can do with my code.