Lesson 3 of 30

JavaScript Operators

Performing Operations

Operators are used to perform operations on variables and values.

JavaScript has arithmetic, assignment, comparison, logical, and other operators.

Example 
// Arithmetic Operators
let sum = 10 + 5;        // 15
let diff = 10 - 5;       // 5
let product = 10 * 5;    // 50
let quotient = 10 / 5;   // 2
let remainder = 10 % 3;  // 1
let power = 2 ** 3;      // 8

// Assignment Operators
let x = 10;
x += 5;   // x = x + 5 (15)
x -= 3;   // x = x - 3 (12)
x *= 2;   // x = x * 2 (24)
x /= 4;   // x = x / 4 (6)

// Comparison Operators
10 == '10'   // true (loose equality)
10 === '10'  // false (strict equality)
10 != '5'    // true
10 !== '10'  // true
10 > 5       // true
10 < 5       // false
10 >= 10     // true

// Logical Operators
true && false  // false (AND)
true || false  // true (OR)
!true          // false (NOT)
  • + - Addition
  • - - Subtraction
  • * - Multiplication
  • / - Division
  • % - Modulus (remainder)
  • ** - Exponentiation
  • == - Loose equality
  • === - Strict equality (recommended)
  • != - Not equal
  • !== - Strictly not equal
  • && - Logical AND
  • || - Logical OR
  • ! - Logical NOT
Try Operators
HTML 
<div class="calculator">
  <input type="number" id="num1" value="10" placeholder="Number 1">
  <input type="number" id="num2" value="5" placeholder="Number 2">
  <button onclick="calculate()">Calculate</button>
  <div id="results"></div>
</div>
CSS 
.calculator { padding: 20px; background: #f0f0f0; border-radius: 8px; }
input { padding: 10px; margin: 5px; border: 1px solid #ddd; border-radius: 4px; width: 100px; }
button { padding: 10px 20px; background: #d1039e; color: white; border: none; border-radius: 5px; cursor: pointer; margin: 10px 0; }
#results { margin-top: 15px; padding: 15px; background: white; border-radius: 5px; }
JavaScript 
function calculate() {
  let num1 = parseFloat(document.getElementById('num1').value);
  let num2 = parseFloat(document.getElementById('num2').value);
  
  let results = `
    <strong>Arithmetic Operations:</strong><br>
    ${num1} + ${num2} = ${num1 + num2}<br>
    ${num1} - ${num2} = ${num1 - num2}<br>
    ${num1} × ${num2} = ${num1 * num2}<br>
    ${num1} ÷ ${num2} = ${num1 / num2}<br>
    ${num1} % ${num2} = ${num1 % num2}<br>
    ${num1} ** ${num2} = ${num1 ** num2}<br>
    <br>
    <strong>Comparison:</strong><br>
    ${num1} > ${num2}: ${num1 > num2}<br>
    ${num1} < ${num2}: ${num1 < num2}<br>
    ${num1} === ${num2}: ${num1 === num2}
  `;
  
  document.getElementById('results').innerHTML = results;
}
Notes
  • Always use === instead of == to avoid type coercion issues!