Check out a free preview of the full JavaScript: From First Steps to Professional course
The "Operators" Lesson is part of the full, JavaScript: From First Steps to Professional course featured in this preview video. Here's what you'd learn in this lesson:
Anjana discusses the various operators and the different effects they can have on values in JavaScript. In JavaScript, Arithmetic operators respect the order of operations and can be grouped using parentheses.
Transcript from the "Operators" Lesson
[00:00:00]
>> So far we've been talking about values a lot, we're talking about strings in particular for a long time. We've been talking about other values earlier, numbers, Booleans, etc. We also need some other things in the universe of JavaScript in order to be effective, in order to do stuff in the program.
[00:00:18]
We can't just write strings all day, we need to do things with strings, or numbers, or Boolean, or what have you. And that's where operators come in. Also, in Shodai songs if there's any Shodai fans in the house. So let's take a look at some of the smooth operators JavaScript has to offer.
[00:00:37]
We've already seen a couple, these two bullet points, each have an operator in them. So in string " ALOHA" + "!", what's the operator, do you think?
>> Plus.
>> The plus. Excellent, because ALOHA a string, the exclamation point is also a string, the plus is the only thing left, the plus is the operator.
[00:01:04]
And then in type of value, in this case a string value, the operator is?
>> Is?
>> Question mark, what's the operator in type of value? I'm asking the operator in this little JavaScript snippet here type of string value. So the in quotes value, that's a string, the only thing left In our little snippet of JavaScript is type of, so type of is actually an operator also.
[00:01:34]
I've been calling these things like magical spells, but they have more technical terms than that, and there are things of different types. So in this case, type of the kind of thing that it is, the kind of spell that it is, it's an operator. It's an operator that operates on a value, so you put it right before a value and then it tells you the string name of that value's type.
[00:01:58]
So type of sting value, we'll say string. The plus operator in "ALOHA" + " !", we said it does what? What does that operator do? Concatenates.
>> Steven, here you said?
>> You said it already.
>> Could you say it?
>> Concatenates.
>> Concatenates, yes. So Steven and OJ both say concatenates the two strings.
[00:02:18]
Yeah, that's the fancy word for smooth two strings together, make another longer string. So these are a couple of operators and there are others. And in fact, so for example, plus as an operator, maybe you've seen used for other things. So plus as an operator in JavaScript, that has several different uses.
[00:02:41]
We already saw that what it does when operating on strings, OJ just said concatenates the two strings. Any other guesses on the kinds of things you could use the plus operator with? We already looked at one, Bob, so what other types of values could a plus operator operate on?
[00:02:59]
>> Numbers.
>> Numbers, plus we can use it to do what two numbers? Add them exactly. So here's the question, how many values does the plus operator need to do its job, whether strings or numbers? Especially for adding, right, two numbers, you can't just add one number, you have to have another number to add it to.
[00:03:27]
So it needs two values to do its job when it's adding numbers or when it's concatenating strings. Now it actually does have other things that can do that regard different numbers of values but we're just gonna kind of gloss over that because it's what is often called an overloaded operator.
[00:03:44]
So it's an operator that does multiple different functions depending on how you're using it and what you're using it with. There are some other arithmetic operators that you might have seen, or if not, we're looking at now. So plus is for add, the minus sign, subtract. The star is like, what in elementary school maybe you used an X for, but also in math can sometimes be a dot or a star, different things.
[00:04:15]
Anyways, in JavaScript, it's a star, it's an asterisk, is going to multiply numbers. And then the slash is gonna divide one number by another number. So hopefully, none of this is earth shattering, but the point is JavaScript has a bunch of different operators, they can do arithmetic on numbers.
[00:04:33]
So we say operators operate on value. So these arithmetic operators operate on numbers to do these different arithmetic operations, what have you. Now when I have a bunch of operators all together in the same thing, we have to understand how JavaScript is going to carry out these operations.
[00:04:58]
So what do you think? In this example, I have a ((4+1)*2*4)+2. When JavaScript looks at that, the same as you might look at that in math class, what is it gonna do first? Is it going to add 4 + 1? Is it going to do something else? Any guesses?
[00:05:26]
>> Something else.
>> Something else is our guess. Let's find out, shall we? We can try, I'm just gonna copy this and go back in here. Okay, let's make this a little bit simpler. Let's cut out some of this. So if I have 4 + 1 * 2, I get 6.
[00:05:52]
So what does it seem to be doing?
>> Respecting the order of operations.
>> That's respecting an order of operations where multiplication happened before addition, same as in math class. So these operators, they take the same precedence as you might expect in math class. Now, what happens if I want the addition to happen first?
[00:06:15]
Or how do I tell JavaScript, I want the addition to happen first? I can use parentheses just like in math to group things together to indicate to JavaScript what it should do in which order. So for example, if I want the addition to happen first, I can do [4 + 1] and then times 2, and now I'll get 4 + 1 is 5 times 2 is 10 as opposed to 1 times 2 is 2, 4 plus 2 is 6 like I had before, cool?
[00:06:51]
Again, nothing earth shattering, this is basically to say JavaScript is a calculator, if you want [LAUGH] you have a calculator in your web browser, yay. [LAUGH] So, the important thing to note is that operators, JavaScript the way that it interprets the commands you're giving it or the spells you're typing in, depends on certain things that we've we've created as humans.
[00:07:17]
We've created these constructs, and in this case, JavaScript is following is the kinda canonical mathematical order of operations. And parentheses are your friend if you want to change that grouping.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops