The assignment operator looks like an equals sign. It takes the value of whatever is on the right side and writes it into to the variable on the left side.
In JavaScript, the assignment operator looks like the equals sign from math, but they are not the same thing.
Equals in math is a statement of fact: “this equals that”.
Assignment in computing is an operation: “Put the value of whatever is on the right into the variable on the left.”
Variables on both sides of the assignment operator
One of the more useful things you can do with assignment is to put the same variable on both the left and right side of the assignment operator.
Assignment operators
For each basic arithmetic operator in JavaScript there is a corresponding assignment operator.
a += b same as a = a + b
a -= b same as a = a - b
a *= b same as a = a * b
a /= b same as a = a / b
a %= b same as a = a % b
Example:
Increment/decrement operators
Operations of the form a += 1 (“make a bigger by one”) and a -= 1 (“make a smaller by one”) are so common that there are special operators just for this:
Precedence
You can combine several operations in one statement:
In situations like this, the order of operator precedence is the same as in math:
Multiplication and division before addition and subtraction.
Left before right.
Also:
Modulus is at the same level as multiplication and division.
Assignment has the lowest precedence.
You can use parenthesis to change the order of operations:
Comparison operations
Comparison operators (also called relational operators) are used to determine relative sizes of values. Their result is a Boolean value.
JavaScript has two different concepts of “the same”:
Exactly equal === (same type and value)
Effectively equal == (same value after any possible type changes have been made).
Most of the time you will want to use === (exactly equal).
Similarly, JavaScript has two different concepts of “different”:
Exactly not equal !== (different type and/or value)
Effectively not equal != (different value after any possible type changes have been made).
Most of the time you will want to use !== (exactly not equal).
The comparison operators have lower precedence than the arithmetic operators.
Logical operations
For complex control of logic, we will need logical operators—which take one or more Boolean values as operands and produce a Boolean result.
The usefulness of logical operations will make much more sense once we start to learn control flow.
An AND (&&) operation will produce a true result only if both its operands are true:
An OR (||) operation will produce a true result if either or both its operands are true:
A NOT (!) operation takes one operand and produces the operand’s opposite value:
Operations on strings
The + operator when applied to strings concatenates them (i.e., puts them together).
Comparison operators also work with strings.
Mixing strings with other types
When using the + operator, if one of the operands is a string, then the other operand will be converted to a string as well.
Watch out for the order of operations!
Control flow
Control flow means, “Things you can do to affect the order in which things happen.”
JavaScript (like a lot of languages) provides three mechanisms for control flow:
Sequence
Selection
Repetition
Sequence
Sequence means statements are executed one after another.
Sequence happens by default in JavaScript (and a lot of other languages).
There’s not much more to say about that.
Selection
A lot of programming logic has to deal with making decisions.
Selection structures let you implement decisions by selectively execute blocks of statements based on some kind of condition(s).
We will look at three of JavaScript’s selections structures: if, if/else, and nested if/else.
if
One of the most fundamental kinds of decisions you can make is: if some condition is true, then do some action.
If I am dirty, then take a bath.
If it is dinner time, then make dinner, set the table, and eat.
In JavaScript, this kind of logic is handled with the if statement.
If you need to execute more than one statement when the condition is true, then wrap the set of statements inside curly brackets:
Note that you don’t need a semicolon after the closing curly bracket, because the closing curly bracket pretty much says, “the show ends here.”
if/else
A lot of times, you will want to do one thing if something is true and something else if it is false. One way to do this is:
A much better way is to use JavaScript’s if/else structure:
It’s better because:
You only have to write the test condition once (saves typing, less liklihood of a mistake).
The program only has to run one test—which makes things run faster.
nested if/else
You can test for multiple conditions by putting if/else statements inside each other. This is called a nested if/else:
First “game”: number guessing
And now we can finally write a simple game. It’s lame, but it’s a game (arguably), and it’s complete.
While the above works, it’s generally better to use JavaScript’s “exactly equals” operator.
We can do this if we use JavaScript’s built-in Number() constructor to make a number from the user input before making the comparison:
Repetition
Another pattern that comes up a lot is repeating something over and over again:
while there is coffee left in my cup, take a sip of coffee.
For each item on my shopping list, find it in the store and put it in my basket.
This is called repetition or looping in programming.
JavaScript has a several structures for doing this.
while
The while structure is a direct expression of the idea: while something is true, do some stuff.
The preceding were examples of repetition using a counter (the variable i in the examples).
You can actually do repetition based on any kind of condition, including a condition that the user specifies:
The biggest danger with while loops is that you can create a situation where the repetition never ends. This is called an infinite loop.
Improving the number guessing game
Here is an improved version of the guessing game from earlier that lets the user continue to guess until she’s got it right:
We can tighten this up even more:
do…while
The do...while structure is similar to the while structure except that the continuation test happens at the end rather than at the beginning.
counter-controlled for
Repeating something based on a counter typically follows the same pattern:
JavaScript’s counter-controlled for puts all of this into a single structure.
This makes counter-controlled repetition easier to write and less likely to have bugs.
Counter-controlled for looks like: for (; ; ) { }
Example:
You can place the counter variable declaration in the structure as well:
Here is the averaging program written using counter-controlled for:
break and continue
The break statement will get you completely out of a repetition structure early:
The continue statement will skip the rest of the body of a loop but continue the repetition:
You don’t want to use break and continue a lot, but they can be very useful in some situations.