Expressions and Operators

• Subtraction compound assignment operator: res -= x is shorthand for res = res - x.

• Multiplication compound assignment operator: res*= x shorthand for res = res * x.

• Division compound assignment operator: res /= x is shorthand for res = res / x.

let res = 4; 

res += 3; // Same as res = res + 3
res; // returns 7
res -= 2; // Same as res = res - 2
res; // returns 5
res *= 4; // Same as res = res * 4
res; // returns 20
res /= 5; // Same as res = res / 5
res; // returns 4

Precedence Hierarchy:

let res = 4 - 2 + 3; // returns 5

• The above expression includes two arithmetic operators, subtraction and addition. They have the same precedence to it just evaluates from left to right.

res = 4 * 2 + 3; // returns 11

• The above expression has a multiplication operator, then addition. Multiplication has higher precedence than addition. But it is already on the left side so it executes first anyway. The line executes in the order shown and resolves to 11.

res = 3 + 4 * 2; // returns 11

• Above we have an addition operator then a multiplication operator. Multiplication has higher precedence so 4 * 2 is done first, giving us 8. Then we add 3 giving us 11.

res = (3 + 4) * 2; // returns 14

• If you want to override the precedence in the expression, use parentheses. Parentheses have the highest precedence. Here we want to add 3 + 4 then multiply the result, 7, by 2. So 3 + 4 is put in parentheses. Multiplying that by 2 resolves the expression to 14.

res = 4 * '2'; // returns 8
res = 4 / '2'; // returns 2
res = 4 - '2'; // returns 2

res = 4 + NaN; // NaN
res = 4 * 'Some text'; // returns NaN

res = 4 + false; // returns 4
res = 4 + true; // returns 5
res = '4' * true; // returns 4

res = 4 + '2'; // returns '42'
res = 7 + 'Eleven'; // returns '7Eleven'

Binary Arithmetic Operators:

• Binary arithmetic operators have two operands. These are the operators we most commonly think of. The plus + and minus - signs, multiplication * and division /. The remainder operator which we'll cover next %. And the exponent operator **. 

res = 4 + 3; // 7
res = 4 - 3; // 1
res = 4 * 3; // 12
res = 4 / 3; // 1.333
// Remainder operator
res = 4 % 3; // 1
res = 4 ** 3; // 64

Unary Arithmetic Operators:

• Unary arithmetic operators have one operand. You'll see these most commonly in for loops.

• The increment operator is two plus signs ++. If you have a variable you can increment it by 1 by adding the increment operator to it. If you put it before the variable it adds 1 to the variable before it is used. 

let x = 7;
console.log(++x); // increments x by 1 then logs the value of x which is 8.

• If you place it after the variable it adds 1 to it after the variable is used. 

let x = 7;
console.log(x++); // logs the value of x which is 7, then increments x by 1.

• Decrement works the same way only it uses minus minus -- as the operator and subtracts 1 from the variable.

let x = 7;
console.log(--x); // decrements x by 1 then logs the value of x which is 6.

let x = 7;
console.log(x--); // logs the value of x which is 7, then decrements x by 1.

Unary plus/minus operator:

• A single plus or minus sign added before a variable converts it to a number if it is a string digit. 
• It doesn't change the underlying variable value though. It just gives you a copy of it as a number.

let y = '7';
res = +y;
res; // returns 7
y; // returns '7'. Y did not change.

• The minus sign will convert the string digit to a number and make it negative. But it doesn't change the underlying variable value. Z is still the string value '7'

let z = '7';
let res = -z; 
res; // returns -7 
z; // returns '7'. Z did not change

• Comparison operators compare two operands and return true or false. They can check for equality, inequality, greater than, greater than or equal to, less than, less than or equal to.

• When checking for equality, you can check for strict equality with 3 equal signs ===, or loose equality with two ==. 

• You can also check for strict inequality with !== or loose inequality with !=.

Loose Equality and Inequality

• The two arrays being compared in the example above have the same values, but they are not the same array. They are stored at different memory addresses.

• Next we declared another variable named arrCopy and set it to the arr variable. So now arr and arrCopy both hold the same memory address and therefore are equal.

7 > 6; // returns true
4 <= '9'; // returns true

• Logical AND (&&)  operator. 
• or the logical OR (||) operator.

• Expressions with logical operators resolve to true or false.

Logical operators: Used in conditional statements

if (true && true) { 
  console.log('Both conditions are true');
}

• In the above simple example we used the primary expression true for both conditions. Since they are both true the condition passes.

const x = 7;
if (typeof x === 'number' && x > 0) {
  console.log('x contains a positive number');
} 

• In the above example we first check if variable x is a number. Checking the data type of a variable avoids throwing an error if x is not defined. 
• If it is a number we check if the value is greater than 0. Since the value of x is the number 7, both expressions are true so the condition is true.

if (true || false) { 
  console.log('At least one of the conditions was true');
}

const x = 7;
if (x < 1 || x > 10) {
  console.log('x is not between 1 and 10');
}

• The above example checks if the value of x is less than 1 or greater than 10. If either of those expressions is true then the condition resolves to true. But since x is 7, neither is true so the condition is is false and doesn't execute the if statement.

let x = 7;

if (!x === undefined) {
  console.log('x has a value');
}

let res = 0 && 5; 
res; // returns 0
res = 1 && 6; 
res // returns 6

const val;
let name = val || 'Not provided';
name; // returns 'Not provided'

• Lastly, the compound assignment operator can be used to repeatedly add strings to the end of the same string variable. Below we are creating an HTML unordered list from a JavaScript array.

res = '<ul>';
const arr = ['Joey', 'Sheena', 'Johnny', 'Judy'];
arr.forEach((name) => {
  res += `<li>${name}</li>`;
});
res += '</ul>';

• First we assign an opening unordered list tag to the res variable.

• Then we apply the forEach iterator to the arr array, and for each item we put the name in HTML list tags and add it to the res variable. 

• After the array has been fully iterated through, we add a closing </ul> tag to the string and we are done.
• If this was used for a web page it would create an unordered list of all the names in array to display.