Menu OmegaForms.Net

JavaScript: Operators

In JavaScript, operators are special symbols that perform operations on values and variables, resulting in a single value. They are fundamental building blocks for constructing expressions and controlling the flow of a program. There are several types of operators in JavaScript, each with its specific purpose and functionality.

  1. Arithmetic Operators: These operators perform basic mathematical operations.
  • + (Addition): Adds two numbers or concatenates strings.
  • - (Subtraction): Subtracts the right-hand operand from the left-hand operand.
  • * (Multiplication): Multiplies two numbers.
  • / (Division): Divides the left-hand operand by the right-hand operand.
  • % (Modulus): Returns the remainder of the division of the left-hand operand by the right-hand operand.
  • ** (Exponentiation): Raises the left-hand operand to the power of the right-hand operand.
javascript
let sum = 10 + 20;
let difference = 10 - 20;
let product = 10 * 20;
let quotient = 10 / 20;
let remainder = 10 % 3;
let exponent = 10 ** 2;
  1. Assignment Operators: These operators assign a value to a variable.
  • = (Assignment): Assigns a value to a variable.
  • += (Addition assignment): Adds the right-hand operand to the left-hand operand and assigns the result to the left-hand operand.
  • -= (Subtraction assignment): Subtracts the right-hand operand from the left-hand operand and assigns the result to the left-hand operand.
  • *= (Multiplication assignment): Multiplies the left-hand operand by the right-hand operand and assigns the result to the left-hand operand.
  • /= (Division assignment): Divides the left-hand operand by the right-hand operand and assigns the result to the left-hand operand.
  • %= (Modulus assignment): Takes the modulus of the left-hand operand and the right-hand operand and assigns the result to the left-hand operand.
  • **= (Exponentiation assignment): Raises the left-hand operand to the power of the right-hand operand and assigns the result to the left-hand operand.
javascript
let x = 10;
x += 5; // Same as x = x + 5;
x -= 3; // Same as x = x - 3;
x *= 2; // Same as x = x * 2;
x /= 4; // Same as x = x / 4;
x %= 3; // Same as x = x % 3;
x **= 2; // Same as x = x ** 2;
  1. Comparison Operators: These operators compare two values and return a boolean result (true or false).
  • == (Equality): Returns true if the operands are equal, after performing type coercion if necessary.
  • != (Inequality): Returns true if the operands are not equal, after performing type coercion if necessary.
  • === (Strict equality): Returns true if the operands are equal and of the same type.
  • !== (Strict inequality): Returns true if the operands are not equal or of different types.
  • < (Less than): Returns true if the left-hand operand is less than the right-hand operand.
  • > (Greater than): Returns true if the left-hand operand is greater than the right-hand operand.
  • <= (Less than or equal to): Returns true if the left-hand operand is less than or equal to the right-hand operand.
  • >= (Greater than or equal to): Returns true if the left-hand operand is greater than or equal to the right-hand operand.

javascript
let isEqual = 10 == "10"; // true, because type coercion converts the string "10" to the number 10
let isNotEqual = 10 != "10"; // false
let isStrictEqual = 10 === "10"; // false, because the operands are of different types (number and string)
let isStrictNotEqual = 10 !== "10"; // true
let isLessThan = 10 < 20; // true
let isGreaterThan = 10 > 20; // false
let isLessThanOrEqual = 10 <= 10; // true
let isGreaterThanOrEqual = 10 >= 20; // false
  1. Logical Operators: These operators perform logical operations and return a boolean result (true or false).
  • && (Logical AND): Returns true if both operands are true; otherwise, returns false.
  • || (Logical OR): Returns true if at least one of the operands is true; otherwise, returns false.
  • ! (Logical NOT): Returns true if the operand is false, and false if the operand is true. It negates the truthiness of the operand.
javascript
let andResult = true && false; // false
let orResult = true || false; // true
let notResult = !true; // false
  1. Conditional (Ternary) Operator: This operator is a shorthand for an if-else statement, taking three operands. It returns the value of the second operand if the first operand (the condition) is true, and the value of the third operand if the condition is false.
javascript
let age = 18;
let canVote = age >= 18 ? "Yes" : "No"; // "Yes"
  1. Unary Operators: These operators work with a single operand.
  • + (Unary plus): Tries to convert the operand to a number.
  • - (Unary negation): Tries to convert the operand to a number and negates the result.
  • ++ (Increment): Increases the value of the operand by 1.
  • -- (Decrement): Decreases the value of the operand by 1.
  • typeof: Returns a string representing the data type of the operand.
  • void: Evaluates the expression but returns undefined.
javascript
let num = "10";
let positiveNum = +num; // 10, as a number
let negativeNum = -num; // -10, as a number
let incrementedNum = ++positiveNum; // 11
let decrementedNum = --positiveNum; // 9
let type = typeof num; // "string"
let undefinedResult = void 0; // undefined
  1. Bitwise Operators: These operators work on the binary (bit-level) representation of numbers.
  • & (Bitwise AND)
  • | (Bitwise OR)
  • ^ (Bitwise XOR)
  • ~ (Bitwise NOT)
  • << (Left shift)
  • >> (Signed right shift)
  • >>> (Unsigned right shift)
javascript
let bitwiseAnd = 5 & 3; // 1
let bitwiseOr = 5 | 3; // 7
let bitwiseXor = 5 ^ 3; // 6
let bitwiseNot = ~5; // -6
let leftShift = 5 << 1; // 10
let signedRightShift = -5 >> 1; // -3
let unsignedRightShift = -5 >>> 1; // 2147483645

Understanding and effectively using operators in JavaScript allows you to perform various operations on data, make decisions based on conditions, and control the flow of your programs. Here are some additional operators:

  1. Relational Operators: These operators are used to determine the relationship between two operands, typically within loops and conditional statements.
  • in: Returns true if the specified property is in the specified object.
  • instanceof: Returns true if the specified object is an instance of the specified constructor.
javascript
let cars = { make: "Toyota", model: "Camry" };
let propertyExists = "make" in cars; // true

let arr = [1, 2, 3];
let isArray = arr instanceof Array; // true
  1. Spread Operator (...): This operator is used to expand iterable objects (arrays, strings, etc.) into individual elements or properties. It is commonly used for merging arrays or objects, function argument lists, and other iterable structures.
javascript
let array1 = [1, 2, 3];
let array2 = [4, 5, 6];
let mergedArray = [...array1, ...array2]; // [1, 2, 3, 4, 5, 6]

let str = "Hello";
let charArray = [...str]; // ["H", "e", "l", "l", "o"]

function sum(a, b, c) {
  return a + b + c;
}
let numbers = [1, 2, 3];
let result = sum(...numbers); // 6
  1. Destructuring Assignment: This is a syntax for assigning values from arrays or properties from objects to distinct variables. It allows for more concise and readable code when working with complex data structures.
  • Array Destructuring:
javascript
let rgb = [255, 0, 0];
let [red, green, blue] = rgb;
// red: 255, green: 0, blue: 0
  • Object Destructuring:
javascript
let person = { firstName: "John", lastName: "Doe", age: 30 };
let { firstName, lastName, age } = person;
// firstName: "John", lastName: "Doe", age: 30

These operators are essential tools for working with data and controlling the flow of your JavaScript programs. By mastering their use and understanding their behavior, you can create more efficient, concise, and maintainable code.