Unary and Binary Operators in JavaScript
Operators are JavaScript symbols that manipulate variables and values. Operands are the variables or values that operators act on. Depending on how many operands they need, operators can be categorised. One ternary operator (three operands), binary operators (two operands), and unary operators (one operand) are the three primary categories.
Unary Operators
One operand is used by unary operators. Since they usually appear before or after the single operand, they are simple to identify.
Typical unary operators consist of:
- Increment (++) and Decrement (–): The operators increment (++) and decrement (–) add or subtract one from their operand, respectively. An lvalue, such as a variable, array element, or object attribute, must be the operand.
- The formula for x++ is x = x + 1.
- One way to interpret x– is as x = x – 1.
- The prefix (++x, –x) and postfix (x++, x–) versions are different.
- Prefix operators: Before the value is utilised in the expression, prefix operators (such as ++x) increment or decrement the operand. The operator then evaluates to the new, incremented or decremented value.
- Postfix operators: After the value has been employed in the expression, postfix operators (such as x++) increment or decrement the operand before evaluating to the initial, unincremented/undecremented value.
- Unary Plus (+): The operator Unary Plus (+) turns its operand into a number. If the operand is already a number, it has no effect on the value.
- Unary Negation (-): This operator changes the sign of its operand after converting it to a number.
- Logical NOT (!): This operator negates its operand after converting it to a boolean value. !operand returns false if the operand is “truthy”. !operand returns true if the operand is “falsy”.
- Bitwise NOT (~): This operator flips the operand’s bits.
- typeof: This operator establishes a value’s type. One operand is required.
- delete: This operator removes an element from an array or a property from an object.
- void: The return value of an expression is discarded by this operator.
// Unary Plus (+) and Unary Negation (-)
// These operators convert the operand to a number if necessary
// Unary plus does not affect numbers
// Unary negation changes the sign after conversion
let num = 10;
let strNum = “5”;
let strNonNum = “hello”;
let boolTrue = true;
console.log(+num); // Output: 10 (No change to number)
console.log(-num); // Output: -10 (Negates the number)
console.log(+strNum); // Output: 5 (Converts string “5” to number 5)
console.log(-strNum); // Output: -5 (Converts string “5” to number 5, then negates)
console.log(+strNonNum); // Output: NaN (Cannot convert “hello” to a number)
console.log(-strNonNum); // Output: NaN (Cannot convert “hello” to a number, then negates NaN)
console.log(+boolTrue); // Output: 1 (Converts boolean true to number 1)
console.log(-boolTrue); // Output: -1 (Converts boolean true to number 1, then negates)
// Increment (++) and Decrement (–)
// These operators add or subtract 1 from the operand
// They can only be applied to variables, object properties, or array elements (lvalues)
let counter = 5;
// Postfix: Returns the value *before* incrementing
console.log(counter++); // Output: 5
console.log(counter); // Output: 6
let anotherCounter = 5;
// Prefix: Returns the value *after* incrementing
console.log(++anotherCounter); // Output: 6
console.log(anotherCounter); // Output: 6
let thirdCounter = 10;
// Postfix decrement: Returns the value *before* decrementing
console.log(thirdCounter–); // Output: 10
console.log(thirdCounter); // Output: 9
let fourthCounter = 10;
// Prefix decrement: Returns the value *after* decrementing
console.log(–fourthCounter); // Output: 9
console.log(fourthCounter); // Output: 9
// Logical NOT (!)
// This operator converts the operand to a boolean value and returns the inverse
// It returns true if the operand is falsy, and false if it is truthy
// Falsy values include false, 0, “”, null, undefined, NaN . Most other values are truthy
console.log(!true); // Output: false
console.log(!false); // Output: true
console.log(!0); // Output: true (0 is falsy)
console.log(!””); // Output: true (“” is falsy)
console.log(!null); // Output: true (null is falsy)
console.log(!undefined); // Output: true (undefined is falsy)
console.log(!NaN); // Output: true (NaN is falsy)
console.log(!”hello”); // Output: false (“hello” is truthy)
console.log(!!0); // Output: false (Double NOT converts to boolean value)
// Bitwise NOT (~)
// This operator flips all the bits in the binary representation of the operand
// It effectively results in -(x + 1) for any integer x
// It works with 32-bit signed integers [74, 82, 84, 85, 89
console.log(~5); // Output: -6 (Binary of 5 is …0101, flipped is …1010, which is -6 in 32-bit signed integer)
console.log(~-3); // Output: 2 (Binary of -3 is …1101, flipped is …0010, which is 2)
console.log(~0); // Output: -1
Binary Operators
Two operands are needed for binary operators. This group includes the majority of JavaScript operators.
Typical binary operators consist of:
- Arithmetic Operators: Execute mathematical computations using arithmetic operators.
- Addition (+).
- Subtracting (-).
- Multiplication (*).
- Division (/).
- Exponentiation (**).
- This is the remaining modulus (%).
- Assignment Operators: Assign a value to a variable using assignment operators. = is the fundamental assignment operator. Compound assignment operators, such as +=, -=, *=, /=, %=, <<=, >>=, >>>=, &=, ^=, |=, combine arithmetic or bitwise operations with assignment.
- Comparison/Relational Operators: Return a true or false Boolean value:
- The value is equal (==).
- Value not equal (!=).
- Equality of type and value (===) is known as strict equality.
- Not equal value or not equal type is known as strict inequality (!==).
- More than (>).
- Not as much as (<).
- >= means greater than or equal to.
- Equal to or less than (<=).
- Logical Operators: Boolean values can be combined or inverted using logical operators. They frequently appear in conditional sentences.
- logical AND (&&). If both operands are true, it returns true. supports the evaluation of short circuits.
- OR logically (||). If either operand is true, it returns true. supports the evaluation of short circuits.
- Bitwise Operators: Operate on the binary representation of numbers using bitwise operators. These consist of the following: Left Shift (<<), Signed Right Shift (>>), Zero-fill Right Shift (>>>), OR (|), XOR (^), and Bitwise AND (&). Standard web development uses them less frequently.
- Comma Operator (,): The value of the second operand is returned after evaluating both operands using the comma operator (,).
- in: Verifies whether an object has a property.
- instanceof: Determines if an object belongs to a particular class.
Because operators are key building blocks used to manipulate values, conduct computations, and make choices, it is essential to understand the various types of operators and the amount of operands they expect while writing JavaScript code.