DEV Community

Cover image for Operators In JavaScript
Ankit Kumar
Ankit Kumar

Posted on

Operators In JavaScript

The operator is a symbol that performs a specific operation on one or more operands (values or variables) and produces a result. Operators are an essential part of any programming language and are used to manipulate data and variables. These are the different types of operators we are going to talk about in this article.

  • Assignment Operator

  • Arithmetic Operator

  • Comparison Operator

  • Logical Operator

  • Ternary Operator

An operand is a value or variable on which an operator performs an operation.

Assignment Operator

The assignment operator = is used to assign value to a variable. The value of the right operand is assigned to the left operand.

let age = 36 // here 36 will be assigned to variable age.
let fruits = ['Banana',"grapes","guava"]
Enter fullscreen mode Exit fullscreen mode

Arithmetic Operator

We can perform standard arithmetic operations on numbers using the arithmetic operators in JavaScript. Following are some of the many arithmetic operators in JavaScript.

  • Addition +

  • Subtraction -

  • Multiplication *

  • Division /

  • Modulus % (also known as remainder)

  • Increment ++

  • Decrement --

Addition

The addition operator is used when we want to find the sum of two or more numbers.

console.log(5 + 5); // 10
Enter fullscreen mode Exit fullscreen mode

We can also use the Addition operator to join two or more strings together, This is known as string concatenation.

let firstName = "John ";
let lastName = "Kumar";
console.log(firstName + lastName); // John Kumar
Enter fullscreen mode Exit fullscreen mode

Subtraction

The subtraction operator is used to find the difference between numbers.

console.log(55 - 2); //53
console.log(55.235 - 23.87); //31.365
console.log(10 - 2 + 5); // 13 This is definitely wrong answer according to bodmas rule.
Enter fullscreen mode Exit fullscreen mode

In the above example, line 3 is giving us the wrong answer because of the order of precedence. Both addition and subtraction have the same order of precedence so they are evaluated Right to the left that's why subtraction is being evaluated first. Here is how we can correct that.

console.log(10 - (2 + 5)); // 3
Enter fullscreen mode Exit fullscreen mode

Now the expression inside the parenthesis will be evaluated first because of the order of precedence.

Division (/)

The division operator is used to find the quotient.

console.log(55 / 5);  // 11
Enter fullscreen mode Exit fullscreen mode

Modulus(%)

The modulus operator is used to find the remainder.

console.log(56 % 5); // 1
Enter fullscreen mode Exit fullscreen mode

Increment (++)

The JavaScript increment operator (++) is used to increment (add 1 to) a variable's value. It can be used in both postfix and prefix notation. In postfix notation (i++), the current value of the variable is returned, and then the value is incremented. In prefix notation (++i), the value is incremented first, and then the new value is returned. It's important to note that the increment operator (++) only works on numbers and will result in a NaN if used on a non-numeric value.

let x = 5;
console.log(x++); // Output: 5
console.log(x); // Output: 6

let y = 5;
console.log(++y); // Output: 6
console.log(y); // Output: 6
Enter fullscreen mode Exit fullscreen mode

Decrement (--)

The JavaScript decrement operator (--) is used to decrement (subtract 1 from) a variable's value. It can be used in both postfix and prefix notation. In postfix notation (i--), the current value of the variable is returned, and then the value is decremented. In prefix notation (--i), the value is decremented first, and then the new value is returned.

let x = 5;
console.log(x--); // Output: 5
console.log(x); // Output: 4

let y = 5;
console.log(--y); // Output: 4
console.log(y); // Output: 4
Enter fullscreen mode Exit fullscreen mode

Comparison Operator

A comparison Operator is used to compare two or more operands. These are the different types of comparison operators.

Equal (==)

The equal operator returns ture if both the operands are the same, it does not check the type of the operands.

const var1 = 10;
const var2 = 20;
const var3 = "10";
const var4 = 10;
console.log(var1 == var2); // false
console.log(var1 == var3); // true both variable have same value but they are of different type
console.log(var1 == var4); //true
Enter fullscreen mode Exit fullscreen mode

Strict equal (===)

This operator is the same as the equal operator, but it also checks the type of operands.

const var1 = 10;
const var2 = 20;
const var3 = "10";
const var4 = 10;
console.log(var1 === var2); // false --different value
console.log(var1 === var3); // false --because both value is of different type
console.log(var1 === var4); //true --same value same type
Enter fullscreen mode Exit fullscreen mode

Not Equal (!=)

This operator returns true if the operands are not equal and return false if they are equal.

const var1 = 10;
const var2 = 20;
const var3 = "10";
const var4 = 10;
console.log(var1 != var2); // true -- different value
console.log(var1 != var3); // false -- same value
console.log(var1 != var4); //false -- same value
Enter fullscreen mode Exit fullscreen mode

Strict Not Equal (!==)

This operator returns true if the operands are not equal and of the same type, else it returns false.

const var1 = 10;
const var2 = 20;
const var3 = "10";
const var4 = 10;
console.log(var1 !== var2); // true -- different values
console.log(var1 !== var3); // true -- same value, different type
console.log(var1 !== var4); // false -- same value, same type
Enter fullscreen mode Exit fullscreen mode

Few More (>,>=,<,<=)

const var1 = 10;
const var2 = 20;
const var3 = 10;

// Greater than
console.log(var1 > var2); // false
console.log(var2 > var1); //true

// Less than
console.log(var1 < var2); // true
console.log(var2 < var1); // false

// Greater than or equal 
console.log(var1 >= var2); // false
console.log(var2 >= var1); // true
console.log(var1 >= var3); // true

// Less than or equal
console.log(var1 <= var2); // true
console.log(var2 <= var1); // false
console.log(var1 <= var3); // true
Enter fullscreen mode Exit fullscreen mode
Operator Description Example
Greater Than (>) Return true if the left operand is greater than the right operand see the above code example.
Less Than(<) Returns true if the left operand is less than the right operand see the above code example.
Greater Than or Equal (>=) Evaluates to true if the value on the left is greater than or equal to the value on the right. see the above code example.
Less Than or Equal(<=) Evaluates to true if the value on the left is less than or equal to the value on the right. see the above code example.

Logical Operator

A logical operator evaluates expressions and returns a boolean value indicating whether a specific condition is true or false. When used with boolean operands, these operators will return a boolean result; when used with non-boolean values, they will produce a non-boolean result. There are three different types of logical operators in JavaScript.

  • OR (||)

  • AND (&&)

  • NOT(!)

OR

The OR the operator is represented by a double vertical line || . OR The operator returns true if any of its expressions evaluates to true otherwise, it returns false. If the OR operator is used with non-boolean values then it returns non-boolean values.

Syntax:

expression1 || expression2

  • if expression 1 is evaluated to true then it returns expession 1 otherwise exprssion2

  • logical OR expression is evaluated left to right, so if the first expression is evaluated to true, then it doesnot check the next expression.

  • if all the expression evaluates to false then it reaturn false.

const var1 = 10;
const var2 = 20;
const var3 = 10;

console.log(var1 > var2 || var2 > var1);// true
console.log(true || true); // true
console.log(false || true); // true
console.log(true || false); // true
console.log(false || false); // false
Enter fullscreen mode Exit fullscreen mode

AND (&&)

The AND operator is represented by two ampersands && sign. The AND operator return true if all of its conditions evaluates to true if any of its conditions evaluates to false it returns false.

Syntax:

expression 1 && expression 2

  • returns true if both the conditions if true otherwise it returns false

  • AND operator is evaluated from left to right, so if any expression evaluates to false it doesn't evaluates any expression after that.

  • it returns last last operand if all the expression evalutes to 'true`

`javascript
const var1 = 10;
const var2 = 20;
const var3 = 10;

console.log(var1 > var2 && var2 > var1); // false && true
console.log(true && true); // true
console.log(false && true); // false
console.log(true && false); // false
console.log(false && false); // false
`

NOT (!)

The NOT the operator is represented by an explanation ! sign. The ! operator can be applied to boolean and non-boolean values. When used with a boolean value, it returns the opposite of that value, i.e. if the value is false it returns true, and if the value is true it returns false.

javascript
console.log(!true); //false
console.log(!false); //true
console.log(!0); //true
console.log(!"Hello"); // false

Ternary Operator

Ternary Operator takes three operands and returns values based on the condition.

Syntax:

condition ? expression 1 : expression2

  • if the condition is true then it returns expression1 and if the expression if false it returns expression2

`javascript
const var1 = 10;
const var2 = 20;

console.log(var2 > var1 ? "true" : "false"); // true
console.log(var1 > var2 ? "true" : "false"); // false
`

Conclusion

In this article I have only talked about the operators which are used most, there are a few more operators, and if you want to explore more then you can read about them here.

Click Here

Top comments (0)