Efficient use of JavaScript operators

Last update: 01 - 11 - 2023

What are JavaScript operators?

JavaScript Operators are used to manipulate, compare, assign or control the data flow of our program. In this article I will explain how the most commonly used JavaScript operators work.

Using the assignment operator with JavaScript

Assignment operator is used to assign a value to a variable using the equality sign (=). It is important to remember that even though this sign is used, the assignment is NOT an equality.

Here is an example of a variable assignment:

let javascriptOperators =  ["Assignment operator"];

In this case an array is being assigned to the variable javascriptOperators with a single index ("Assignment operator"). As the article progress, a push will be made to this array. 😆

(Push is a method for adding elements to an array. Click this link if you haven't seen array methods yet).

Arrays are a JavaScript data type used to store several data in the same variable, they have different methods to manipulate them (like push). Later I will make an article about arrays in detail.

JavaScript arithmetic operators

These are the type of operators used to perform math operations. Among these we have:

Addition operator

It is the operator that is in charge of SUM numeric data within the program.

The emphasis on summing is because this operator is also used to concatenate data. We will see it later.

let number1 = 333;
let number2 = 333;

let theNumberOfTheBeast = number1 + number2;🤘

Subtraction operator

It is the operator that subtracts numerical data.

let a = 10;
let b = 9;

let subtraction = a - b;

The subtraction sign (-) is also used to assign a negative value to the numeric data.

Multiplication operator

It is the operator that is responsible for multiplying numerical values. It is represented by the star sign (*) and not by an X.

let order = 33;

let executeOrder = order*2;💀

Division operator

It is the operator that divides numerical values. The slash sign (/) is used to perform it.

let a = 10;
let b = 5;

let division = a / b;

Modulus operator

This operator divides the data provided and returns the remainder of that division. It is executed with the percent sign (%).

let a = 10;
let b = 3;

let remainder = a % b;// Output = 1

Exponentiation operator

This operator is used to carry a numeric data to a designated power. It is executed using a double star sign (**).

let base = 5;
let exponent = 4;

let power = base**exponent;// Maths... 🙄

Arithmetic operators follow the same rules of the law of hierarchy of operations.

Increment and Decrement operators

This is another operator that is widely used for for or while loops. For example:

for (let i = 0; i <= 10; i++){
  console.log(i);
// Printing 1 to 10
}

If you notice, the variable i has on its right side two addition signs (++), that is the increment operator.

There is also another operator inside this example (<=), that is a comparison operator, I will talk about them in the next point.

// The ++ increment operator are the equivalent of  i = i + 1;

There are cases where you will want to decrease the amount of that numerical value.

for (let i = 10; i >= 0; i--){
  console.log(i);
// Printing 10 to 1
}

Comparison operators

These operators are those that evaluate two or more pieces of data so that the flow of an algorithm takes a defined step. They are widely used in flow controls such as if else or for loops as in the previous example.

Among the comparators we have the following:

//Greater than
trunksAge > gotenAge

//Less than
SSJ1 < SSJ2

//Greater or equal to
VegitosKi >= GogetasKi

//Less or equal to
yamchasKi <= 0

With the JavaScript comparison operators something curious happens and it is that this programming language exists the triple equal sign (===).

We already know that a single equal sign (=) assigns a value, the double equal sign (==) compares if both values are "equal" and the triple equal sign (===) makes a strict comparison, the latter also evaluates the type of data that the variable has.

//Assignment operator =
let aRandomString = "A random String Example xD";

//Comparison operator ==
let x = 9;
let y = "9";

console.log(x == y);// Output  true

// In the case of evaluating two strings in this way, it must be remembered that the language is case sensitive.

//Comparison operator ===
console.log(x === y);// Output  false

Now there are the unequal comparison operators:

//It is not the same
Ethereum != Bitcoin

// Strictly Definitely not the same!!
Petro !== Bitcoin

Both inequality operators work in the same way as equality operators. Inequality (!=) will be true if both data are not the same; strict inequality (!==) will be true if the data are the same and do not share the same data type.

Arithmetic assignment operators

They are a shorthand way of assigning a mathematical operation to a numerical data.

We have the well-known form

let number1 = 10;

number1 = number1 + 2;// 12

And in its form with an arithmetic assignment

let number1 = 10;

number1 += 2;// 12

This operator can also be used to concatenate two strings.

let prename = "Darth ";
let name = "Vader";

let newSith = prename += name;// Darth Vader

The arithmetic assignment operators also apply to other mathematical operations.

let number1 = 10;

number1 += 2;// 12
number1 -= 2;// 8
number1 *= 2;// 20
number1 /= 2;// 5
number1 %= 2;// 0

String operator

This is the same operator used for addition (+). In this case it is used to join two or more text strings and variables.

let whiningPilot = "Shinji Ikari";

let sentence = "get in to the f#ck!8@ robot " + whiningPilot;

This Javascript operator is also used with commas (,).

let whiningPilot = "Shinji Ikari";

let sentence = "Get in to the f#ck!8@ robot ",whiningPilot;

While it is useful for printing short data, there are also template strings for this task.

let whiningPilot = "Shinji Ikari";

let sentence = `Get in to the f#ck!8@ robot ${whiningPilot}`;

Template strings are used with backtics (``) and ${ } is used to place the variables to concatenate.

Logical operators

This type of operator works with Boolean values. An algorithm can take a path depending on how the logical operator is set. If control flows usually execute their internal code if the condition is true unless otherwise specified.

There are times that to explain a topic you have to advance a little on the subject, this article has touched a little on control flows but in the future I will talk in detail about them. 😁

There are three types of logical operators:

The Or logical operator (||)

It is expressed with the double pipe. This operator evaluates different conditions within a statement and will take the first one that is true from left to right.

let message = "I have chosen that 10 is less than 20.";

if(10 < 5 || 10 < 20){
  console.log(message);
}

If both or all the conditions are true it will take the first one found inside the statement.

If all the conditions are false it will go for an else if it has one.

The And logical operator (&&)

It is expressed with the double ampersand. This operator evaluates that both conditions within a statement are met.

let message = "Testing the AND operator";

if(10 < 5 && 10 < 20){
  console.log(message);
}

In this case the code is not executed because only one condition is being met (10 < 20) and there is no else to execute another condition.

let message = "Testing the AND operator";

if(10 > 5 && 10 < 20){
  console.log(message);
}

For this example both conditions are being fulfilled and the code is executed.

If we want to understand it better we can see it in the following way:

• Or operator:

It is either the first option OR it is second option (one must be fulfilled).

• And operator:

It is the first option AND it is the second option as well (Both must be fulfilled).

The not logical operator

This operator inverts the type of Boolean value assigned to it. It uses the exclamation mark (!) at the beginning of the data to change its Boolean value.

let true_to_false = !true;
let false_to_true = !false;

These are the most common Javascript operators, you will find more complex examples on the web but once you understand them you will be able to better understand the flow of an algorithm.

And just to remember. I'm going to leave a type of operators list. Those push were not there for free. 😆

let javascriptOperators =  [
  "Assignment operator",
  "Arithmetic operators",
  "Increment and Decrement operators",
  "Comparison operators",
  "Arithmetic assignment operators",
  "String operator",
  "Logical operators"
];