-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
FX
authored
Aug 8, 2024
1 parent
7b6b0f8
commit 28e016e
Showing
1 changed file
with
368 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,368 @@ | ||
JavaScript operators are special symbols used to perform operations on operands (values and variables). Here's an overview of the different types of JavaScript operators, along with examples for each: | ||
|
||
### 1. **Arithmetic Operators** | ||
These operators perform basic arithmetic operations. | ||
|
||
- **Addition (`+`)** | ||
```javascript | ||
let x = 5 + 3; // x = 8 | ||
``` | ||
|
||
- **Subtraction (`-`)** | ||
```javascript | ||
let x = 5 - 3; // x = 2 | ||
``` | ||
|
||
- **Multiplication (`*`)** | ||
```javascript | ||
let x = 5 * 3; // x = 15 | ||
``` | ||
|
||
- **Division (`/`)** | ||
```javascript | ||
let x = 15 / 3; // x = 5 | ||
``` | ||
|
||
- **Modulus (`%`)** (remainder of division) | ||
```javascript | ||
let x = 7 % 3; // x = 1 | ||
``` | ||
|
||
- **Exponentiation (`**`)** | ||
```javascript | ||
let x = 2 ** 3; // x = 8 (2 raised to the power of 3) | ||
``` | ||
|
||
- **Increment (`++`)** (increases value by 1) | ||
```javascript | ||
let x = 5; | ||
x++; // x = 6 | ||
``` | ||
|
||
- **Decrement (`--`)** (decreases value by 1) | ||
```javascript | ||
let x = 5; | ||
x--; // x = 4 | ||
``` | ||
|
||
### 2. **Assignment Operators** | ||
These operators assign values to variables. | ||
|
||
- **Assignment (`=`)** | ||
```javascript | ||
let x = 10; // x is assigned the value 10 | ||
``` | ||
|
||
- **Addition Assignment (`+=`)** | ||
```javascript | ||
let x = 5; | ||
x += 3; // x = 8 (same as x = x + 3) | ||
``` | ||
|
||
- **Subtraction Assignment (`-=`)** | ||
```javascript | ||
let x = 5; | ||
x -= 3; // x = 2 (same as x = x - 3) | ||
``` | ||
|
||
- **Multiplication Assignment (`*=`)** | ||
```javascript | ||
let x = 5; | ||
x *= 3; // x = 15 (same as x = x * 3) | ||
``` | ||
|
||
- **Division Assignment (`/=`)** | ||
```javascript | ||
let x = 15; | ||
x /= 3; // x = 5 (same as x = x / 3) | ||
``` | ||
|
||
- **Modulus Assignment (`%=`)** | ||
```javascript | ||
let x = 7; | ||
x %= 3; // x = 1 (same as x = x % 3) | ||
``` | ||
|
||
- **Exponentiation Assignment (`**=`)** | ||
```javascript | ||
let x = 2; | ||
x **= 3; // x = 8 (same as x = x ** 3) | ||
``` | ||
|
||
### 3. **Comparison Operators** | ||
These operators compare two values and return a boolean (`true` or `false`). | ||
|
||
- **Equal (`==`)** | ||
```javascript | ||
5 == "5"; // true (checks value equality, performs type coercion) | ||
``` | ||
|
||
- **Strict Equal (`===`)** | ||
```javascript | ||
5 === "5"; // false (checks both value and type equality) | ||
``` | ||
|
||
- **Not Equal (`!=`)** | ||
```javascript | ||
5 != "5"; // false (checks value inequality, performs type coercion) | ||
``` | ||
|
||
- **Strict Not Equal (`!==`)** | ||
```javascript | ||
5 !== "5"; // true (checks both value and type inequality) | ||
``` | ||
|
||
- **Greater Than (`>`)** | ||
```javascript | ||
5 > 3; // true | ||
``` | ||
|
||
- **Less Than (`<`)** | ||
```javascript | ||
5 < 3; // false | ||
``` | ||
|
||
- **Greater Than or Equal (`>=`)** | ||
```javascript | ||
5 >= 5; // true | ||
``` | ||
|
||
- **Less Than or Equal (`<=`)** | ||
```javascript | ||
5 <= 5; // true | ||
``` | ||
|
||
### 4. **Logical Operators** | ||
These operators are used to combine conditional statements. | ||
|
||
- **Logical AND (`&&`)** | ||
```javascript | ||
true && false; // false | ||
``` | ||
|
||
- **Logical OR (`||`)** | ||
```javascript | ||
true || false; // true | ||
``` | ||
|
||
- **Logical NOT (`!`)** | ||
```javascript | ||
!true; // false | ||
``` | ||
|
||
### 5. **Bitwise Operators** | ||
These operators work on binary representations of numbers. | ||
|
||
- **AND (`&`)** | ||
```javascript | ||
5 & 1; // 1 (0101 & 0001 = 0001) | ||
``` | ||
|
||
- **OR (`|`)** | ||
```javascript | ||
5 | 1; // 5 (0101 | 0001 = 0101) | ||
``` | ||
|
||
- **XOR (`^`)** | ||
```javascript | ||
5 ^ 1; // 4 (0101 ^ 0001 = 0100) | ||
``` | ||
|
||
- **NOT (`~`)** | ||
```javascript | ||
~5; // -6 (inverts all the bits) | ||
``` | ||
|
||
- **Left Shift (`<<`)** | ||
```javascript | ||
5 << 1; // 10 (0101 << 1 = 1010) | ||
``` | ||
|
||
- **Right Shift (`>>`)** | ||
```javascript | ||
5 >> 1; // 2 (0101 >> 1 = 0010) | ||
``` | ||
|
||
- **Zero-fill Right Shift (`>>>`)** | ||
```javascript | ||
-5 >>> 1; // 2147483645 (shifts bits to the right, filling with zeros) | ||
``` | ||
|
||
### 6. **String Operators** | ||
These operators are used for working with strings. | ||
|
||
- **Concatenation (`+`)** | ||
```javascript | ||
"Hello" + " " + "World"; // "Hello World" | ||
``` | ||
|
||
- **Concatenation Assignment (`+=`)** | ||
```javascript | ||
let greeting = "Hello"; | ||
greeting += " World"; // "Hello World" | ||
``` | ||
|
||
### 7. **Type Operators** | ||
These operators are used to check or manipulate the data type of a variable. | ||
|
||
- **`typeof`** (returns the type of a variable) | ||
```javascript | ||
typeof 42; // "number" | ||
``` | ||
|
||
- **`instanceof`** (checks if an object is an instance of a specific class) | ||
```javascript | ||
let date = new Date(); | ||
date instanceof Date; // true | ||
``` | ||
|
||
### 8. **Unary Operators** | ||
These operators operate on a single operand. | ||
|
||
- **Unary Plus (`+`)** (tries to convert the operand into a number) | ||
```javascript | ||
let x = +"5"; // x = 5 (number) | ||
``` | ||
|
||
- **Unary Negation (`-`)** (negates the value) | ||
```javascript | ||
let x = -5; // x = -5 | ||
``` | ||
|
||
- **Logical NOT (`!`)** (inverts the boolean value) | ||
```javascript | ||
let isTrue = !false; // isTrue = true | ||
``` | ||
|
||
- **Increment (`++`)** (increases value by 1) | ||
```javascript | ||
let x = 5; | ||
x++; // x = 6 | ||
``` | ||
|
||
- **Decrement (`--`)** (decreases value by 1) | ||
```javascript | ||
let x = 5; | ||
x--; // x = 4 | ||
``` | ||
|
||
### 9. **Ternary (Conditional) Operator** | ||
This is the only operator that takes three operands and is used for inline conditional expressions. | ||
|
||
- **Syntax:** | ||
```javascript | ||
condition ? expression1 : expression2 | ||
``` | ||
- **Example:** | ||
```javascript | ||
let age = 18; | ||
let canVote = age >= 18 ? "Yes" : "No"; // canVote = "Yes" | ||
``` | ||
|
||
### 10. **Comma Operator (`,`)** | ||
This operator evaluates each of its operands (from left to right) and returns the value of the last operand. | ||
|
||
- **Example:** | ||
```javascript | ||
let x = (1 + 2, 3 + 4); | ||
console.log(x); // x = 7 (the result of 3 + 4) | ||
``` | ||
|
||
### 11. **Spread and Rest Operators (`...`)** | ||
These operators are used to expand or collect elements. | ||
|
||
- **Spread in Function Calls:** | ||
```javascript | ||
let numbers = [1, 2, 3]; | ||
console.log(...numbers); // Equivalent to console.log(1, 2, 3) | ||
``` | ||
|
||
- **Rest in Function Parameters:** | ||
```javascript | ||
function sum(...args) { | ||
return args.reduce((a, b) => a + b, 0); | ||
} | ||
sum(1, 2, 3); // 6 | ||
``` | ||
|
||
### 12. **Destructuring Assignment Operator** | ||
|
||
Destructuring allows for extracting values from arrays or objects and assigning them to variables in a more concise manner. | ||
|
||
- **Array Destructuring:** | ||
```javascript | ||
let [a, b] = [10, 20]; | ||
console.log(a); // 10 | ||
console.log(b); // 20 | ||
``` | ||
|
||
- **Object Destructuring:** | ||
```javascript | ||
let { name, age } = { name: "Alice", age: 25 }; | ||
console.log(name); // "Alice" | ||
console.log(age); // 25 | ||
``` | ||
|
||
### 13. **Optional Chaining Operator (`?.`)** | ||
|
||
This operator allows safe access to deeply nested properties without explicitly checking if each reference in the chain is null or undefined. | ||
|
||
- **Example:** | ||
```javascript | ||
let user = { name: "John", address: { city: "New York" } }; | ||
let city = user?.address?.city; | ||
console.log(city); // "New York" | ||
``` | ||
|
||
- **If any part of the chain is null or undefined:** | ||
```javascript | ||
let user = { name: "John" }; | ||
let city = user?.address?.city; | ||
console.log(city); // undefined | ||
``` | ||
|
||
### 14. **Nullish Coalescing Operator (`??`)** | ||
|
||
This operator returns the right-hand operand when the left-hand operand is `null` or `undefined`, otherwise it returns the left-hand operand. | ||
|
||
- **Example:** | ||
```javascript | ||
let name = null; | ||
let defaultName = name ?? "Guest"; | ||
console.log(defaultName); // "Guest" | ||
``` | ||
|
||
- **Comparison with Logical OR (`||`):** | ||
```javascript | ||
let name = ""; | ||
let defaultName = name || "Guest"; | ||
console.log(defaultName); // "Guest" (because an empty string is falsy) | ||
defaultName = name ?? "Guest"; | ||
console.log(defaultName); // "" (because an empty string is not null or undefined) | ||
operators, each serving a specific purpose in manipulating and working with data. Here's a summary of what we've covered: | ||
1. **Arithmetic Operators**: Perform basic mathematical operations. | ||
2. **Assignment Operators**: Assign values to variables. | ||
3. **Comparison Operators**: Compare two values and return a boolean. | ||
4. **Logical Operators**: Combine or invert boolean values. | ||
5. **Bitwise Operators**: Work with binary representations of numbers. | ||
6. **String Operators**: Operate on strings, mainly for concatenation. | ||
7. **Type Operators**: Check or manipulate the type of data. | ||
8. **Unary Operators**: Operate on a single operand to perform operations like negation, increment, etc. | ||
9. **Ternary (Conditional) Operator**: Provide a concise way to evaluate conditions. | ||
10. **Comma Operator**: Evaluate multiple expressions and return the result of the last one. | ||
11. **Spread and Rest Operators**: Expand or collect elements in arrays or functions. | ||
12. **Destructuring Assignment Operator**: Extract values from arrays or objects. | ||
13. **Optional Chaining Operator (`?.`)**: Safely access nested properties. | ||
14. **Nullish Coalescing Operator (`??`)**: Provide a default value if the left operand is null or undefined. | ||
15. **Delete Operator**: Remove a property from an object. | ||
16. **Void Operator**: Execute an expression and return `undefined`. | ||
17. **Typeof Operator**: Return the type of a variable. | ||
18. **In Operator**: Check if a property exists in an object or its prototype chain. | ||
19. **Instanceof Operator**: Check if an object is an instance of a specific class. | ||
20. **Await Operator**: Wait for a Promise to resolve within an `async` function. | ||
21. **Comma Operator**: Evaluate multiple expressions and return the result of the last one. | ||
22. **Group Operator**: Control the order of evaluation in expressions. | ||
Understanding how these operators work and where to apply them will allow you to write more efficient and expressive JavaScript code. Each operator serves a different purpose, and they can often be combined to perform more complex operations. |