% operator

@codyhillAug 14.2019

Some time back someone helped me with some code. And in his code, he has the % operator.
I never have seen it. And I also can’t find a good explanation on youtube or google. I asked him and this is what he said.
`The % operator returns the integer remainder of dividing.
for(var i=0, s=’ABC’; i<9; i++) {
console.log(i, i%s.length, s[i%s.length])
}`
I don’t really understand that too. especially I%s. And why is it returning a loop?

I code that I use is this
`const newDot = dots[(dots.length + counter – 1) % dots.length]; `
Can someone explane me who this works?

What I can understand or try to understand is this. (I have 4 dots and const counter = 1);
The length of the dots (4) + counter(1) – 1 % dots.length (4)
4 + 1 – 1 % 4 = 0 ?
4 + 2 -1 % 4 = 1.25 and % takes 1.25 and turns it into 1?
After I wrote this I am more lost hahah.

to post a comment

JavaScript

17 Comments(s) _↴

@NogDogAug 15.2019 — #It's the "remainder" operator, sometimes known as the modulus operator. It returns whatever is left after you find the largest whole number of times the value on the right goes into the value on the left.

5 % 1 = 0

5 % 2 = 1

5 % 3 = 2

5 % 4 = 1

5 % 5 = 0

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder

@codyhillauthorAug 15.2019 — #@NogDog#1607625 Ohh, So If I have more then 4 Dots this won't work... What a shame

@SempervivumAug 15.2019 — #No, it [b]will[/b] work: 24 % 5 = 4

@codyhillauthorAug 15.2019 — #@Sempervivum#1607631 It did not work for me. you can try it in my recent post. I think I just commented out the code.

You can test it in my recent post. I think I just commented out the code.

@codyhillauthorAug 15.2019 — #@Sempervivum#1607631 Nvm it works.

But I still don't understand how this works.

5 % 1 = 5 the rest is 0

5 % 2 = 4 rest is 1

5 % 3 = 3x3 = 6(to big) so is 3 and reste is 2

5 % 4 = 4 rest 1

5 % 5 = 5 rest 0

24 % 1 = 24 rest 0

24 % 2 = 11.5 x 2 = 23 rest 1 ?

24 % 3 = 7.333 x 3 = 22 rest 2 ?

24 % 4 = 5.25 x 4 = 21 rest 3 ?

24 % 5 = 4 x 5 = 20 rest 4 ?

Also, I think my code is reversed.

5 % 5 =

6 % 5 =

7 % 5 =

8 % 5 =

@cootheadAug 15.2019 — #Hi there RaulRogojan,

perhaps the following will make % a little easier to comprehend...

5 % 1 = **remainder** of 5 **divided** by 1 which is **0**

5 % 2 = **remainder** of 5 **divided** by 2 which is **1**

5 % 3 = **remainder** of 5 **divided** by 3 which is **2**

5 % 4 = **remainder** of 5 **divided** by 4 which is **1**

5 % 5 = **remainder** of 5 **divided** by 5 which is **0**

24 % 1 = **remainder** of 24 **divided** by 1 which is **0**

24 % 2 = **remainder** of 24 **divided** by 2 which is **0**

24 % 3 = **remainder** of 24 **divided** by 3 which is **0**

24 % 4 = **remainder** of 24 **divided** by 4 which is **0**

24 % 5 = **remainder** of 24 **divided** by 5 which is **4**

5 % 5 = **remainder** of 5 **divided** by 5 which is **0**

6 % 5 = **remainder** of 6 **divided** by 5 which is **1**

7 % 5 = **remainder** of 7 **divided** by 5 which is **2**

8 % 5 = **remainder** of 8 **divided** by 5 which is **3**

_coothead

@codyhillauthorAug 15.2019 — #@coothead#1607635 Hi there!

Thanks! this proves that my thought process was right but 5 / 2 = 2.5. the remainder isn't 5?

Of it's the largest hole number so it's 3 but the remainder is 2... . that's the part I don' understand.

@SempervivumAug 15.2019 — #Maybe a verbose implementation of the modulo clarifies it:

`remainder = a - (Math.floor(a / b));`

@cootheadAug 15.2019 — #Hi there RaulRogojan,

You, obviously, need a little lesson in the meaning of **remainder** in Mathematical division...

https://www.mathsisfun.com/numbers/division-remainder.html

_coothead_

@codyhillauthorAug 15.2019 — #@Sempervivum#1607638 Oh I got it.

Only I did it like this and played with the numbers. Sorry, it's been a while since I've been to school :D

``<i>
 </i>var a = 5
 var b = 5
 var c = 4
 
 remainder = (a + c - 1) % a
 
 console.log(remainder)<i>
 </i>``

@KeverAug 15.2019 — #A little more explanation on the other parts of the code

<i>
 </i>var offset = -1; // difference between the value of counter and the index of the newDot
 var divisor = dots.length;
 const newDot = dots[(counter + offset) % divisor];
 
 // the divisor is added to make it work when the result of (counter + offset) is negative.
 // this works since x % x = 0
 const newDot = dots[(divisor + counter + offset) % divisor];

@codyhillauthorAug 15.2019 — #@Kever#1607647 I thought it was the other way around. I thought that -1 was to align the slide with the dots because they were offset.

The problem that I had was that I did not know what will happen when the rest will be 0 again. But I added more slides and dots to the code and somehow worked.

Even when I tried with the simplified version at one point the rests are starting from 0 again.

``<i>
 </i>var a = 5
 var b = 5
 var c = 6
 
 remainder = (a + c - 1) % a
 
 console.log(remainder)<i>
 </i>``

This is 0 but in the carousel keeps going to the next point and the next point. But i got it now

@KeverAug 15.2019 — #You're right about the -1 offset to align the slide with the dots. The simplified version will cause an error when you hit previous to go from the first to the last slide. Counter will become 0 (the index of first-clone), which results in the index for dot being: (0-1) % x = -1. This is corrected by adding the divisor (right side, x) to the numerator (left side).

@RichardSusskind1Aug 19.2019 — # In computer programming and at the command line, an operator is an object that is capable of manipulating a value or operator. For example, in "1 + 2", the "1" and "2" are the operands and the plus symbol is the operator.

@JMRKERAug 19.2019 — #@RichardSusskind1#1607749

Rather than a random quote, how about giving some useful information.

1 + 2 = 3

'1' + '2' = '12'

In each case the numbers are the operators and the + symbol is the operator

but each gives entirely different results depending upon user needs.

Plus the original question concerned the actions of the '%' operator, not the '+'.

Be helpful, not just to increase your post count.

@ziptechprivatelimitedAug 20.2019 — #An operator, in computer programing, is a symbol that usually represents an action or process. These symbols were adapted from mathematics and logic. An operator is capable of manipulating a certain value or operand.

Operators are the backbone of any program and they are used for everything from very simple functions like counting to complex algorithms like security encryption.

@JemsnixonMar 17.2023(updated) — #I initially believed that things were reversed. As the dots were offset, I mistakenly believed that -1 would align the slide with them.

Also in #JavaScript _↴

Saving to files why am I frustrated?Avoiding Print Dialog Box

Success!

Help @codyhill spread the word by sharing this article on Twitter...

Tweet This

% operator

17 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

% operator

17 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

17 Comments(s) _↴

Also in #JavaScript _↴