DEV Community

Ayobami Ogundiran
Ayobami Ogundiran

Posted on • Updated on

A Simple Guide to JavaScript Operators ( Assignment, Equality and Ternary).

Welcome to this lesson, in this lesson, we will talk about operators.

Operators are very important in JavaScript. Some of them are used for arithmetic, comparison, logic and many more operations.

Bravo! Let's start with the assignment operator.

Assignment Operator

let price = $20;
Enter fullscreen mode Exit fullscreen mode

In this case, the (=) sign is used as an assignment operator to give a value to the variable price. That is what is known as an assignment operator.

Equality Operator

Now, let's talk about equality operators. Equality operators are boolean in nature because they always return true of false.

Let's start by writing two variables as in.

let one = 1;
let two = 2;
Enter fullscreen mode Exit fullscreen mode

Before we go further, what are operands?

What are operands?

Operands are the identifiers by the left and the right side of an operator as in:

console.log(leftOperand == rightOperand)
Enter fullscreen mode Exit fullscreen mode

The equality operator with two equal signs (==) is used to check whether the value of operands are equal or not as in:

let one = 1;
let two = 2;
console.log(one == two ); // false
Enter fullscreen mode Exit fullscreen mode

In this case, we check whether the value of variable one and two are equal or not. "False" is logged in the console because 1 and 2 are not equal.

That takes us to the equality operator with three equal signs (===). This one is used to check whether the values and types of two operands are equal or not as in:

console.log (1 === "1" ) // false
Enter fullscreen mode Exit fullscreen mode

In this case, there values are equal but there types are not equal. One is a number and the other is a string. So, "false" is logged in the console. Before we can get "true", both of their values and types must be equal.

These two operators have their negative versions as in below:

!= (negative of ==)  values not equals
!== (negative of === ) values and types not equal
Enter fullscreen mode Exit fullscreen mode

They can be used as in:

let one = 1;
let two = 2;
console.log( one != two );// true. Now equal in values.
console.log(one !== two);// true. Not equal in both values and types
Enter fullscreen mode Exit fullscreen mode

Yeah! Let's talk about Inequality operators.

Inequality operators are use to check whether the value of an operand is less or greater that the value of another operand as in:

let one = 1;
let two = 2;
console.log(one < two); //true
Enter fullscreen mode Exit fullscreen mode

"True" is logged in the console because one is less than two.

Also,

let one = 1;
let two = 2;
console.log( two > one );
Enter fullscreen mode Exit fullscreen mode

That logs "true" because two is greater than one. Otherwise, it will log "false".

We also have <= (less than or equal to) and >= (greater than or equal to) as in:

let one = 1;
let two = 2;

console.log ( 2 <= 4);
Enter fullscreen mode Exit fullscreen mode

It logs "true" because two is less than four. It is not equal to 4 though. One of the two conditions is needed.

That takes us to arithmetic operators.

Arithmetic Operators

These ones are straight forward as they are exactly what we have been using since basic education.

let numberOne = 5;
let numberTwo = 10;
console.log(numberOne * numberTwo)
Enter fullscreen mode Exit fullscreen mode

boom! It logs a beautiful 50. That is a multiplication sign in javascript.

let numberOne = 5;
let numberTwo = 10;

console.log(numberOne + numberTwo)
Enter fullscreen mode Exit fullscreen mode

gbigbim! It logs 15. That is an addition sign in JavaScript.

console.log(numberTwo / numberOne);
Enter fullscreen mode Exit fullscreen mode

It logs 2. And that is an amazing 2. So, that is a division sign in JavaScript.

console.log(numberTwo % numberOne)
Enter fullscreen mode Exit fullscreen mode

It logs 0 because it remains 0 after numberTwo is divided by numberOne; That is a modulo sign in JavaScript.

Now, let's combine both assignment and arithmetic operators to achieve assignment and arithmetic at once as in:

let price = 3;

console.log(price += 4)
Enter fullscreen mode Exit fullscreen mode

And we get 7 as a result in the console.

That means, we add value of the variable by the left (in this case, price) to the value by the right and assign the result to the variable by the left which is price in this case.

console.log(price -= 2);
Enter fullscreen mode Exit fullscreen mode

In this case, we substract the value by the right from the value of the variable by the left (price) and assign the result to price;

console.log(price *= 2 )
Enter fullscreen mode Exit fullscreen mode

This multiply price by 2 and assign the final result to price.

console.log(price /= 2 )
Enter fullscreen mode Exit fullscreen mode

This divides price by two and assign the final result to price.

console.log(price %= 2)
Enter fullscreen mode Exit fullscreen mode

This check for the remainder after dividing price by 2 and assign the final result to price;

In short, you can combine both the assignment operator and arithmetic operators to achieve both assignment and arithmetic at once.

That takes us to logical operators.

Logical Operators

In this case, we have && (AND) and || (OR).

"&&" will only return true if all conditions are "true", otherwise it returns "false" as in:

let name = "Ayobami";
let age = 20;

console.log(name != "" && age == 20)
Enter fullscreen mode Exit fullscreen mode

This will log "true" because the value of the name is not empty and the value of age is equal to twenty.

let name = "Ayobami";
let age = 20;
console.log(name != "" && age < 20)
Enter fullscreen mode Exit fullscreen mode

This one will log "false" since one of the conditions is false. name is not empty and age is 20 but age is expected to be less than twenty.

Now, let's use OR (||),

let name = "Ayobami";
let age = 20;
console.log(name != "" || age < 20)
Enter fullscreen mode Exit fullscreen mode

This logs "true" because at least one of the conditions is needed to be true. "name" is true but age is false. "OR" only needs at least one condition to be true.

"OR" can also return false if all conditions are false.

Let's simplify this:

If all conditions are false, both AND and OR will return "false".
If all conditions are true, both AND and OR will return "true".
If not all conditions are true, AND will return "false" but OR will return "true".
If not all conditions are false, AND will return "false" but OR will return true.

"AND" needs all conditions to be true or false to return "true" otherwise it returns "false" while "OR" needs at least a condition to be true or false to return "true", otherwise, it returns "false".

This takes us to ternary or conditional operator in Javascript.

Ternary Operator

It is like this:

condition ? return if conditon is true 
          : return if condition is false.
Enter fullscreen mode Exit fullscreen mode

Let's use it.

let cost = 50;

let status = cost < 50 ? "That is too cheap" 
          : "That is too expensive";
console.log(status)// That is too expensive
Enter fullscreen mode Exit fullscreen mode

That is what is call ternary or conditional operator.

It has condition before the question mark (?) and if the condition is true, the expression after the question mark (?) will be the value of "status" but if the condition is not true, the expression after colon (:) will be the value of "status".

That is it. We will make use of these or any other operators practically later in this course.

In the next lesson, we will discuss conditional statements.

One more thing

Are you having difficulties to learn and understand JavaScript and build projects with it? JavaScript for a Total Novice teaches JavaScript and Project Making Fundamentals with simple illustrations and examples that make everything so easy. You can now handle any difficult projects without fear.

Don't trust me, get a free previous to judge by yourself: https://bit.ly/3o3TMyg

Discussion (0)