CODEWITHSUNDEEP
javascript
Tenali_raman
Tenali_raman

Reputation: 2182

Complex calculation in JavaScript

I'm having trouble understanding this code:

y -= (1 - (1770 - pencilY) / 225) * 140;

The way I understand calculation in JS:

y += 10; is equal to y = y + 10;

and if I say y = 1 - (1770 - pencilY);

What happens is (1770 - pencilY) gets calculated 1st before the resulting value is calculated against 1 , something like y = 1 - resulting value of 1770 - pencilY , but still I am unable to figure out that complex equation , its too nested for my understanding , can somebody expalin it to me?

Upvotes: 0

Views: 767

Answers (4)

oli5679
oli5679

Reputation: 1749

Javascript uses this operator precedence for basic arithmetic calculations

  • Brackets
  • Multiplicaiton
  • Division
  • Addition
  • Subtraction

(-= is an assignment operator that is given even lower precedence)

Higher precedence operations will be evaluated first. Returning to your example:

valOne = (1770 - pencilY)

(innermost brackets has highest precedence)

valTwo = valOne / 225

(division has higher precedence than subtraction)

valThree = 1 - ValTwo

(this subtraction operator occurs within the second brackets and so has a higher precedence than the multiplication)

valFour = ValThree * 140

(the outermost arithmetic operation has a higher precedence than the -= assignment operator)

Finally:

 y = y - ValFour

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

Upvotes: 0

Bergi
Bergi

Reputation: 664406

y += 10; is equal to y = y + 10;

Yes, so we can rewrite your expression to 

y = y - ((1 - (1770 - pencilY) / 225) * 140);

Its too nested for my understanding

Well, it help to make the nesting clear by adding parenthesis. In your case, there are many of them already, so we just need to figure out the precedence of - vs / - and division binds tighter. So

y = y - ((1 - ((1770 - pencilY) / 225)) * 140);

Now, when this is evaluated, it's basically left-to-right, and operands before the operation (strict evaluation). So what happens step-by-step is

y* = referenceTo("y")
y*' = referenceTo("y")
y' = valueOf(y*')                 // y
a = 1                             // 1
b = 1770                          // 1770
pencilY* = referenceTo("pencilY") 
pencilY = valueOf(pencilY*)       // pencilY
c = b - pencilY                   // 1770 - pencilY
d = 225                           // 225
e = c / d                         // (1770 - pencilY) / 225
f = a - e                         // 1 - ((1770 - pencilY) / 225)
g = 140                           // 140
h = f * g                         // (1 - (1770 - pencilY) / 225) * 140
assignTo(y*, g)

Upvotes: 1

vdegenne
vdegenne

Reputation: 13270

y -= (1 - (1770 - pencilY) / 225) * 140;

In order :

  1. (1770 - pencilY)
  2. (1770 - pencilY) / 225
  3. 1 - (1770 - pencilY) / 225
  4. (1 - (1770 - pencilY) / 225) * 140
  5. y - (1 - (1770 - pencilY) / 225) * 140

Upvotes: 3

Samuel Lindblom
Samuel Lindblom

Reputation: 819

Here is an article on operator precedence that explains in what order different operators will be evaluated.

In sequential order:

var a = 1770 - pencilY;
var b = a / 225;
var c = 1 - b;
var d = c * 140;
var y = y - d;

Upvotes: 1

Related Questions