- [Instructor] As I explained previously, programming, in its most basic form, is taking some data, doing something with it, and putting the results back. This is done using operators, and in JavaScript, we have a bunch of operators that look familiar, but don't always do exactly what you expect. You've already seen one of these, the equals symbol. Outside of programming, an equals symbol denotes the result of a math equation, but in Javascript, it is an assignment. If we put a variable on the left of an equals sign and something else on the right, whatever is on the right will be assigned to that variable, effectively put into the variable container.
In Javascript, we have the standard math operators, plus, minus, multiply, and divide. We use these pretty much the way you'd expect. If you want to calculate the sum of a and b, you just type in a + b. Subtract one from the other by typing in a - b, multiply, a * b, so the asterisk is multiply, and divide a / b. JavaScript follows standard algebra rules, so if I type in a + b * c, operator precedence kicks in and the multiplication of b * c is done first before a is added to it.
So basically, parentheses are wrapped around b and c. This happens with multiplication and division which have precedence over addition and subtraction, just like in regular math. If you want to do something like multiplying the sum of a + b by c, you do what you'd do in standard algebra, wrap a + b in parentheses. Because we typically worth with variables, there's a good chance you may want to do a calculation on an existing variable, and then store the result, something like a = a + 4.
Since the same variable is on both sides of this assignment we can make a shorthand and say a += 4. This takes the value of a, adds 4 to it, and returns the result to a. The same can be done with -=, *=, and /=. If you have a value and you want to incrementally increase or decrease it by adding or subtracting one, there's a super shorthand you can use called the unary operator.
So instead of doing this, a = a + 1, we simply type in a ++. You can do the same thing with minus as well. Instead of a = a - 1, we just say a --. What we're doing here is taking a, then adding or subtracting 1, and then return the value into a again. We can also reverse this operator, writing ++ or -- a instead. This produces the same result, but in a different order, and to see what I mean here, we need to go into the console in the browser.
In my console I'll first setup a new variable a, and set it 1. Now I can console log a, and I get 1. If I console log ++a, I get 2. That's because we took 1 and added it to the original value before printing out a. Remember how I said in JavaScript, whatever happens first happens first and then the next thing happens afterwards? Well here, ++ happens before a, so therefore we take a value and add it into a, then print out a.
If on the other hand, I say console log a ++, the result is still 2, but if I console log a, you will see that a is 3. That's because this time we console logged out the value of a first, then added 1 to it, so that means we get the output 2, and then afterwards 1 is added to it, and the end result is a is 3. This may seem like a weird little quirk, but it's actually a super useful tool when you start working with increments, because it can choose when you want to add 1 to any item.
Author
Updated
4/1/2019Released
5/17/2017Through practical examples and mini-projects, this course helps you build your understanding of JavaScript piece by piece, from core principles like variables, data types, conditionals, and functions through advanced topics including loops, closures, and DOM scripting. Along the way, you will also be introduced to some ES6 and the basics of JavaScript libraries.
- What is JavaScript?
- Working with data
- Using functions and objects
- Working with JavaScript and the DOM
- Changing DOM elements
- Handling events
- Working with loops
- Making images responsive using markup
- Troubleshooting code
- Validating functionality
- Minifying JavaScript
Skill Level Beginner
Duration
Views
Related Courses
-
Introduction
-
Welcome1m 7s
-
-
1. JavaScript: An Introduction
-
What is JavaScript?2m 38s
-
-
2. The Basics
-
Introducing the browser console10m 31s
-
3. Working with data
-
Data types in JavaScript4m 2s
-
Arrays2m 20s
-
4. Functions and Objects
-
Functions in JavaScript3m 28s
-
Build a basic function3m 29s
-
Anonymous functions5m 11s
-
Variable scope3m 17s
-
ES2015: let and const6m 12s
-
Make sense of objects3m 19s
-
Object constructors6m 16s
-
Closures8m 11s
-
-
5. JavaScript and the DOM, Part 1: Changing DOM Elements
-
Access and change elements4m 33s
-
Access and change classes3m 45s
-
Access and change attributes4m 53s
-
Add DOM elements6m 56s
-
6. Project: Create an Analog Clock
-
Use CSS to move clock hands3m 49s
-
7. JavaScript and the DOM, Part 2: Events
-
What are DOM events?1m 31s
-
Some typical DOM events1m 59s
-
Add and use event listeners6m 51s
-
-
8. Project: Typing Speed Tester
-
Rundown of HTML markup2m 58s
-
Build a count-up timer5m 56s
-
Add a reset button5m 3s
-
-
9. Loops
-
Loops3m 37s
-
Looping through arrays4m 7s
-
Break and continue loops7m 9s
-
-
10. Project: Automated Responsive Images Markup
-
Project breakdown1m 55s
-
Rundown of project setup3m 26s
-
-
11. Troubleshooting, Validating, and Minifying JavaScript
-
Troubleshooting JavaScript7m 20s
-
Online script linting5m 57s
-
Automate script linting8m 24s
-
Online script minification2m 50s
-
Automate script minification2m 24s
-
12. Bonus Chapter: Ask the Instructor
-
What are arrow functions?3m 11s
-
What does the % symbol do?3m 47s
-
-
Conclusion
-
Next Steps1m 55s
-
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Arithmetic operators and math