7. JavaScript Operators

What you will learn

• Arithmetic, assignment, comparison, and logical operators
• The difference between == and ===
• Operator precedence
• The conditional (ternary) operator

What is an operator?

An operator is a symbol that does something with values, called operands. In 10 + 5, the + is the operator and 10 and 5 are the operands.

Arithmetic operators

<p id="demo"></p>

<script>
  const a = 17;
  const b = 5;
  document.getElementById("demo").innerHTML =
    "a + b = " + (a + b) + "<br>" +
    "a / b = " + (a / b) + "<br>" +
    "a % b = " + (a % b) + " (remainder)<br>" +
    "b ** 2 = " + (b ** 2);
</script>

The remainder operator % is handy for checking even numbers: n % 2 === 0 is true when n is even.

Assignment operators

Shortcuts that change a variable using its own value.

<p id="demo"></p>

<script>
  let x = 10;
  x += 5;   // 15
  x *= 2;   // 30
  x -= 4;   // 26
  x++;      // 27
  document.getElementById("demo").textContent = "x is " + x;
</script>

Comparison operators

Comparisons give a boolean result: true or false.

Always prefer === over ==

<p id="demo"></p>

<script>
  document.getElementById("demo").innerHTML =
    "5 == '5' is " + (5 == "5") + "<br>" +
    "5 === '5' is " + (5 === "5") + "<br>" +
    "5 !== '5' is " + (5 !== "5");
</script>

The loose == converts types first, which produces surprising matches. The strict === compares the type as well, so it is safer and easier to predict.

Logical operators

<p id="demo"></p>

<script>
  const age = 20;
  const hasTicket = false;

  document.getElementById("demo").innerHTML =
    "Adult AND ticket: " + (age >= 18 && hasTicket) + "<br>" +
    "Adult OR ticket: " + (age >= 18 || hasTicket) + "<br>" +
    "NOT ticket: " + (!hasTicket);
</script>

String operator

The + sign also joins strings. If either side is text, the result is text.

The conditional (ternary) operator

A short way to choose between two values:

condition ? valueIfTrue : valueIfFalse

<p id="demo"></p>

<script>
  const age = 16;
  const status = age >= 18 ? "adult" : "minor";
  document.getElementById("demo").textContent = "You are a " + status;
</script>

Operator precedence

When an expression has several operators, JavaScript follows an order, like in maths. Multiplication and division come before addition and subtraction. Use parentheses to make your meaning clear.

<p id="demo"></p>

<script>
  document.getElementById("demo").innerHTML =
    "2 + 3 * 4 = " + (2 + 3 * 4) + "<br>" +
    "(2 + 3) * 4 = " + ((2 + 3) * 4);
</script>

Common mistakes

• Writing = (assign) when you meant === (compare).
• Using == and being surprised by type conversion.
• Forgetting that + joins text when one side is a string.
• Relying on precedence rules instead of adding parentheses.
• Expecting / to give a whole number. 7 / 2 is 3.5.

<p id="demo"></p>

<script>
  const number = 14;
  const result = number % 2 === 0 ? "even" : "odd";
  document.getElementById("demo").textContent = number + " is " + result;
</script>

Summary

• Arithmetic, assignment, comparison, and logical operators cover most needs.
• Use === and !== for comparisons.
• Parentheses make the order of operations clear.