Chapter 3: JavaScript Operators

Akshay Amin
12h
183
0
0

Article

Operators are special symbols or keywords that perform operations on one or more values (called operands) and produce a result. Understanding operators is crucial for performing calculations, making comparisons, and controlling program flow.

3.1 Arithmetic Operators

These operators perform mathematical calculations.

+ (Addition): Adds two numbers. Also concatenates strings.

let sum = 10 + 5; // 15
let greeting = "Hello" + " World"; // "Hello World"

- (Subtraction): Subtracts the right operand from the left.
```
let difference = 10 - 5; // 5
```
* (Multiplication): Multiplies two numbers.
```
let product = 10 * 5; // 50
```
/ (Division): Divides the left operand by the right.
```
let quotient = 10 / 5; // 2
```

% (Modulo/Remainder): Returns the remainder of a division.

let remainder = 10 % 3; // 1 (10 divided by 3 is 3 with a remainder of 1)

** (Exponentiation): Raises the first operand to the power of the second (ES6+).
```
let power = 2 ** 3; // 8 (2 * 2 * 2)
```

3.2 Assignment Operators

These operators assign values to variables.

= (Assignment): Assigns the value of the right operand to the left operand.
```
let x = 10;
```
+= (Addition Assignment): x += y is equivalent to x = x + y.
```
let a = 5;
a += 3; // a is now 8
```
-= (Subtraction Assignment): x -= y is equivalent to x = x - y.
```
let b = 10;
b -= 4; // b is now 6
```
*= (Multiplication Assignment): x *= y is equivalent to x = x * y.
```
let c = 2;
c *= 5; // c is now 10
```
/= (Division Assignment): x /= y is equivalent to x = x / y.
```
let d = 20;
d /= 4; // d is now 5
```
%= (Modulo Assignment): x %= y is equivalent to x = x % y.
```
let e = 17;
e %= 5; // e is now 2
```
**= (Exponentiation Assignment): x **= y is equivalent to x = x ** y.
```
let f = 3;
f **= 2; // f is now 9
```

3.3 Comparison Operators

These operators compare two values and return a Boolean (true or false) result.

== (Loose Equality): Compares values for equality after performing type coercion. Avoid using this due to unpredictable behavior.
```
console.log(10 == "10"); // true (number 10 is coerced to string "10")
console.log(0 == false); // true
```

=== (Strict Equality): Compares values and types for equality. Always prefer this.

console.log(10 === "10"); // false (different types)
console.log(0 === false); // false

!= (Loose Inequality): Returns true if values are not equal after coercion.
```
console.log(10 != "10"); // false
```
!== (Strict Inequality): Returns true if values or types are not equal. Always prefer this.
```
console.log(10 !== "10"); // true
```
> (Greater Than):
```
console.log(10 > 5); // true
```
< (Less Than):
```
console.log(10 < 5); // false
```
>= (Greater Than or Equal To):
```
console.log(10 >= 10); // true
```
<= (Less Than or Equal To):
```
console.log(5 <= 10); // true
```

3.4 Logical Operators

These operators combine Boolean values and return a Boolean result.

&& (Logical AND): Returns true if both operands are true.

console.log(true && true);   // true
console.log(true && false);  // false

|| (Logical OR): Returns true if at least one operand is true.

console.log(true || false);  // true
console.log(false || false); // false

! (Logical NOT): Inverts the Boolean value of the operand.
```
console.log(!true);  // false
console.log(!false); // true
```
Logical operators can also work with non-Boolean values by treating them as "truthy" or "falsy" (e.g., 0, null, undefined, "" are falsy; most other values are truthy). They return one of the operand's values, not necessarily true or false.
```
console.log("hello" && 123); // 123
console.log(0 || "default"); // "default"
```

3.5 Ternary Operator (Conditional Operator)

A shorthand for an if-else statement. It takes three operands: a condition, a value if true, and a value if false.

Syntax: condition ? valueIfTrue : valueIfFalse;

let age = 18;
let status = (age >= 18) ? "Adult" : "Minor"; // status is "Adult"

let isMember = false;
let price = isMember ? 10 : 20; // price is 20

3.6 Unary Operators

These operators work on a single operand.

++ (Increment): Increments the operand by 1. Can be a prefix (++x) or postfix (x++).
- Prefix: Increments, then returns the new value.
```
let i = 5;
let j = ++i; // i is 6, j is 6
```
- Postfix: Returns the original value, then increments.
```
let k = 5;
let l = k++; // k is 6, l is 5
```
-- (Decrement): Decrements the operand by 1. Can be prefix (--x) or postfix (x--).
- Prefix:
```
let m = 5;
let n = --m; // m is 4, n is 4
```
- Postfix:
```
let p = 5;
let q = p--; // p is 4, q is 5
```

+ (Unary Plus): Tries to convert the operand to a number.

console.log(+"5");    // 5 (number)
console.log(+"-3.14"); // -3.14 (number)
console.log(+"Hello"); // NaN

- (Unary Minus): Tries to convert the operand to a number and then negates it.
```
console.log(-"5");    // -5 (number)
console.log(-true);   // -1
```

Understanding how to use these operators effectively is fundamental to writing logical and functional JavaScript code. In the next chapter, we will explore how to use these operators within control flow statements to make decisions in your programs.