Operators

let a;
console.log(a = 2); // logs: 2 // logs the assignments' return value.

let counter = 0; // operator: =
while (counter < 10) { // operator: <
  if (counter % 2 === 0) { // operators: % and ===
    console.log(counter + " is even"); // operator: +
  } else {
    console.log(counter + " is odd"); // operator: +
  }
  counter += 1; // operator: +=
}

let varA = 0,
    varB = 10;
	
console.log(varA = varB); // logs: 10 // it logs the return value varB (and varA is assigned the value 10)
console.log(varA += varB); // logs: 20 // varA = varA + varB thus it returns: varA + varB
console.log(varA); // logs: 20	
console.log(varB **= 3); // logs: 1000 // varB = varB ** 3 (varB = 10^3).

let varA = 0;

console.log(++varA); // logs: 1
console.log(varA); // logs: 1

varA = 0;

console.log(varA++); // logs: 0
console.log(varA); // logs: 1

let varB = 10;

console.log(--varB); // logs: 9
console.log(varB); // logs: 9

varB = 10;

console.log(varB--); // logs: 10
console.log(varB); // logs: 9

let i = 0;
while (i < 10) {
  console.log(i);
  i += 0.1;
}

BTW: The seemingly inconsistent precision of the increments of 0.1 in the result is due to the properties of floating point numbers.

let name = "Beth"; // A value enclosed in single or double quotation marks indicates a string value.
console.log('beth' == name); // logs: false // case sensitive!
	
console.log(2 == 2); // logs: true
console.log(2 != 5); // logs: true

console.log("313" == 313); // logs: true // The string "313" is coerced to number 313.
console.log("313" === 313); // logs: false // Non-matching data types.
console.log(false != 0); // logs: false // Boolean false is coerced to 0, which IS equal to 0.
console.log(false !== 0); // logs: true // Non-matching data types: they are indeed not strict equal. 

console.log(10 > 2); // logs: true
console.log(7 >= 7); // logs: true
console.log('Alice' < name); // logs: true // compared alphabetically (case sensitive!).
console.log('2' < '123'); // logs: false // compared alphabetically 2 is greater than 1.

console.log(true < 2); // logs: true // "true" automatically converted to 1, which is less than 2.

BTW: A string literal is signified by placing the string of whatever characters within quotation marks. Literals 'a' and "a" both signify the same string.

let myVar;

console.log(Math.pow(3,2) === 3 ** 2); // logs: true
console.log(myVar = 2 - 5); // logs: -3
console.log(-myVar); // logs: 3
console.log(--3); // SyntaxError: invalid increment/decrement operand. // Assigning a value to a value is not possible
console.log(-(-3)); // logs: 3
console.log(7--3); // SyntaxError: invalid increment/decrement operand.
console.log(7-(-3) === 10); // logs: true	
console.log(2/0 === Infinity); // logs: true	
console.log(9**(1/2)); // logs: 3 // √9 = 3.
console.log(9**(1/2) === Math.sqrt(9)); // logs: true

console.log("Hello" + " you!"); // logs: "Hello you!"
let str = "Hello";
console.log(str += " you!"); // logs: "Hello you!"
console.log(str += " How ya doin'?"); // logs: "Hello you! How ya doin'?"

console.log(2 + 3); // logs: 5
console.log("2" + 3); // logs: "23" // string concatenation

BTW: The addition operator concatenates strings if at least one of both operands is a string.

console.log(+-3); // logs: -3.
console.log(+3); // logs: 3.
console.log(++3); // logs: SyntaxError: invalid increment/decrement operand.

console.log(+"3"); // logs: 3.
console.log(+true); // logs: 1.
console.log(+false); // logs: 0.

console.log(+"2" + 3); // logs: 5 

let x = 3,
    y = 11,
    z = true;

console.log( z && (y > 10) ); // logs: true // ⇐ true && true
console.log( (x !== 4) && (!(y === 11)) ); // logs: false // ⇐ true && false	
console.log( (x >= 3) || (y === 5) ); // logs: true // ⇐ true || false
console.log( (x === 5) || (y === 5) ); // logs: false // ⇐ false || false
console.log( !(x !== y) ); // logs: false // ⇐ not true

// &&: Return expr1 if expr1 can be converted to false; otherwise, return expr2.
function logicalAND(expr1, expr2) {
  if (!expr1) { return expr1; }
  else { return expr2; }
}

// ||: Return expr1 if expr1 can be converted to true; otherwise, return expr2. 
function logicalOR(expr1, expr2) {
  if (expr1) { return expr1; }
  else { return expr2; }
}

console.log( logicalAND("2" == 2, '7' >= 7) ); // logs: true // Same as: ("2" == 2) && ('7' >= 7).
console.log( logicalOR(2 === 3, 'John') ); // logs: "John" // Same as: 2 === 3 || 'John'.
console.log( logicalOR('', 'Jane') ); // logs: "Jane" // Same as: "" || 'Jane'. "" is a falsy value.	
console.log( logicalOR('John', 'Jane') ); // logs: "John" // Same as: 'John' || 'Jane'. 'John' is a truthy value.
console.log( logicalAND(0, 2 === 2) ); // logs: 0 // Same as: 0 && 2 === 2. 0 is a falsy value. 
console.log( logicalOR(1, false) ); // logs: 1 // Same as: 1 || false. 1 is a truthy value.

// ??: Return expr1 if expr1 is NOT null or undefined; otherwise, return expr2.
function nullishCoalescing(expr1, expr2) {
  if (expr1 != null) { return expr1; }
  else { return expr2; }
}

console.log( nullishCoalescing(null, 'Hello') ); // logs: "Hello" // Same as: null ?? 'Hello'.
console.log( nullishCoalescing(undefined, 'Hello') ); // logs: "Hello" // Same as: undefined ?? 'Hello'.
console.log( nullishCoalescing(false, 'Hello') ); // logs: false // Same as: false ?? 'Hello'.
console.log( nullishCoalescing("", 'Hello') ); // logs: "" // Same as: "" ?? 'Hello'.

let updateText, updateNumber, currentText, currentNumber;
const defaultText = "John/Jane Doe",
      defaultNumber = 1;

updateText = null;
currentText = updateText || defaultText;
console.log(currentText); // logs: "John/Jane Doe"

updateNumber = 2;
currentNumber = updateNumber || defaultNumber;
console.log(currentNumber); // logs: 2

// 0 may be a valid value in this case, but 0 is falsy and thus defaultNumber is assigned  
updateNumber = 0;
currentNumber = updateNumber || defaultNumber;
console.log(currentNumber); // logs: 1

// The nullish coalescing operator avoids the above pitfall
updateNumber = 0;
currentNumber = updateNumber ?? defaultNumber;
console.log(currentNumber); // logs: 0

updateText = "";
currentText = updateText ?? defaultText;
console.log(currentText); // logs: "" // it does NOT log defaultText!

let a = 1, b = "hello";
console.log(a ||= b); // logs: 1 // logs the return value of a || b.

let currentNumber;
const defaultNumber = 10;

currentNumber = 0; // is falsy
console.log(currentNumber ||= defaultNumber); // logs: 10 // currentNumber was assigned the value of defaultNumber

currentNumber = 0; // is NOT nullish
console.log(currentNumber ??= defaultNumber); // logs: 0 // no assignment occurred

<body>

<label>Your name: <input id="inputName" type="text" /></label>
<button id="myButton">OK</button>
<p id="greeting">Hello <span>You</span>!</p>

<script>
  'use strict';
  const inputName = document.querySelector('#inputName'); // inputName.value will be the STRING that the user typed in the input field (i.e. the name).
  document.querySelector('#myButton').addEventListener('click', function(){
    inputName.value ||= 'John/Jane Doe'; // if no name is filled in (empty string), inputName.value gets reassigned the default value "John/Jane Doe". 
    document.querySelector('#greeting > span').textContent = inputName.value;	
  });
</script>
	
</body>