Understanding Operators in JavaScript

Tagged: #HTML, Code, Frontend, JavaScript, Operators, Programming

This topic has 0 replies, 1 voice, and was last updated 5 months, 4 weeks ago by Oghenemarho.

Viewing 1 post (of 1 total)

Author
Posts

March 6, 2020 at 6:34 pm #87222

Participant

@oghenemarho

In computer programming languages, an operator is a symbol that is used to perform specific tasks similar to how functions operate. They are constructs that are used when writing code, to manipulate values or operands. They are some of the simplest expressions used in a program and form the basis of most functions and complex programming algorithms.

In the JavaScript language there are several different types of operators but they all can be grouped into the following classes, depending on the number of operands they require to function. Operands can be defined as the value or elements of the code that an operator is applied to or meant to interact with. The classes of operators are:

Unary Operators: These types of operators require only one operand to function. Depending on the operator, the operand can come before or after the operator, like so:
- operand operator; or
- operator operand
Binary operators: they require two operands for them to function, one before the operator and the other after it, like so:
- operand operator operand
Ternary operators: These operators make use of three operands or arguments. In JavaScript there is only one ternary operator called the conditional operator, which we will examine later.

Now let us take a look at the different types of JavaScript operators and what functions they perform

Assignment Operators

JavaScript assignment operators are used to assign values to variables. It is a binary operator and when using assignment operators, the value of the left operand is usually determined based on the value of the right one.

The simplest form of the assignment operator is the equal sign (=) which when used as shown below, simply means that the value of b is assigned to the variable a:

a = b

Here’s a simple example of it at work:

<!DOCTYPE html>
<html>
<body>
<h2>The = Operator</h2>
<p id="demo"></p>
<script>
var x = 10;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<body>

<h2>The = Operator</h2>

var x = 10;

document.getElementById("demo").innerHTML = x;

</script>

</body>

</html>

There are also compound assignment operators which are used as shorthand for more complex operations. Below are a few examples

Operator	Description	Example	Same Operation As
+=	Sums up left and right operand values and assign the result to the left operand.	X+=Y	X=X+Y
-=	Subtract right operand value from left operand value and assign the result to the left operand.	X-=Y	X=X-Y
*=	Multiply left and right operand values and assign the result to the left operand.	X*=Y	X=X/Y
/=	Divide left operand value by right operand value and assign the result to the left operand.	X/=Y	X=X/Y
%=	Get the modulus of left operand divide by right operand and assign resulted modulus to the left operand.	X%=Y	X=X%Y

Arithmetic Operators

In JavaScript, the arithmetic operators are used to perform basic arithmetic operations on variables. Note that arithmetic operators take only numerical values as operands and they also return a single numerical value when they are executed. Here are some examples of common arithmetic operators in JavaScript, assuming the operands X and Y have values of 200 and 100 respectively:

Operator	Description	Example	Result
+	Addition: Sums up left and right operand values	X+Y	300
–	Subtraction: Subtract right operand value from left operand value	X-Y	100
*	Multiplication: Multiply left and right operand values	X*Y	20000
/	Division: Divide left operand value by right operand value	X/Y	2
%	Modulus: Get the modulus or remainder of left operand divide by right operand	X%Y	0

Below is some sample code of the division arithmetic operator at work:

<!DOCTYPE html>
<html>
<body>
<p>y = 5, calculate x = y / 2, and display x:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var y = 5;
var x = y / 2;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<body>

<p>y = 5, calculate x = y / 2, and display x:</p>

function myFunction() {

var y = 5;

var x = y / 2;

document.getElementById("demo").innerHTML = x;

}

</script>

</body>

</html>

String Operators

There are two string operators in JavaScript: the + operator and the += operator. They perform similar functions to their arithmetic and assignment types except that they are used for string operands and not numerical ones. These two operands are used to concatenate strings or join them together. For instance, if you run the script below, what will happen is that the variables text1 and text2 will be merged using the + operator and their new value will be assigned to the text3 variable.

<script>
function myFunction() {
var text1 = "Good ";
var text2 = "Morning";
var text3 = text1 + text2;
document.getElementById("demo").innerHTML = text3;
}
</script>

function myFunction() {

var text1 = "Good ";

var text2 = "Morning";

var text3 = text1 + text2;

document.getElementById("demo").innerHTML = text3;

}

</script>

Comparison Operators

These are binary operators that compare the values of two operands and returns a logical (true or false) value based on whether the results of the comparison are true or false. Here are the various JavaScript comparison operators:

Operator	Description	Example
==	Equal: returns the value true if the operands are equal	x==y
!=	Not Equal: returns the value true if the operands do not equal each other	x!=y
===	Strictly Equal: returns the value true if the operands have the same value and data type.	x===y
!==	Strictly Not Equal: returns the value true if the operands do not have the same value and data type	x!==y
>	Greater Than: returns the value true if the left operand is greater than the one on the right	x>y
<	Less Than: returns the value true if the right operand is greater than the one on the left	x<y
>=	Greater Than or Equal To: returns the value true if the left operand is greater than or equal to the one on the right	x>=y
<=	Less Than or Equal To: returns the value true if the right operand is greater than or equal to the one on the left	x<=y

Logical Operators

These types of operators are used in conjunction with Boolean values to determine the logic between variables and/or values. There are three logical operators in JavaScript:

Operator	Description	Example (if x=7 and y=4)
&&	Logical AND: checks if both operands have non-zero values and if yes then returns 1 (true) otherwise 0 (false).	(x < 10 && y > 1) is true
\|\|	Logical OR: checks whether any one of the two operands have a non-zero value (0, false, undefined, null or “” is considered as zero).	(x === 5 \|\| y === 5) is false
!	Logical NOT: It reverses the boolean result of the operand (or condition)	!(x === y) is true

Conditional Operators

This is the only type of ternary operator in the JavaScript language. It assigns a value to a variable based on some specified condition. It usually takes the format of <condition> ? <value1> : <value2>; which means if the condition followed by the ? is true, then the operand before the : will be executed, and if the condition is false, then the operand after the : will be executed. For example:

var age = 25;
var status = (age >= 18) ? 'adult' : 'minor';

1 2	var age = 25; var status = (age >= 18) ? 'adult' : 'minor';

In the above code, the variable age has the value of 25. In the next line of code the condition is for the age to be greater than or equal to 18. If this is true, then the status variable is equal to adult, otherwise, it is minor.

With that, we’ve covered the major operators that can be used in JavaScript code. There are a few others that exist but for now this should be enough to get you started with writing your own code blocks and building programs.

Author
Posts

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.