JavaScript, the world’s most popular programming language, is the backbone of many web applications. One of the fundamental concepts in JavaScript is the use of operators.
Understanding these JavaScript operators is crucial for writing clean, concise, and optimized code.
In this article, we’ll explore the essential JavaScript operators used by professionals to enhance their programming skills.
Introduction to JavaScript Operators
JavaScript operators are symbols used to perform actions on variables and values. They enable developers to carry out mathematical calculations, make comparisons, perform logical operations, and assign values to variables.
In the realm of JavaScript, these operators play a vital role in both governing program flow and manipulating data effectively.
Types of JavaScript Operators
JavaScript offers a variety of operators, each serving a unique purpose. They can be broadly categorized into:
- Arithmetic Operators: Used for mathematical calculations.
- Comparison Operators: Used to compare two values.
- Logical Operators: Used to determine the logic between variables or values.
- Assignment Operators: Used to assign values to variables.
- Bitwise Operators: Used for manipulating data at the bit level.
- Special Operators: Include operators like the ternary operator, typeof, and more.
Arithmetic Operators:
Arithmetic operators in JavaScript are employed to execute fundamental mathematical computations. They are invaluable for manipulating numerical data and carrying out complex arithmetic operations in programs.
For example, calculating totals, averages, or applying formulas to numerical data are common professional use cases for arithmetic operators.
Operator | Name | Example |
+ | Addition | x + y |
– | Subtraction | x – y |
* | Multiplication | x * y |
/ | Division | x / y |
% | Modulus or Remainder | x % y |
++ | Increment (increments by 1) | ++x or x++ |
— | Decrement (decrements by 1) | –x or x– |
** | Exponentiation (Power) | x ** y |
let x = 4;
let y = 3;
// addition
console.log('x + y = ', x + y); // 7
// subtraction
console.log('x - y = ', x - y); // 1
// multiplication
console.log('x * y = ', x * y); // 12
// division
console.log('x / y = ', x / y); // 1.33333334
// remainder
console.log('x % y = ', x % y); // 1
// increment
console.log('++x = ', ++x); // x is now 5
console.log('x++ = ', x++); // prints 5 and then increased to 6
console.log('x = ', x); // 6
// decrement
console.log('--x = ', --x); // x is now 3
console.log('x-- = ', x--); // prints 3 and then decreased to 2
console.log('x = ', x); // 2
//exponentiation
console.log('x ** y =', x ** y); //64
Assignment Operators:
In JavaScript, assignment operators serve the purpose of assigning values to variables. The essential assignment operator in JavaScript is denoted by the equal sign (=).
Empowering developers to modify variable values by incorporating their existing content. Professional developers leverage these JavaScript operators to efficiently manage and update variables throughout their code.
Operator | Name | Same As |
= | Assignment Operator | x=2 // 2 |
+= | Addition Assignment | x += 3 // x = x + 3 |
-= | Subtraction Assignment | x -= 4 // x = x – 4 |
*= | Multiplication Assignment | x *= 3 // x = x * 3 |
/= | Division Assignment | x /= 5 // x = x / 5 |
%= | Remainder Assignment | x %= 3 // x = x % 3 |
**= | Exponentiation Assignment | x **= 2 // x = x ** 2 |
let number = 5;
number += 3; // number will be 8
Comparison Operators:
Comparison operators are essential for making decisions and performing logical checks in JavaScript. These JavaScript operators enable developers to compare two values and determine the truthiness or falseness of a given condition.
These JavaScript operators find extensive usage within conditional statements and loops, enabling developers to manage the program’s flow based on specific conditions.
Operator | Description | Example |
== | Equal to: return true for equality of two values. | x == y |
!= | Not equal to: return true if two values in JavaScript are not equal to each other. | x != y |
=== | Strict equal to: return true if operands are equal and of identical data type. | x === y |
!== | Strict not equal to: return true if the operands are either unequal or of different types. | x !== y |
> | Greater than: true if the left value is bigger than the right value in JavaScript. | x > y |
>= | greater than or equal to: true if left value is larger than or == to the right value | x >= y |
< | Less than: true if the left value is smaller than the right. | x < y |
<= | Less than or equal to: true if left value is smaller than or == to the right value | x <= y |
// equal operator
console.log(1 == 1); // true
console.log(1 == '1'); // true
// not equal operator
console.log(2 != 5); // true
console.log('johan' != 'Johan'); // true
// strict equal operator
console.log(5 === 5); // true
console.log(5 === '5'); // false
// strict not equal operator
console.log(3 !== '3'); // true
console.log(3 !== 3); // false
// greater than operator
console.log(5 > 2 ); // true
console.log(3 > 5); // false
// greater than or equal to operator
console.log(5 >= 2); // 5 is greater than 2 so true
console.log(5 >= 5); // 5 is equal to 5 so true
// less than operator
console.log(3 < 6 ); // true
console.log(6 < 3); // false
// less than or equal to operator
console.log(2 <= 4) // 2 is less than 4 so true
console.log(4 <= 4) // 4 is equal to 4 so true
Logical Operators:
Logical operators are employed to carry out logical operations specifically on Boolean values. These JavaScript operators are crucial for making complex decisions and controlling the flow of a program based on multiple conditions.
They are often used in combination with comparison operators to create powerful logical expressions.
Operators | Description | Example |
&& | And operator: return true if both values are true; otherwise, it results in false. | x && y |
| | | Or operator: returns true if at least one operand is true; false if both are false. | x | | y |
! | Not operator: true if the value is false | x ! y |
// logical AND
console.log(true && true); // return true
console.log(true && false); // return false
// logical OR
console.log(true || false); // return true
// logical NOT
console.log(!true); // return false
Unary Operators:
Unary operators are designed to work with a solitary operand and are frequently employed for tasks such as incrementing (++), decrementing (–), or negating a value (-).
These JavaScript operators are employed in various scenarios, such as iterating through arrays or counting occurrences within a loop.
Operator | Name | Example |
++ | Increment (increments by 1) | ++x or x++ |
— | Decrement (decrements by 1) | –x or x– |
// increment operators
let count = 10;
count++; // count will be 11
// decrement operator
let count = 2;
count--; // count will be 1
Bitwise Operators:
Bitwise operators in JavaScript operators are used to manipulate individual bits in numeric values, performing operations like bitwise AND, OR, XOR, left shift, and right shift.
operator | Description |
& | Bitwise AND |
| | Bitwise OR |
^ | Bitwise XOR |
~ | Bitwise NOT |
<< | left shift |
>> | Right shift |
>>> | Zero fil right shift |
// Bitwise Addition (Coadding)
let a = 5; // Binary: 0101
let b = 3; // Binary: 0011
let result = a | b; // Bitwise OR operator
console.log(result); // Output: 7 (Binary: 0111)
Other Operators:
Below is an inventory of additional operators accessible in JavaScript. Subsequent tutorials will delve into these operators, expanding your understanding of their functionality.
Operators | Description | Example |
, | operator in JavaScript separates expressions and statements within a code block. | let x = (1, 2, 3) // 3 |
?: | The ternary operator in JavaScript, denoted by “?:” is used for concise conditional expressions. | (4 > 3) ? ‘success’ : ‘error’ ; // “success” |
delete | In JavaScript, the “delete” operator allows dynamic removal of object properties. | delete x |
typeof | In JavaScript, the “typeof” operator identifies the data typeof a given value. | typeof 5; // number |
void | The “void” operator in JavaScript discards an expression’s return value, producing “undefined.” | void(x) |
in | The “in” operator in JavaScript verifies the presence of a property within an object. | prop in object |
instanceof | In JavaScript, the “instanceof” operator verifies if a object is created from a specific constructor. | object instanceof object_type |
Conclusion:
JavaScript operators are powerful tools that allow developers to perform various operations and manipulate data effectively.
From simple arithmetic calculations to complex logical evaluations, operators are integral to writing efficient and concise JavaScript code.
As a professional developer, mastering these JavaScript operators will enable you to create robust and functional applications with ease. So, keep practicing and experimenting with different operators to take your JavaScript skills to the next level.