Correct Way Of Achieving This Result?

Question

So I currently have this piece of code:

if(direction === "right" ) { var signOne = '-'; var signTwo = ''; }
if(direction === "left" ) { var signOne = ''; var signTwo = '-'; }

innerWork.not('.active').css({'left': signOne + '450px'}); // Move the not active text to the left
innerImg.not('.active').css({'left': signOne + '370px'}); // Move the not active images to the left

where the right or left gets passed through the function. And what I want to happen, and it works as expected is that if the function is given says right, then it makes the two left values minus and if the function is run with "left" then it gives positive values.

As I said, it all works but JSHint/Lint throws up errors about, a) the variables being defined twice and b) that the variables are being used out of scope. Is there a neater way to achieve what I want that would be syntantically correct?

I need them inside the if blocks though, because the variables need to change depending on whether left or right is fed in to the function. — Tenatious, May 02 '14 at 19:39
you need to define signOne and signTwo outside the conditional statements, and assign them inside... see all the answers below — Jonathan, May 02 '14 at 19:41

score 2 · Answer 1 · answered May 02 '14 at 19:39

2

You need to declare the variables in the same scope they are used in.

var signOne, signTwo;

if(direction === "right" ) { signOne = '-'; signTwo = ''; }
else if(direction === "left" ) { signOne = ''; signTwo = '-'; }

innerWork.not('.active').css({'left': signOne + '450px'}); // Move the not active text to the left
innerImg.not('.active').css({'left': signOne + '370px'}); // Move the not active images to the left

answered May 02 '14 at 19:39

Andrew

4,953
15
40
58

2

Your code is correct, but your description is not: the variables are not destroyed, which is why the code works. Unlike C/Java/etc. the curly braces do not define a scope. Only functions define a scope in JavaScript. That is why jslint complains that the variables are defined twice. – dsh May 02 '14 at 19:41

score 1 · Accepted Answer · answered May 02 '14 at 19:39

1

var signOne, signTwo;
if(direction === "right" ) { signOne = '-'; signTwo = ''; }
if(direction === "left" ) { signOne = ''; signTwo = '-'; }

innerWork.not('.active').css({'left': signOne + '450px'}); // Move the not active text to the left
innerImg.not('.active').css({'left': signOne + '370px'}); // Move the not active images to the left

answered May 02 '14 at 19:39

pennstatephil

1,593
3
22
43

1

http://stackoverflow.com/questions/23435703/correct-way-of-achieving-this-result/23435729?noredirect=1#comment35919040_23435703 was the inspiration for that suggestion. – pennstatephil May 02 '14 at 19:47

score 0 · Answer 3 · answered May 02 '14 at 19:40

var signOne, signTwo;

if(direction === "right" ) { signOne = '-'; signTwo = ''; }
if(direction === "left" ) { signOne = ''; signTwo = '-'; }

innerWork.not('.active').css({'left': signOne + '450px'}); // Move the not active text to the left
innerImg.not('.active').css({'left': signOne + '370px'}); // Move the not active images to the left

score 0 · Answer 4 · answered May 02 '14 at 19:45

If you're learning about JS, I would highly recommend reading JavaScript: The Good Parts by Douglas Crockford. He is the original author of JSLint and his rules of JS style are widely regarded as gospel.

With regard to your question, the reason that JSLint/Hint is giving you errors is due to the fact that your variable declarations are written repeatedly within conditional blocks. A better construction would be to initialize the variables outside of the conditional blocks and then define them within the condition. Consider the following:

var signOne, signTwo;

if (direction === "right") {
  signOne = '-';
  signTwo = '';
} else if (direction === "left") {
  signOne = '';
  signTwo = '-';
}

innerWork.not('.active').css({'left': signOne + '450px'}); // Move the not active text to the left
innerImg.not('.active').css({'left': signOne + '370px'}); // Move the not active images to the left

Be careful. Crockford has some opinions that are not in line with the concensus, such as his feelings about post-increment. — Barmar, May 03 '14 at 04:43
@Barmar ... which is why JSLint has `/*jslint plusplus:true */`. Where he doesn't give options to opt out, I haven't seen a case where what Crockford prescribes is operatively worse than what he proscribes. He's not *wrong*. Say what you want about the tenets of JSLint, Dude, at least it's an ethos. And that's a great place to start. 2¢, etc. I can never quite understand why a great learning and quality tool stays so controversial. (This is where you say JSHint is better, I think. ;^D) — ruffin, May 03 '14 at 14:12

Correct Way Of Achieving This Result?

4 Answers4