DEV Community

Tres Bien
Tres Bien

Posted on

JavaScript Operators

What are Operators? My two main sources describe them as:

"Reserved syntax consisting of punctuation or alphanumeric characters that carries out built-in functionality. ([[MDN]])"

and

"Operators are used to assign values, compare values, perform arithmetic operations, and more. ([[W3Schools]])".

Which to me, simplifies to defining Operators as symbols used to let expressions & data interact.

There are multiple kinds: Arithmetic, Assignment, Comparison, Logical, & several more. Operators can be used alone, doubled or tripled up, & in various combinations with other Operators to provide a wide variety of results. Lets take a look at a few of them.

Arithmetic Operators: Math
Image description
Chart from: https://www.w3schools.com/js/js_arithmetic.asp

These are Math Operators, they "are used to perform arithmetic between variables and/or values ([[W3Schools]])".
The symbols are the same as you’d see on most calculators. ‘+’ for addition, ‘-’ for subtraction, ‘*’ & ‘/’ for multiplication & division, and so on. When interacting with numbers, they basically do as you'd expect.
As previously mentioned, they can be combined to perform unique actions. Adding ‘++’ to a variable assigned a number will increment it by one, and using ‘--’ will decrease it by one.

Another useful arithmetic operator is the ‘%’ symbol. This divides 2 numbers & returns the remainder, which is useful for seeing if numbers are odd or even. Because if there is no remainder returned, you know the numbers equally divided & are even. Having a remainder means it is odd.

Example:
5 % 5; // returns 0 - Even
5 % 2; // returns 1 - Odd

Assignment: You now mean This
Image description
Chart from: https://www.w3schools.com/js/js_assignment.asp

Assignment Operators may be the most commonly used type. The ‘=’ is either used alone or in combination with other symbols.
When used alone, the ‘=’ assigns various kinds of data to its left operand based on the data of its right operand ([[MDN]]). If there is code to the right of the ‘=’, it executes down to a result & gets assigned to whatever keyword is declared on the left of the ‘=’.

Example:
var x = 2 + 2; // assigned to the value of 4
var fruits = [blueberry, banana, kiwi, apple] // assigned to a list of the fruits
Var right = false // assigned to the boolean false

Now when you call on those variables in other parts of the code, you can just use the keyword instead of having to type everything out again & again.
When used in combination with other symbols, they’re considered shorthand or compound operators. They allow you to combine new date with old data using fewer characters. And concise code is held in very high regard.

Example:
var x = 5;
console.log(x)
// returns 5
x += 5;
console.log(x);
// returns 10 from adding 5
x /= 2;
console.log(x);
// returns 5 from dividing 10 by 2
x *= 5;
console.log(x);
// returns 25 from multiplying 5 by 5
You can also just type something like "x + x = 5” to get the same results, but why use more characters when you don’t need to?

Comparison Operators: VS Mode
Image description
Chart from: https://www.w3schools.com/js/js_comparisons.asp

These are 2 different groups of Operators that are used to determine if something is True or False. Some of these tests use the ‘=’ sign again, but these are not grouped with Assignment Operators since they’re not assigning value to any variables.
For example, just by typing "==" twice, you are now asking if 2 things are “close enough” to each other. This can be useful when comparing Numbers & strings that contain numbers.

Example:
Var x == 2;
Var y == ‘2’;
X == y
// Is 2 the same as ‘2’
The answer will be YES, close enough

However, adding 1 more, "===", the question becomes strict. The answers must be EXACT or the test will return false. Close enough is not close enough for the Strict equal operator.
So since 2 is a number data type & ‘2’ is a string type, they are NOT exactly the same.
There are also the Not equal operators. As implied, these are checking if something is NOT true, and also come in “close enough” (!=) & “strict” versions (!==).

Logical Operators: VS Mode Round Two
Image description
Chart from: https://www.w3schools.com/js/js_comparisons.asp

These also Compare data to determine True or False, but they compare multiple sets of data/equations.
The ‘and’ operator (&&) will only return true if the data on both sides of it are true.
The ‘or’ operator (||) will only return true if at least one set of data on either side is true.
The ‘not’ operator uses the ! symbol alone, and tests if the data following it is false.
So you can get some fun combinations:

Example:
// true or false and true
if (2 == '2' || 2 === '2' && !(2 === '2')) {
return console.log(true);
}

There are too many symbols & combinations to discuss in what's meant to be a quick read. So in Conclusion: Operators are the commanders of your code. They're used to assign value to your variables and also give instruction on what will be done with those values.

Top comments (0)