13

What does the minus equals below -= mean/do? 

$('#wrapper').animate({
    backgroundPosition: '-=2px'
})();

Thank you

Chase Florell
  • 46,378
  • 57
  • 186
  • 376
David Van Staden
  • 1,739
  • 9
  • 34
  • 52

2 Answers2

40

Adil has answered this but I always think it is useful to visualise problems and relate them to others.

The following two pieces of code have the same effect:

var a = 20;
a = a - 5;

and

var a = 20;
a -= 5;

In both cases a now equals 15.

This is an assignment operator, what this means is that it applies whatever is on the right side of the operator to the variable on the left. See the following table for a list of assignment operators and their function:

Operator |  Example |  Same as    |  Result
______________________________________________
  =      |  a = 20  |             |  a = 20
  +=     |  a += 5  |  a = a + 5  |  a = 25
  -=     |  a -= 5  |  a = a - 5  |  a = 15
  *=     |  a *= 5  |  a = a * 5  |  a = 100
  /=     |  a /= 5  |  a = a / 5  |  a = 4
  %=     |  a %= 5  |  a = a % 5  |  a = 0

You also have the increment and decrement operators:

++ and -- where ++a and --a equals 21 and 19 respectively. You will often find these used to iterate for loops.

Depending on the order you will do different things.

Used with postfix (a++) notation it returns the number first then increments the variable: 

var a = 20;
console.log(a++); // 20
console.log(a); // 21

Used with prefix (++a) it increments the variable then returns it.

var a = 20;
console.log(++a); // 21
console.log(a); // 21
George Reith
  • 13,132
  • 18
  • 79
  • 148
  • to supplement this, there's also `a++;` or `a--;` which will add or subtract ONE from the currently set value of `a` – Chase Florell Mar 27 '13 at 17:06
  • O i see, thanks for explaining it...so basically a -= 5 means: a = 5 and then subtract 5 from the current value of a, which is 5...? – David Van Staden Mar 27 '13 at 17:16
  • not quite. `var a = 20; // set the value to 20` then `a -= 5 // set's the new value of a to 15` – Chase Florell Mar 27 '13 at 17:22
  • "Used with prefix (++a) it increments the variable then returns it." This was an excellent example of how it works. It's basic concept that's usually not explained well at all. – VSO Oct 28 '16 at 15:11
  • *"returns the number first then increments the variable"* is a common explanation but doesn't quite make sense - how can the operator do anything after it returns? Technically you mean *"increments the variable, then returns the value it had prior to incrementing"*. It's occasionally important to be precise about this, because otherwise one can get confused about the meaning of expressions like `i++ || bar(i)`. (In JavaScript, `bar()` is guaranteed to be passed the post-increment value of `i`, not the original value; in C++, it's [unspecified](http://stackoverflow.com/a/4445841/1709587).) – Mark Amery Dec 17 '16 at 11:46
  • @MarkAmery I've been seeing you on here a lot lately. I'm not sure about this. It sounds like something thats interpreter specific. It may very well return the variable and then increment it as the next step. I get what you are saying though but the interpreter can do what it wants as long as it treats this as atomic. It also reads easier for a new programmer in my opinion as it doesn't require you to backtrack. If you wrote it with only direct assignment you would do `a; a = a + 1` – George Reith Dec 18 '16 at 06:35
  • @MarkAmery I get what you are saying though but I don't think this is a dangerous way to think or to teach people. Unless I misunderstood or you are about to blow my mind like usual :) Hopefully people don't start putting unreachable code after `return` statements because of this. If anything `return` is the wrong word here. Its probably just evaluate but I think people are more likely to understand return as its a language concept that does something pretty similar. Thanks for the taste of the good old days again! Missed our lengthy discussions. – George Reith Dec 18 '16 at 06:44
  • Like anything at this stage of someones development. Its best to go the easiest route, you can teach stuff even if its wrong (Bohrs model) and correct it later. You don't want to drown someone in stuff they don't need to know yet, better to understand this concept and learn for themselves later about how the code runs, event loop, interpreter whatever your environment is. Right I'm going to go bed now. – George Reith Dec 18 '16 at 06:51
  • @GeorgeReith it's not interpreter-specific (or at least, anyone doing things differently is violating the spec); the [Postfix Increment Operator](https://www.ecma-international.org/ecma-262/7.0/index.html#sec-postfix-increment-operator) section of the standard dictates that when encountering `x++`, first `x` should be implemented and then the old value of `x` should be returned. This is different from the operator's behaviour in C and C++, whose standards dictate that `x`'s old value should be returned and that `x` should be incremented before the next sequence point or sequenced expression. – Mark Amery Dec 18 '16 at 10:44
  • @GeorgeReith that means that `x = x++` has a(n admittedly pointless) well-defined behaviour in JavaScript across all spec-compliant interpreters, whereas the same expression invokes undefined behaviour (complete with [nasal demons](http://catb.org/jargon/html/N/nasal-demons.html)) in C. – Mark Amery Dec 18 '16 at 10:47
  • @GeorgeReith I agree with you that 'return' is a slightly surprising/unintuitive word to use in this context (though the spec uses it too!), and also that your framing is going to be fine for most beginners (and probably for most experts, too; if any of my colleagues wrote code that relied upon the nuance explained above to work correctly and I had to review it, I would throw things at them). And yes, it's good to encounter you again. :) – Mark Amery Dec 18 '16 at 10:48
5

The operator -= (Subtraction assignment) will subtract the given value from the already set value of a variable.

For example:

var a = 2;
a -= 1;
//a is equal to 1
brandonscript
  • 68,675
  • 32
  • 163
  • 220
Adil
  • 146,340
  • 25
  • 209
  • 204