Okay, so we've got variables, we've got values of all sorts, and we've got our good, good programmatical intentions, but how do we refer and compare our values and variables to each other (and themselves) to make our digital dreams come true?? The answer, my friend, is simple, yet complex. Operators!! Welcome to their wonderful and comparative world!! Don't feel overwhelmed, though. We're gonna take it by the numbers.
Prelude: Operands
We don't really mention operands too often, but that doesn't mean they're not super important! An operand is the data that is being operated on. The operand combined with the operator makes an operation(1), and without that information, there's no program at all. This is true whether we're referring to many bits of data, or just one.
1- The unary
These operators require only one operand for operation.(1). This means we'll start by organizing, contemplating, morphing, and/or comparing data to itself. In Javascript, we can do a good few things with a single operand to deal with. Most of these things have to do with the types of variable we're dealing with. Check out these examples:
- +: The unary plus (+) converts an operand into a number, if possible. It is commonly used to ensure numerical operations on variables that may contain numeric strings(2).*If the operand is a string that represents a valid number, it will be converted to a n umber(2). If it can't be converted, it returns NaN (not-a-number).
- -: (2)The Unary Negation (-) operator is used to convert its operand to a negative number if it isn’t already a negative number. The unary negation operator *(first) converts its operand to a number(2).* If it can't convert, it'll still return Nan(there's no -NaN).
- ++: The unary increment operator (++) adds 1 to its operand’s value and evaluates to the updated value(2). It can activate before or after an expression, depending on whether it is placed as a postfix or prefix operator(2).
(2)Postfix: In postfix, the current value of the variable is used in the expression, and then the variable’s value is incremented by 1.(2)
Prefix: In prefix, the variable’s value is first incremented by 1, and then the updated value is used in the expression.(2)
- --: The unary decrement operator (–) subtracts 1 from its operand’s value and evaluates it to the updated value. Like increment, this can also be used as a postfix or prefix operator(2).
Postfix: In postfix form, the current value of the variable is used in the expression, and then the variable’s value is decremented by 1(2).
Prefix: In prefix form, the variable’s value is first decremented by 1, and then the updated value is used in the expression (2).
- !: The logical NOT (!)(a.k.a. the "BANG" operator) *negates the Boolean value of an operand, converting true to false and false to true(2).*This is mostly used in "if" statements and other truth-based operations.
- typeof: (2)The JavaScript typeof operator returns the data type of its operand in the form of a string. The operand can be any object, function, or variable.(NOTE: the typeof operator sees arrays([]) and objects({}) as objects, and will resolve "object" in both cases. Be cautious when this is the answer.)
- delete: (2)The delete operator in JavaScript removes a property from an object. If no other references exist, the property’s memory is automatically released.
- void: The void operator evaluates the given expression and then returns undefined. It is often used to ensure that an expression has no return value.(2)*
2- Binary:
Ah, programming languages, operating in the binary since '01. Jokes aside,
binary operators are the ones that require two operands for operation(1). Most of our operations are done using these operators, since most of our more complicated operations distill down to one-on-one comparisons (those that I've seen, so far). Binary operators come in many shades, so, as to save you a bit of time, I whipped up a few tables.
Let's begin with the binary operators you're already familiar with:
Arithmetic Operators: Arithmetic operators are binary operators(1) that work pretty much the same as you likely learned them in grade school. As such, they're normally used with numbers, though there are some exceptions.The first operand is on the left of the operator, and the second operand is on the right.
| Name | Operator | Usage | Example |
|---|---|---|---|
| Addition | + | adds operands | 4 + 6: 10 |
| Subtraction | - | subtracts operands | 8 - 6: 2 |
| Multiplication | * | multiplies operands | 10 * 2: 20 |
| Division | / | divides operands | 20 / 2: 10 |
- %: Modulo: The modulo operand (commonly mis-named "modulus")behaves similar to division, in that it divides, but there's more, I promise! It divides the first operand (the dividend) by the second operand (the divisor) and returns the remainder(5). Think of it like grouping what's on the left into groups of what's on the right and answering what's left over.
Comparison/Relational Operators: All comparison operators also require two operands(1). The value of operands with a comparison/relational operator between them will be in the form of a boolean, so I like to think of the operators as asking a question. Here are some examples:
| Name | Operator | Usage | Example |
|---|---|---|---|
| Less-Than | < | is left less than right side? | 4 < 6: true |
| Greater-Than | > | is left greater than right side? | 8 > 6: true |
| Less-Than or equal to | <= | is left < or equal to right? | 10 <= 10: true |
| Greater than or equal to | >= | is left > or equal to right? | 20 >= 2: true |
| Loosely-equal | == | does left have same value as right? | 10 == '10': true |
| Strictly-equal | === | does left have same value and type as right? | 10 === "10": false |
| Strictly inequal | !== | does left have diff value and/or type as right? | 10 !== "10": true |
| Inequal | != | does left have diff value than right? | 10 != "10": false |
- =: (1)The assignment operator: Will not return a boolean. It's the O.G. equals and creates truth wherever it goes. If a didn't = b earlier, it for sure does now (errors aside).
The assignment operator likes to bring all of its math class friends along, re-assigning the countryside in its wake. If your = shows up with a math-y operator (+, -, *, /, %), when they're done, the left operand will come back changed.
In each of the exercises in the following table, each operation is assumed to follow (let x = 10);
| Name | Operator | Usage | Example |
|---|---|---|---|
| Plus-equal | += | Left = its previous value + right | x += 7: x = 17 |
| Minus-equal | -= | Left = its previous value - right | x -= 6: x = 4 |
| Divide-equal | /= | Left = its previous value - right | x /= 2: ** x = 5** |
| Multiply-equal | *= | Left = its previous value * right | x = 10: **x = 100* |
| modulo-equal | %= | Left = its previous value % right | x /= 4: x = 2 |
Logical Operators:
Sometimes, when we're setting conditions, we want to add more conditions to save time and expensive mental energy. In these cases, logical operators are the. . . ahem. . . logical solution.
- &&: The AND operator is placed after an operand. AND returns true if both operands are truthy and false otherwise:(6)
- ||: Want to add a condition to an operand, but either one is good enough for you? OR is the perfect solution! Add a || to your statement, then your additional stipulation(s). then, if any of its arguments are true, it returns true, otherwise it returns false:(6)
- ??: The nullish coalescing (??) operator is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.(7)
3- Ternary:
* The Ternary:
There's only one ternary operator in Javascript, used as shorthand for [if statements]. It's pretty simple, and tends to look like this: conditionalExpression ? truthyValue : falsyValue(4)
Here, I'll show you how it works:
~- And More!
There are so many ways to refer to our bits and pieces of data to give them just the right relevance in just the things we happen to need them for when we write and implement code. I may have only shared the ones and twos (and a three) with you, but with this, as with coding in general, the sky's the limit! No, scratch that: the sky's too small. Even the stars are a stopping point to the edge, so don't be afraid to reach out. Buckle up, intrepid coders, we're heading To Infinity, and BEYOND!!
(1). https://www.freecodecamp.org/news/unary-binary-ternary-operators-
javascript/
(2). https://www.geeksforgeeks.org/javascript-unary-operators/
(3). https://stackoverflow.com/questions/12122293/list-of-all-binary-
operators-in-javascript
(4). https://www.freecodecamp.org/news/javascript-ternary-operator-
explained/
(5). https://www.freecodecamp.org/news/javascript-modulo-operator-how-to-
use-the-modulus-in-js/
(6). https://javascript.info/logical-operators
(7). https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing
Top comments (0)