Understanding Operators in JavaScript
Operators are special symbols in JavaScript that perform operations on values. They help you perform calculations, compare values, and make logical decisions. Here’s a look at the main types of operators in JavaScript, including some additional ones:
1. Arithmetic Operators
Arithmetic operators are used to perform basic mathematical operations.
-
Addition (
+
): Adds two values.// Example: let sum = 5 + 3; console.log(sum); // Outputs: 8
-
Subtraction (
-
): Subtracts one value from another.// Example: let difference = 10 - 4; console.log(difference); // Outputs: 6
-
Multiplication (
*
): Multiplies two values.// Example: let product = 7 * 6; console.log(product); // Outputs: 42
-
Division (
/
): Divides one value by another.// Example: let quotient = 20 / 4; console.log(quotient); // Outputs: 5
-
Modulus (
%
): Finds the remainder after division.// Example: let remainder = 17 % 3; console.log(remainder); // Outputs: 2
2. Comparison Operators
Comparison operators are used to compare two values and determine their relationship.
-
Equal to (
==
): Checks if two values are equal, with type conversion.// Example: let isEqual = (5 == '5'); console.log(isEqual); // Outputs: true
-
Strict Equal to (
===
): Checks if two values are equal without type conversion.// Example: let isStrictEqual = (5 === '5'); console.log(isStrictEqual); // Outputs: false
-
Not Equal to (
!=
): Checks if two values are not equal, with type conversion.// Example: let isNotEqual = (10 != '10'); console.log(isNotEqual); // Outputs: false
-
Strict Not Equal to (
!==
): Checks if two values are not equal without type conversion.// Example: let isStrictNotEqual = (10 !== '10'); console.log(isStrictNotEqual); // Outputs: true
-
Less Than (
<
): Checks if one value is less than another.// Example: let isLessThan = (3 < 7); console.log(isLessThan); // Outputs: true
-
Greater Than (
>
): Checks if one value is greater than another.// Example: let isGreaterThan = (8 > 5); console.log(isGreaterThan); // Outputs: true
-
Less Than or Equal to (
<=
): Checks if one value is less than or equal to another.// Example: let isLessThanOrEqual = (4 <= 4); console.log(isLessThanOrEqual); // Outputs: true
-
Greater Than or Equal to (
>=
): Checks if one value is greater than or equal to another.// Example: let isGreaterThanOrEqual = (9 >= 6); console.log(isGreaterThanOrEqual); // Outputs: true
3. Logical Operators
Logical operators are used to combine or invert conditions.
-
Logical AND (
&&
): Returnstrue
if both conditions are true.// Example: let isTrue = (true && false); console.log(isTrue); // Outputs: false
-
Logical OR (
||
): Returnstrue
if at least one condition is true.// Example: let isTrue = (true || false); console.log(isTrue); // Outputs: true
-
Logical NOT (
!
): Inverts the value of a condition. If the condition istrue
, it becomesfalse
, and vice versa.// Example: let isFalse = !true; console.log(isFalse); // Outputs: false
4. Conditional (Ternary) Operator (?
)
The conditional (ternary) operator is a shorthand way to write an if-else
statement. It evaluates a condition and returns one of two values depending on whether the condition is true or false.
// Example:
let age = 18;
let message = (age >= 18) ? "You are an adult." : "You are a minor.";
console.log(message); // Outputs: "You are an adult."
5. Nullish Coalescing Operator (??)
The nullish coalescing operator returns the right-hand side value when the left-hand side value is null or undefined. It’s useful for providing default values.
// Example:
let userName = null;
let defaultName = "Guest";
let name = userName ?? defaultName;
console.log(name); // Outputs: "Guest"
6. Double Negation (!!)
The double negation operator is used to convert a value to a boolean. It’s a quick way to check if a value is truthy or falsy.
// Example:
let value = "Hello";
let isTruthy = !!value;
console.log(isTruthy); // Outputs: true
7. Assignment Operators
Assignment operators are used to assign values to variables and perform operations in a shorthand manner. Here are the main assignment operators in JavaScript:
-
Assignment (
=
): Assigns a value to a variable.// Example: let x = 10;
Here,
x
is assigned the value10
. -
Addition Assignment (
+=
): Adds a value to a variable and assigns the result.// Example: let x = 10; x += 5; // Equivalent to x = x + 5 console.log(x); // Outputs: 15
-
Subtraction Assignment (
-=
): Subtracts a value from a variable and assigns the result.// Example: let x = 10; x -= 3; // Equivalent to x = x - 3 console.log(x); // Outputs: 7
-
Multiplication Assignment (
*=
): Multiplies a variable by a value and assigns the result.// Example: let x = 10; x *= 2; // Equivalent to x = x * 2 console.log(x); // Outputs: 20
-
Division Assignment (
/=
): Divides a variable by a value and assigns the result.// Example: let x = 10; x /= 2; // Equivalent to x = x / 2 console.log(x); // Outputs: 5
-
Modulus Assignment (
%=
): Applies the modulus operation on a variable and assigns the result.// Example: let x = 10; x %= 3; // Equivalent to x = x % 3 console.log(x); // Outputs: 1
8. Bitwise Operators
Bitwise operators perform operations on the binary representations of numbers. These operators are often used for low-level programming tasks.
-
Bitwise AND (
&
): Performs a bitwise AND operation, which means it compares each bit of two numbers and returns1
if both bits are1
; otherwise, it returns0
. // Example:let result = 5 & 3; // Binary: 0101 & 0011 = 0001 console.log(result); // Outputs: 1
-
Bitwise OR (
|
): Performs a bitwise OR operation, which means it compares each bit of two numbers and returns1
if at least one of the bits is1
; otherwise, it returns0
. // Example:let result = 5 | 3; // Binary: 0101 | 0011 = 0111 console.log(result); // Outputs: 7
-
Bitwise XOR (
^
): Performs a bitwise XOR (exclusive OR) operation, which means it compares each bit of two numbers and returns1
if the bits are different; otherwise, it returns0
. // Example:let result = 5 ^ 3; // Binary: 0101 ^ 0011 = 0110 console.log(result); // Outputs: 6
-
Bitwise NOT (
~
): Performs a bitwise NOT operation, which inverts all the bits of the number. Each1
becomes0
, and each0
becomes1
. // Example:let result = ~5; // Binary: ~0101 = 1010 (in 32-bit signed integer: -6) console.log(result); // Outputs: -6
-
Left Shift (
<<
): Shifts the bits of a number to the left by a specified number of positions. New bits on the right are set to0
. // Example:let result = 5 << 1; // Binary: 0101 << 1 = 1010 console.log(result); // Outputs: 10
-
Right Shift (
>>
): Shifts the bits of a number to the right by a specified number of positions. The sign bit is used to fill the new bits on the left (arithmetic shift). // Example:let result = 5 >> 1; // Binary: 0101 >> 1 = 0010 console.log(result); // Outputs: 2
-
Unsigned Right Shift (
>>>
): Shifts the bits of a number to the right by a specified number of positions and fills the new bits on the left with0
(logical shift). This is useful for handling unsigned integers. // Example:let result = -5 >>> 1; // Binary: 1111111111111111111111111111011 >>> 1 = 0111111111111111111111111111101 console.log(result); // Outputs: 2147483642
Summary
-
Arithmetic Operators: Perform basic math operations like addition, subtraction, multiplication, division, and modulus.
-
Comparison Operators: Compare two values and determine their relationship (e.g., equal to, greater than, less than).
-
Logical Operators: Combine or invert conditions to make complex logical expressions.
-
Conditional (Ternary) Operator (
?
): Provides a shorthand forif-else
statements. -
Nullish Coalescing Operator (
??
): Provides default values fornull
orundefined
. -
Double Negation (
!!
): Converts a value to a boolean.
Understanding these operators will help you write more effective and efficient JavaScript code.