Working with operators
Video: Working with operatorsJust about every statement we will write is going to involve an operation, moving data from one place to another, adding, subtracting. Now to perform a lot of these operations we need operators, and that just means the symbols that we are using to manipulate our values. The most obvious are probably the arithmetic operators. We have addition, we have subtraction, an asterisk for multiplication, forward slash for division. Now you typically see these used along with the equal sign, and the equal sign is formally called the assignment operator.
Viewers: in countries Watching now:
- Creating variables, functions, and loops
- Writing conditional code
- Sending messages to the console
- Working with different variable types and objects
- Creating and changing DOM objects
- Event handling
- Working with timers
- Building smarter forms
- Using regular expressions
Working with operators
Just about every statement we will write is going to involve an operation, moving data from one place to another, adding, subtracting. Now to perform a lot of these operations we need operators, and that just means the symbols that we are using to manipulate our values. The most obvious are probably the arithmetic operators. We have addition, we have subtraction, an asterisk for multiplication, forward slash for division. Now you typically see these used along with the equal sign, and the equal sign is formally called the assignment operator.
When we hit the statement we are going to execute whatever's on the right of the equal sign and use it to assign of the value to whatever is on the left of the equal sign. So for those of you who are new to programming, remember that when you see a single equal sign that's not a polite description; that's a command. We are setting a value. We are assigning. Now you will often see the same variable being used on both sides of the equal sign. In this case, we are just adding 10 to the variable called score and storing the result back in score. Now adding to a variable or subtracting to a variable happens so often that there is actually a shorthand for this.
Particularly multiplication and division are regarded as more important than addition or subtraction. So, if I read the expression on the right-hand side of the equal sign and just read it in order, left to right, I would think 5+5 is 10 times 10 is 100, but no, the multiplication is regarded as more important, so that's done first. 5 multiplied by 10 is 50, then we add 5, and the result is 55. If I want to impose an order on this, I simply take the important pieces that I want to be executed together and surround them with parentheses.
Run that again and the output here is that they are not equal. The comparison is false. Three equal signs, strict equality, is going to check that they're the same value and that the same type under the hood, that they're not just equal, but identical. Now most of the time the double equal sign and the triple equal sign will behave the same. As an example, if I had created the second variable just to have the number 5, then if we use the three equal signs, we would say, yes, they're equal and if we use two equal signs, yes, they're equaled.
We then have the classic greater than operator, less than operator, greater than or equal to, less than or equal to. And again, all of these must respond with either true or false. Something is equal or it is not; something is greater than or it is not; something is strictly equal to or it is not. Now what happens if you have a few questions to ask? If in a situation that we are comparing several things, I want to know if a is strictly equal to b and c is strictly equal to d, how do I write that? Well, what we will use here is the double ampersand.
This means "and," a logical "and." And I say logical "and" there because some people take "and" as meaning addition. The flip side of this is what if we are interested in one or the other situation? If the variable a is strictly equal to the variable b or the variable c is strictly equal to the variable d, we use the double vertical bar, or pipe symbol. This is the logical or. Now you will often see these kind of split up with multiple sets of parentheses to make it a bit more explicit about what you're looking at, in this case, if a is greater than b and c is less than d. But as ever, the entire condition, the wider set of parentheses must evaluate as either true or false.
I set that equal to year % 4. The % here is the modulus, or remainder operator. What it means is divide the variable year, 2003, by 4, but don't give me the result, give me the remainder, which in this case 4 would go into year 500 times and the remainder would be 3, and you will run into this one now and then. Next, we have shorthand for adding to a variable. Now we have already seen this a little bit. If we have a variable called a and we want to add 1 to it, I could do it the long way, which would be this.
I could do it the shorter way, a+=1. But if I am just interested in adding 1 to a variable, I can also use another operator, which is ++. If you want to get geeky about this, this is what's called a unary operator, meaning it only needs one thing to act on. Now the plus plus operator, which increments by 1, can be used either after the variable name or before the variable name, so a++ or ++a. And the flip side is true.
We have a=a-1, or a-=1, or a--, or --a, they all do the same thing. Now by themselves on lines like this, great. But there is actually a tricky difference. So the plus plus and the minus minus can be used either before the variable name or after. Technically, if you want to get geeky about it, it's what's called the prefix and postfix versions of those operators. And while they end up doing the same thing, they do it in a different way, and there is an impact to which one you choose.
Let me show you what I mean. Let's say we start off with creating a variable a and setting it equal to 5. What I am then going to do is write a statement that says alert(++a). So I want to pop up a message box with the contents of the variable a, and I'm going to add 1 to it. What happens is using the prefix version where the plus plus is before the variable we will actually execute that, and we will increment a before we run this line.
So the value of a will be changed to 6 and then the alert message will pop up saying 6. However, if I go back and do this a slightly different way, doing an alert with a++, what happens is we will first do the alert and only then, at the end of the line, will we cause 1 to be added to a. The end result is the same, that the variable a=6, but the message that we popped up was different, and this is one of those little things that can cause bugs.
So I tend to only use the plus plus and minus minus on their own statements by themselves. Then it doesn't matter. I know that when I have executed that line of code it's been incremented or decremented. And finally, the last one that I am going to talk about is a great little useful one called the ternary operator. That's not a great name, but there is no better name for it. See, most of our operators are what are called binary operators. Now it doesn't mean they work on binary code. It just means they work on two elements; there is something on the left and something on the right, a+b, amount divided by year.
They work on two pieces. The unary operator, plus plus, minus minus, works on one, and ternary works on three. So it actually has two symbols to it, the question mark and the colon. Now the general format of using this is that you have a condition. You're asking something. Then you say what happens if this is true and what happens if this is false. You can actually think of it as a mini if/else statement. So let me show you an example here. So let's say I define two variables: var playerOne=500, var playerTwo =600.
Now some time later in my code I want to create a high-score variable and I want to set this equal to whatever the larger of the first two are. Well, I could write this using an if statement. If playerOne>playerTwo, we will set highScore=playerOne; otherwise, we will set highScore=playerTwo. So I have got about six lines here just to set the value of highScore. With the ternary operator, it would let me take it from six or seven lines to one.
What we do is we specify three things: the condition, question mark, what if it's true, colon, what if it's false. So my condition is playerOne>playerTwo. Like all conditions, this has to be either true or false. I put the question mark. Then I say if it's true, I want to return the value of playerOne colon, if it's false, I am returning the value of playerTwo, semicolon to end the statement. This would allow me to get rid of that if statement and have the whole thing just on one line.
Now we probably won't use this much in this course, but you will see it from time to time, so I want to be able to recognize it when you do see it. And this has given us plenty of operators and definitely will be enough to get us moving and building some useful logic in our code.