The daily developer

Posted on Aug 16, 2023

JavaScript: What are Operators ?

#javascript #webdev #programming #tutorial

Operators are symbols that allows you to manipulate values. They are the foundation for expressions, which are made of multiple combinations of values and operators that are evaluated to get to a result.

Overview:

Comments
- Single-line comments
- Multi-line comments
Arithmetic Operators
- Prefix increment/decrement
- Postfix increment/decrement
Assignment Operators
Comparison Operators
Logical Operators
Unary Operators
Bitwise Operators

Comments

Comments are a brief but clear description that you can add to your code to make it clearer and easier to understand.
There are two types of comments:

Single-line comments

Single-line comments are used to write comments that are only one line long.

// Single-line comment
let x = 2; //This is a variable with a value of 2

Multi-line comments

Multi-line comments are multiple lines long, they're also referred to as block comments. They are used to give more detailed explanations for a code sections.

/* this comment 
  is a multi-line
comment*/

You can also use comments to disable or stop the execution of a code block.

let x = 2;
// console.log(x);

Now console.log(x) will not display 2 in your console.

Arithmetic Operators

Programs use arithmetic operations to perform mathematical calculations.

Operators:

operator	description
+	addition operator
-	subtraction operator
*	multiplication operator
/	division operator
%	remainder operator
**	Exponentiation operator
++	increment operator
--	decrement operator

Addition:

let a = 5 + 4; // the sum is 9

Subtraction:

let a = 6 - 5; // the difference is 1

Multiplication:

let a = 3 * 4 ; // the product is 12

Division:

let a = 35 / 7 ; // the quotient is 5

Modulo: gives back the remaining amount after the left operand has been divided by the right operand.

let a = 14 % 3 // the remainder is 2

Exponentiation Exponentiation is raising a number to a specific power.

let a = 2 ** 4; // the result is 16

Increment and decrement The increment operator increases the value of a variable by 1 while the decrement operator decreases the value of a variable by 1.

Prefix increment/decrement

Prefix increment/decrement executes the statement after increasing or decreasing the value.

let x = 1;
let y = ++x; // Increment x by 1 and then assigned new value to y
console.log(x); // result 2 
console.log(y); // result: 2

Postfix increment/decrement

Postfix increment/decrement executes the statement before increasing or decreasing the value.

let x = 5;
let y = x++; // Assign the current value of x to y and then increment x by 1
console.log(x); // result: 6 
console.log(y); // result: 5

Assignment Operator

The assignment operator assigns a value to a variable, which we've seen in the previous article when we've learned about initializing variables.

The Assignment operator can be combined with arithmetic operators to create a shorthand. This shorthand makes it possible to perform an arithmetic operation and then assign the result to the original variable.

Addition assignment:

let x = 1;
x += 2; // Equivalent to x = x + 2; x = 3

Subtraction Assignment:

let x = 2;
x -= 1; // Equivalent to x = x - 1; x = 1

Multiplication Assignment:

let x = 2;
x *= 5; // Equivalent to x = x * 5; x = 10

Division Assignment:

let x = 20;
x /= 4; // Equivalent to x = x / 4; x = 5

Modulo Assignment:

let x = 14
x %= 3 // Equivalent to  x = x % 3; x = 2

Type Coercion

Type coercion is when the operator is used on a value that isn't the right type, value will be implicitly converted to the right type.
Here's an example:

let a = 5 + '5'; 
console.log(a); // result: 55
let b = '10' - 5;
console.log(b); // result: 5

In the first example, the number 5 is coerced into a string and that gives us 55 while in the second example, the 10 is coerced into a number and it gives us 5.

Comparison Operators

When two values or expressions are compared, comparison operators are used to determine whether one of the values is true or false and return a Boolean value (true or false). These operators are used in conditional statements and loops to make decisions which we'll get to later.

Comparison Operators	Description
==	Abstract or loose equality
===	Strict equality
!=	Abstract inequality
!==	Strict inequality
>	Greater than
>=	Greater than or equal to
<	Less than
<=	Less than or equal to

Loose comparison performs type coercion before comparing values, meaning JavaScript will try to convert values of various types to a single type before comparing them.

let a = '2';
let b = 2 ;
console.log('data type of a: ' + typeof a, '\ndata type of b: ' +typeof b);
console.log(a == b)
/*
data type of a: string 
data type of b: number
true
*/

Strict comparison does not perform type coercion before comparing values, meaning it checks both the values and their data types, giving you a precise comparison.

let a = '2';
let b = 2 ;
console.log('data type of a: ' + typeof a, '\ndata type of b: ' +typeof b);
console.log(a === b)
/*
data type of a: string 
data type of b: number
false
*/

It is the same for abstract and strict inequality.
Abstract inequality

let a = '2';
let b = 2 ;
console.log('data type of a: ' + typeof a, '\ndata type of b: ' +typeof b);
console.log(a != b)
/*
data type of a: string 
data type of b: number
false
*/

Strict inequality

let a = '2';
let b = 2 ;
console.log('data type of a: ' + typeof a, '\ndata type of b: ' +typeof b);
console.log(a != b)
/*
data type of a: string 
data type of b: number
true
*/

Greater than, Greater than or equal, Less than and Less than or equal:

let x = 10;
let y = 5;

console.log(x > y);  // true, 10 is greater than 5
console.log(x >= y); // true, 10 is greater than or equal to 5
console.log(x < y);  // false, 10 is not less than 5
console.log(x <= y); // false, 10 is not less than or equal to 5

Logical Operators

-&& The logical operator and: If the conditions being compared are all true, then the expression will return true. If one of the conditions being compared is false then the result will be false. If all the conditions compared are false then the result will be false.

let x = 5; 
let y = 7;
console.log( x>3 && y <10 ); //true
console.log( x>3 && y <x ); //false
console.log( x>y && y <x ); //false

|| The logical operator or: If one or all the conditions return true then the result will be true. If all conditions are false then the result is going to be false.

let x = 5; 
let y = 7;
console.log( x>3 || y <10 ); //true
console.log( x>3 || y <x ); //true
console.log( x>y || y <x ); //false

! The logical operator not: If the logical operator not is used with a boolean value it will return the opposite of that value. The value true becomes false and false becomes true.

let isTrue = true;

console.log(!isTrue); //false
console.log(!(!isTrue)); //true;

Unary Operator

The term "unary operator" refers to an operator that only accepts one operand, or value, to operate on. It is used for various purposes. Let's look at some examples:

The minus operator, is used to negate or change the sign of a number.

let x = -2;
console.log(-x); //2

The plus operator, is used to convert a value into a number.

let x = '42';
console.log('data type of x: '+ typeof +x); //number

Bitwise Operators

Bitwise operators are used to carry out operations on specific bits of binary representations of numbers.

Operator	Description
`&`	Bitwise AND: Performs AND operation on each bit of operands.
`	`
`^`	Bitwise XOR: Performs XOR operation on each bit of operands.
`~`	Bitwise NOT: Inverts the bits of the operand.
`<<`	Left Shift: Shifts bits to the left by specified positions.
`>>`	Right Shift: Shifts bits to the right by specified positions.
`>>>`	Zero-fill Right Shift: Similar to right shift with zero fill.

// Bitwise AND (&)
let resultAND = 5 & 3; // Result: 1
console.log(resultAND); // Output: 1

// Bitwise OR (|)
let resultOR = 5 | 3; // Result: 7
console.log(resultOR); // Output: 7

// Bitwise XOR (^)
let resultXOR = 5 ^ 3; // Result: 6
console.log(resultXOR); // Output: 6

// Bitwise NOT (~)
let num = 5;
let resultNOT = ~num; // Result: -6
console.log(resultNOT); // Output: -6

// Left Shift (<<)
let resultLeftShift = 5 << 2; // Result: 20
console.log(resultLeftShift); // Output: 20

// Right Shift (>>)
let resultRightShift = 20 >> 2; // Result: 5
console.log(resultRightShift); // Output: 5

// Zero-fill Right Shift (>>>)
let numNegative = -20;
let resultZeroFillRightShift = numNegative >>> 2; // Result: 1073741818
console.log(resultZeroFillRightShift); // Output: 1073741818

DEV Community