Coding for Kids

Operators

Computers are great at calculating things. There are lots of different operators that a computer can use.

For the math examples below, give them a try. Go to a console window. If you're using repl.it there's one on the screen. If you're using Google Chrome as a browser, you can hit Ctrl+Shift+J to open the Developer Tools and use the console there. Other browsers have these tools too, so check the menus for debugging tools or development tools. In the console window, type in the operation you want to do and hit enter. It will show the result.

These can all be used on direct mathematical calculations, but computers are better when they're versatile. You can use these on variables, which can change while you're running the program.

Addition +

Coding for Kids Sidenote: JavaScript is a dynamically typed language, which means it can shift easily between numbers and strings. While this is nice sometimes, it can lead to problems. For example, if you have a number in quotes, like "2" and you add a number, like 3, then it gives 23, not 5. So, we have to be careful.

This may come as no surprise, but 2 + 3 gives you 5. And your computer can do that for you too, using the addition operator.

This will also join strings (think: words) together through concatenation. If you type "Hi" + "there" you'd get "Hithere". Notice that it won't add a space unless you tell it to.

Subtraction -, Multiplication *, Division /

These all operate the way you would expect with numbers. They don't work on strings, so you can't use subtraction, for example, to do this: "Monkey""Mon" to get "key". Nope, it won't work. Sorry.

You may comfortably know where the plus + and minus - signs are on your keyboard. They're next to each other on the top-right of the keyboard, next to backspace. But you need the shift key to use the plus sign.

You're probably used to using the times sign × for multiplication, right? Well in computers, you have to use an asterisk (which a lot of people have a hard time saying). The asterisk * is located on the number 8 on your keyboard and you need the shift key to get to it. Use shift+8 to get your multiply * sign.

Similarly, there's a different symbol for division. Your keyboard doesn't even have a divide sign ÷ you're used to seeing in math class. Instead, you need to use the forward slash / which is paired up with the question mark ?, next to the right-hand shift key on your keyboard.

Raising to a power **

Raising a number to a power, like 24, means multiplying a value to itself a certain number of times. 24 is 2 multiplied 4 times, or 2 * 2 * 2 * 2, which is 16.

There are two ways to use these exponent powers in JavaScript. The following two examples do the same thing. In both cases, the base number is first and the exponent(power) is second.

Modulo %

Sometimes called modulus, this is a very useful operator. It returns the remainder after you divide two numbers. So 7 % 5 gives you 2. That's because 5 goes into 7 once and there are 2 left over. Here's an example of how it's useful.

Let's say you have a certain number of M&Ms and you want to put them into bags to share with five of your friends. You need six bags and you want to be fair, so you want an even number of M&Ms in each bag. You could count all the candies and then divide by 6 and then put that number into each bag.

But what if people keep dropping off M&Ms? Then what? You won't know how many you have to start with. So how can you divvy up the candy evenly? Simple. You put one candy into each bag, one at a time. And once you've added to all the bags, you start again from the first bag. Repeat until you run out of M&Ms.

This is a perfect situation for the modulo operator. Whichever M&M you're up to, if you were to divide it by six and look at the remainder, that would be the bag number you put it into. Each time you add one M&M, you increase the remainder by one until you start over from 0.

Total
M&M#
Bag #
(M&M# % 6)
1 1
2 2
3 3
4 4
5 5
6 0
7 1
8 2
9 3
10 4
11 5
12 0
Explaining modulo by sorting M&Ms

Now because this is "mathy", we have to remember that 6 divided by 6 (or 6 / 6) would have a remainder of zero (6 % 6 gets you 0), so we need bags numbered 0, 1, 2, 3, 4, and 5. (There's a bag 0, not a bag 6.)

With this, you never need to know how many M&Ms you're dealing with. You can just use the remainder to figure out which bag you need to fill next.

Which bag number would get the 317th M&M? Go and try it in the console. Put in 317 % 6 and hit enter. You should get a remainder of 5. For us, that's bag #5.

This is also extremely useful if you need to test for even and odd numbers. If anything is even, it's divisible by 2. So if number % 2 is equal to 0, then it's even and if it's equal to 1, then it's odd.

Computations in computers are NOT the same as in algebra

In computing, you often have a variable that holds a value, like a number. If you want to add to that number, you have to do something a little different than you've seen in math class. Let's say I scored an 83 on my test and then the teacher decides to give everyone 4 points. Lucky us! Here's how I would set up my score, then how I would add 4 points to it.

When the computer sees a single equals sign =, it knows you're going to assign a value to whatever is on the left side, in my case myTestScore.

The computer then looks on the right side and does whatever calculation you ask it to. In this case, it adds 4 to whatever my score was before, such as the 83.

Once it has the new value, it assigns that to the variable on the left side. In our case, it's the same name as the original variable. That means, the original variable now holds the new value.

You don't always have to replace the original value like this. You could, instead, give the calculated value to a new variable and leave your old variable the way it was before.

Shorthand notation

You often do want to update variable values, like if you're keeping score in a game. You can write it out like we did above, or we can use a shorthand notation. It saves us from typing the variable name twice. This does the same thing as the example above, but it uses the same variable name each time.

To use this, you put the operator in front of the equals sign. This tells the computer to do that operation on the variable and then assign it back to that variable.

Increment and decrement

Many times, we need to add 1 to a number or subtract 1 from a number. We use the add 1 very often in loops. But let's say you make a game and the character levels up, you'd want to add 1 to the level. Or what if the character dies and you need to subtract one life? There are, actually, three ways you can tell the computer to do this!

When using ++ or --, you can put it at the beginning of the variable or at the end: level++ or ++level.

Coding for Kids Sidenote: You will hardly ever need to know this nuance. Stick with variable++ for a consistent look to your code unless you actually need it to be otherwise.

There is, however, a slight difference whether you put it in front or after. You'll rarely ever see where it matters. If you put the ++ first, it adds the 1 before processing the rest of the line. If you add it after, then it adds it after it processes the line. To see this in action, try this.

In the line with test++, the console shows the value of test (which is 0) and then it adds the 1. When the line is finished, test actually equals 1. In the line with ++test, the 1 is added first, so the console displays test as 2.

Just because you know all about operators now doesn't mean you can go perform brain surgery!

—Dr. Wolf