A statement is a line of code or action that consist of values, variables, and operators. In the last lesson you created several statements that assigned values to variables using the assignment = operator. Statements can set values but do not become values themselves. Statements end with a semi-colon. In contrast, an expression is a piece of code that resolves to a value, i.e. values, calculations resulting in other values, variables, and groups of variables.
+ (plus) - (minus) / (divide) * (multiply)
In addition, the assignment operator = is used for value assignment.
== (loose equals) === (strict equals) != (loose not equals) !== (strict not equals)
The loose operators provide a way to compare two values of different types. For example “13” == 13 would yield true even though one is a string and one is a number.
< (less than) > (greater than) <= (less than or loose equals) >= (greater then or loose equals)
Compound operators are useful for writing shorthand statements such as a = a + 2, which can make use of the compound variable +=. In this example a = a + 2 would become a += 2. Compound operations are available in each of the four operators:
+= -= *= /=
Increment / decrement operators work in a similar way to compound operators whereby they provide a shorthand method of writing statements to increment or decrement values. For example a = a + 1 can use an increment variable of a++. Similarly a decrement take on this would look like a–. There are two increment and decrement operators:
→ Try it out
Create two files called index.html and script.js and enter the code below into each. Alternatively, if you followed along in the previous lesson, use the existing script.js file and replace its content with code below. After you have updated your script.js file, examine the results produced in the browser console.
/** * Operators */ let a = 10; let b = 5; let c = '5'; let d = 10; // Math Operators console.log(a + b); console.log(b * a); console.log(a / b); console.log(b - a); // Comparison Operators console.log(a != b); console.log(a == d); console.log(b === c); console.log(b == c); console.log(b >= c); // Compound Operators let result= a-=1; console.log(result); let result = b++; console.log(result);
To see the results: open index.html in your browser and open the console, Press Ctrl+Shift+J (Windows / Linux) or Cmd+Opt+J (Mac).
How did you do? Were the results as you expected? Continue plugging in other values, variables and operators in order to practice these concepts further.
Precedence and Associativity
Remember math class when you had to work out precedence of values in a calculation?
4 + 6 * 9 (4 + 6) * 9
4 + 6 > 9
Operator precedence determines the way in which operators are parsed with respect to each other. Operators with higher precedence become the operands of operators with lower precedence. So how do we keep track of what takes precedence? Thankfully, there is a very handy reference sheet included below, which lists all operators and associated precedence ranked from highest to lowest.
The reference sheet also includes associativity, which lets us know the direction in which the operation is executed. For example, typical math operations will be calculated left to right as you would be used. Other operators may cause execution to happen right to left. This is the case with the assignment = operator. Take the following statement:
let e,f; e = f = 4 + 6 console.log(a); console.log(b);
Notice that you can define more than one variable at a time in the example above. In this case the operation on the right is calculated and then at the end is assigned to b. The value of b is then assigned to a. This can be confirmed by examining at the values of a and b.
In this lesson you have learned about expressions, statements, operators, and operator precedence. The complete code used throughout this lesson is included below for your reference.
/** * Operators */ let a = 10; let b = 5; let c = '5'; let d = 10; // Math Operators console.log(a + b); console.log(b * a); console.log(a / b); console.log(b - a); // Comparison Operators console.log(a != b); console.log(a == d); console.log(b === c); console.log(b == c); console.log(b >= c); // Compound Operators let result= a-=1; console.log(result); result = b++; console.log(result); // Precedence and Associativity console.log(4 + 6 > 9) let e,f; e = f = 4 + 6 console.log(e); console.log(f);
Image Credits: Photo by Volkan Olmez on Unsplash.