An Easy Guide to Operators in JavaScript

Photo by Oskar Yildiz on Unsplash

In the last article we looked at the types that JavaScript has to offer. But what we didn’t talk about is their operators, basically what make a value act on or be acted on to produce a result. These includes but not limited to +(plus), -(minus) etc., and you might be thinking can a string type have an operator, well that answer is a resounding yes.

Note: These are not standardize(official), it is just my own way of trying to structure it.

Categories of Operator

There are three categories of operators in JavaScript

• Unary Operator
• Binary Operator
• Ternary Operator

These are majorly due to their functionality on other, how they behave.

Note: NOT ALL OPERATORS ARE SYMBOLS

Unary Operators

These are operators that act on an operand(value) i.e they act on a single value. Example typeof , -(minus sign), !(exclamation mark) etc. The typeof keyword produces a string value naming the type of the value you provide it.

console.log(typeof 3)// Number
console.log(typeof "")// String
console.log(-10)// -10
console.log(!true) // false

Binary Operators

These are operators that act on two operands(values). This is where most of all operators fall into. They are common, some of which you might know. Example +(plus), -(minus).

console.log(2+2) // 4 
console.log(3-1) // 2
console.log(1-2) // -1

Ternary Operator

These are operators that operate on three operands(values). It is likely this is not the first time you have heard of this term. Try to guess it… Yep it is the question mark(?) and the colon(:). As for now it is the only operator that has such functionality, we will know how it operates later on in the article.

console.log(true ? "JavaScript" : "Java" ) // JavaScript

Types of Operators

I will be discussing the following operators below. These are not the only types of operators

• Arithmetic
• Logical
• Comparison
• Conditional

Arithmetic

These are operators that perform arithmetic operation. These includes Addition(+), Subtraction(-), Division(/), Multiplication(*). If you have done basic math these symbols and their meaning are known to you, but there are other arithmetic symbols that have functionalities that you don’t know about.

Strings can also use the + symbol. This is called concatenation.

console.log("Why" + "me")// Whyme
if you need space you will have to add it.
console.log("Why" + " me")// Why me

For instance if you want to find a remainder of a division operation or if you want an integer(whole number) from a floating-point number(decimal number, JavaScript doesn’t have this type). Well wait no further, I introduce the Modulus(%) and Floor(//) operation.

The Floor operator which is a double forward slash(//), basically ignores any value after the decimal place, irrespective of whether the value is over .5 or less than than .5.

console.log(3.5) // 3
console.log(5.2) // 5

The Modulus operator which is a percent(%) sign, returns the remainder of the division operation. This can be useful when you want to know if a number is an even number or an odd number.

console.log(3%2)// 1
console.log(5%3)// 2

Logical Operators

These operator that operate on boolean values. They include and, or and, not. Well in JavaScript they are represented in symbols. So and(&&), or (||), not (!).

The && operator represents logical and. It is a binary operator(i.e operates on two values), and its result is true only if both the values given to it are true.

console.log(false && false)// true
console.log(true && false)// false
console.log(2 < 4&& 3 > 4)// false
console.log(2 >= 4 || 8 == 8)// true
console.log(9 == "9" || 8 > 19)// true
console.log(9 === "9" && 4 > 5)// false

Comparison Operator

The > and < signs are the traditional symbols for “is greater than” and “is
less than”, respectively. They are binary operators. Applying them results in
a Boolean value that indicates whether they hold true in this case.
Strings can be compared in the same way.

console.log(2 < 4)// true
console.log(2 > 4)// false 
console.log(4 >= 6)// false
console.log(5 <= 8 )// true

Conditional Operator

This operator is a ternary(operating on three values). It is written with a question and a colon. So the way it works is if it is true the value before the colon(:) and after the question mark(​​​​​​​​​​​​​?) will be returned, if false the value after the colon will be returned.

console.log(false ? "Python" : "JavaScript" )// JavaScript

It is like an easy way to write a conditional statement which doesn’t have any other conditions.

Automatic Type Conversion

JavaScript goes out of its way to accept almost any program you give it, event program that do odd things.

console.log(8 * null) // 0
console.log(“5” - 1 ) // 4
console.log(“5” + 1) // 4
console.log(“five” * 2)// NaN
console.log(false == 0)// true

When an operator is applied to the “wrong” type of value, JavaScript will
silently convert that value to the type it needs, using a set of rules that often
aren’t what you want or expect. This is called type conversion. When something that doesn’t map to a number in an obvious way (such as
“five” or undefined) is converted to a number, you get the value NaN.

When using == to compare values of the same type, the outcome is easy to
predict. The result should give you true if both values are the same, except in the case of NaN. But when the types differ, JavaScript uses a complicated and confusing set of rules to determine what to do. In most cases, it just tries to convert one of the values to the other value’s type. However, when null or undefined occurs on either side of the operator, it produces true only if both sides are one of null or undefined.

console.log(null == undefined);
// → true
console.log(null == 0);
// → false

Short-circuiting

The logical operators && and || handle values of different types in a peculiar
way. They will convert the value on their left side to Boolean type in order
to decide what to do, but depending on the operator and the result of that
conversion, they will return either the original left-hand value or the right-hand value.

The || operator will return the value to the left when true and return the right when false.

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

This doesn’t work for boolean values, but for other values. The rules for converting strings and numbers to Boolean values state that 0, null, undefined, empty string, NaN count as false, while others count as true.

console.log( 0 || 'I will return')
// I will return
console.log(null || 5)
// 5
console.log('' || 1000)
// 1000
console.log(8 || null)
// 8
console.log('I am not an empty string'|| 'It is well' )
// I am not an empty string

The && operator will return the value to the right when true and return the left when false.

console.log(true || false)
// false
console.log(false && true)
// true
console.log(8 && 100)
// 100
console.log('' && 'Okay')
// ''
console.log( && )

This is useful when you have a variable that is dynamically set, in case the value is an empty string, null, or undefined which all evaluates to a falsy; the value to the right will be the default value.

if the user variable is falsy i.e false. The guest string is used instead, otherwise user will return.
 
console.log(user || 'guest')
// guest

“A falsy (sometimes written falsey) value is a value that is considered false when encountered in a Boolean context.” — Mozilla Developer Network

When a value evaluates to true it is regarded as truthy, if otherwise it is regarded as falsy. It is colloquial term so, it is not a technical term. Values that evaluates to falsy are 0,0n(Bigint), null, NaN, false, undefined and empty string(“”).

There are types of operators that were not covered in this article, but you can find here. Also precedence in operators is also a thing, so make sure you know about them to prevent unintended bugs

Summary

We have learnt about the operators of JavaScript, based on how many operand they act on

• Unary Operator
• Binary Operator
• Ternary Operator

Based on types they act on

• Arithmetic
• Logical
• Comparison
• Conditional

Also we look at Short circuiting and Automatic Conversion. So be careful of Automatic Conversion it is an avenue to introduce bugs.

Happy Coding!!!