Unary operators in JavaScript are operators that work with a single operand to perform various operations.
Operators like unary plus, unary minus, prefix increments, postfix increments, postfix decrements, and prefix decrements are illustrations of such operators. They can be positioned either before or after the operand.
Unary operators in JavaScript are widely favored for executing functions efficiently. They are highly popular due to their flexibility and versatility, as they cannot be altered or overridden.
Types of unary operators
Unary operators revolve around a single value. The table below presents a list of unary functions along with their descriptions:
| Unary Operators | Operator's Name | Operators Description |
|---|---|---|
+x |
Unary Plus | The operator converts an input value into a number |
-x |
Unary Minus | The operator converts a value into a number and negates it |
++x |
Increment Operator (Prefix) | The operator uses to inserts one value before the incremental value by one |
--x |
Decrement Operator (Prefix) | The operator Subtracts one value from the given input value before |
x++ |
Increment Operator (Postfix) | The operator uses to inserts one value after the incremental value by one |
x-- |
Decrement Operator (Postfix) | The operator subtracts one value before the incremental value by one. |
Unary operator's description
JavaScript utilizes various operators to display the definition, syntax, example, and explanation.
Unary plus (+) operator
The unary plus operator, represented by the simple plus symbol (+), performs unary addition on a number. When placed in front of a number, the unary plus operator does not alter the value of the number.
Syntax
The unary plus operator below demonstrates its functionality with the given value.
let a = 4;
let b = +a;
console.log(b);
The table below illustrates the guidelines that the Number function follows when a non-numeric value is subjected to the unary plus operator:
| Value | Result |
|---|---|
| boolean | The output shows 0 to false and 1 to true |
| string | It converts the input string value based on particular rules |
| object | The Object work with the valueOf() or toString() method to get the required value. The value converts into a number. |
Examples
The upcoming instances demonstrate the utilization of the addition operator with the variable operand and unary plus operator.
In this example, we demonstrate the fundamental functionality of the unary plus (+) operator when applied to an operand. Specifically, we showcase the application of a basic plus sign to numerical data.
<!DOCTYPE html>
<html>
<head>
<title> JavaScript unary plus (+) operator </title>
</head>
<body>
<h3> JavaScript unary plus (+) operator </h3>
<p> Using the addition method to add values </p>
<script>
console.log("JavaScript unary plus (+) operator ");
let a = 10;
let b = +a;
console.log(a);
console.log(b);
let c = '21';
console.log(+c);
let d = false,
e = true;
console.log(+d); // 0
console.log(+e); // 1
</script>
</body>
</html>
Output
The data resulting from the unary plus operator is displayed as output.
Illustrative Example 2: The subsequent instance demonstrates the fundamental functionality of the unary plus (+) operator when used with an operand. In this case, a function utilizing the "this" keyword is required for the fundamental value.
<!DOCTYPE html>
<html>
<head>
<title> JavaScript unary plus (+) operator </title>
</head>
<body>
<h3> JavaScript unary plus (+) operator </h3>
<p> Using the addition method to add values </p>
<script>
console.log("JavaScript unary plus (+) operator ");
function unary_function(plus) {
this.number = plus;
}
unary_function.prototype.valueOf = function() {
return this.number;
};
const obj_val = new unary_function(18);
console.log(obj_val + 5);
</script>
</body>
</html>
Output
The output displays data represented by the unary plus operator.
Unary minus (-) operator
The unary minus operator is denoted by a solo minus sign (-) and it is used to negate a number when applied to it.
Syntax
The unary minus operator below demonstrates how it functions with a value.
let a = 4;
let b = -a;
console.log(b);
When the unary minus operator is applied to a non-numeric value, it converts the value to a number following the rules of the unary plus operator, effectively negating the value.
Examples
The illustrations below demonstrate the subtraction operator being used with both variable operands and the unary minus operator.
Illustration 1: The provided instance demonstrates the basic functionality of the unary plus (-) operator when applied to an operand.
<!DOCTYPE html>
<html>
<head>
<title> JavaScript unary minus (-) operator </title>
</head>
<body>
<h3> JavaScript unary minus (-) operator </h3>
<p> Using the subtraction method to add values </p>
<script>
console.log("JavaScript unary minus (-) operator ");
let a = 10;
let b = -a;
console.log(a);
console.log(b);
let c = '21';
console.log(-c);
let d = false,
e = true;
console.log(-d); // 0
console.log(-e); // 1
</script>
</body>
</html>
Output
The unary minus operator shows as output data.
Illustrative Example 2: Demonstrating the fundamental functionality of the unary minus (-) operator alongside its operand. This illustration involves the utilization of a function incorporating the "this" keyword to establish the core value.
<!DOCTYPE html>
<html>
<head>
<title> JavaScript unary minus (-) operator </title>
</head>
<body>
<h3> JavaScript unary minus (-) operator </h3>
<p> Using the minus operator with a method to subtract values </p>
<script>
console.log("JavaScript unary minus (-) operator ");
function unary_function(minus) {
this.number = minus;
}
unary_function.prototype.valueOf = function() {
return this.number;
};
const obj_val = new unary_function(28);
console.log(obj_val - 5);
console.log(obj_val + 3 - 5);
console.log(obj_val + 3 - 35);
</script>
</body>
</html>
Output
The unary minus operator data shows as an output.
Unary Logical Not(!) operator
The unary logical NOT operator performs a logical operation on a Boolean value, producing the inverse Boolean output. It negates the input value and returns the resulting Boolean value.
Example
An illustration provided demonstrates the fundamental functionality of the unary Logical Not(!) operator.
Using an operand requires a function that incorporates the not operator along with the input data.
<!DOCTYPE html>
<html>
<head>
<title> JavaScript unary Logical Not(!) operator </title>
</head>
<body>
<h3> JavaScript unary Logical Not(!) operator </h3>
<p> Using the logical not operator with a method to negative values and boolean output </p>
<script>
console.log("JavaScript unary Logical Not(!) operator ");
function unary_function(not) {
this.number = not;
}
unary_function.prototype.valueOf = function() {
return this.number;
};
const obj_val = new unary_function(!false);
const obj_val2 = new unary_function(!"-5");
const obj_val3 = new unary_function(!"5");
console.log(obj_val, !false);
console.log(obj_val2, !"-5");
console.log(obj_val3, !"5");
</script>
</body>
</html>
Output
The output displays the data of the unary logical operator, also known as the "not" operator.
Prefix Unary increment (++) operator
The unary increment operator in JavaScript increases the value before any operation is performed. It adds one to the original value by default. This operator requires an operand to specify the value to be incremented and then returns the incremented value.
Syntax
The unary increment operator below demonstrates its functionality with a value.
let a = 4;
let b = ++a;
console.log(b);
When the unary increment operator is applied to a non-numeric value, it results in the value being coerced to a numeric type. This operator specifically operates on numerical input values for performing addition.
Examples
The illustrations below demonstrate the usage of the increment operator to add one, employing both the variable operand and the unary increment operator.
Illustrative of basic functionality, the provided instance showcases the unary increment (++) operator in action with its operand.
<!DOCTYPE html>
<html>
<head>
<title> JavaScript unary increment (++) operator </title>
</head>
<body>
<h3> JavaScript unary increment (++) operator </h3>
<p> Show console tab to get the output of the add values </p>
<script>
console.log("JavaScript unary increment (++) operator");
let a = 10;
let b = ++a;
console.log(a);
console.log(b);
let c = '21';
console.log(++c);
let d = false,
e = true;
console.log(++d); // 0
console.log(++e); // 1
</script>
</body>
</html>
Output
The output displays the unary increment operator data.
Demonstration 2: This specific example showcases the fundamental functionality of the unary increment (++) operator when used with an operand. In this case, a function utilizing the "this" keyword is required for executing the basic addition operation and presenting its resulting value.
<!DOCTYPE html>
<html>
<head>
<title> JavaScript unary increment (++) operator </title>
</head>
<body>
<h3> JavaScript unary increment (++) operator </h3>
<p> Show console tab to get the output of the add values </p>
<script>
console.log("JavaScript unary increment (++) operator");
function unary_function(plus) {
this.number = plus;
}
unary_function.prototype.valueOf = function() {
return this.number;
};
var obj_val = new unary_function(28);
console.log(++obj_val);
console.log(++obj_val - 1);
console.log(++obj_val + 1);
</script>
</body>
</html>
Output
The output displays the unary increment operator data.
Prefix Unary decrement (--) operator
The JavaScript unary decrement operator is utilized to decrease the value before any operation is performed. It reduces the value by one from its original and default state. This operator requires an operand to subtract the value and provide the updated result.
Syntax
The unary decrement operator demonstrates the functionality by decreasing the value.
let a = 4;
let b = --a;
console.log(b);
Example
The provided instance demonstrates the fundamental functionality of the unary decrement operator (--) when used with an operand.
<!DOCTYPE html>
<html>
<head>
<title> JavaScript unary decrement (--) operator </title>
</head>
<body>
<h3> JavaScript unary decrement (--) operator </h3>
<p> Show the console tab to get the output of the subtracted values </p>
<script>
console.log("JavaScript unary decrement (--) operator");
let a = 10;
let b = --a;
console.log(a);
console.log(b);
let c = '21';
console.log(--c);
let d = false,
e = true;
console.log(--d);
console.log(--e);
</script>
</body>
</html>
Output
The output displays the data of the unary decrement operator.
Postfix Unary increment (++) operator
The unary increment operator in JavaScript increases the value after the operation. It is employed to add one to a value following a mathematical operation.
Syntax
The unary increment operator that follows the value is known as the postfix increment operator.
let a = 4;
let b = a++;
console.log(a);
When the unary increment operator is applied to a non-numeric value, it coerces the value to a numeric type. This allows the original variable to be increased by one.
Example
The provided illustration demonstrates the functionality of the postfix unary increment (++) operator when used with an operand.
<!DOCTYPE html>
<html>
<head>
<title> JavaScript postfix unary increment (a++) operator </title>
</head>
<body>
<h3> JavaScript postfix unary increment (a++) operator </h3>
<p> Show the console tab to get the output of the additional values after the functionality. </p>
<script>
console.log("JavaScript unary increment (++) operator");
let a = 10;
let b = a++;
console.log(a);
console.log(b);
let c = '21';
console.log(c++);
console.log(c);
let d = false,
e = true;
console.log(d++); // 0
console.log(e++); // 1
</script>
</body>
</html>
Output
The output displays the unary increment operator data.
Postfix Unary decrement (--) operator
The unary decrement operator in JavaScript decreases the value after the operation is executed. This operator is used to subtract one from a variable's current value following a mathematical operation.
Syntax
The subsequent postfix unary decrement operator affects the value.
let a = 4;
let b = a--;
console.log(a);
Example
The provided illustration showcases the functionality of the postfix unary decrement (--) operator when used with an operand.
<!DOCTYPE html>
<html>
<head>
<title> JavaScript postfix unary decrement (a--) operator </title>
</head>
<body>
<h3> JavaScript postfix unary decrement (a--) operator </h3>
<p> Show the console tab to get the output of the additional values after the functionality. </p>
<script>
console.log("JavaScript unary decrement (--) operator");
let a = 76;
let b = a++;
console.log(a);
console.log(b);
let c = '81';
console.log(c--);
console.log(c);
</script>
</body>
</html>
Output
The postfix decrement operator for unary operators displays the data as output.
Unary bitwise not (~) operator
The bitwise NOT operator is utilized for performing binary negation, rather than employing an inversion function. Its purpose is to invert the input value within the script.
Example
The provided illustration demonstrates how the unary operator ~, known as bitwise not, functions when applied to an operand.
<!DOCTYPE html>
<html>
<head>
<title> JavaScript unary bitwise not (~) operator </title>
</head>
<body>
<h3> JavaScript unary bitwise not (~) operator </h3>
<p> Show the console tab to get the binary output, not functionality. </p>
<script>
console.log("JavaScript unary bitwise not (~) operator");
let a = ~76;
console.log(a);
let b = ~-76;
console.log(b);
let c = ~ '81';
console.log(c);
</script>
</body>
</html>
Output
The output displays the data produced by the unary bitwise not operator.
Unary delete operator
The delete operator in JavaScript is a unary operator utilized for removing a specific index from an array. It does not impact the operand, variable, or other functionalities. This operator is employed to eliminate a specific index preceding the operand containing a variable, displaying the values as an output.
Example
The provided illustration showcases the functionality of the unary delete operator when paired with an operand.
<!DOCTYPE html>
<html>
<head>
<title> JavaScript unary delete operator </title>
</head>
<body>
<h3> JavaScript unary unary delete operator </h3>
<p> Show the console tab to get the output of the operand after the use of the delete operator. </p>
<script>
console.log("JavaScript unary unary delete operator");
let a = 76;
console.log(a);
delete a;
console.log(a);
</script>
</body>
</html>
Output
Display the operand as an output after using the unary delete operator.
Unary void operator
The void operator, classified as a unary operator, is utilized as an expression to produce the result of undefined input data. It displays the function's details in the output tab through an empty return type. Devoid of any input data, the void operator reveals an unspecified value.
Example
The provided sample demonstrates the unary void operator's functionality when used with a JavaScript function.
<!DOCTYPE html>
<html>
<head>
<title> JavaScript unary void operator </title>
</head>
<body>
<h3> JavaScript unary unary void operator </h3>
<p> Show the console tab to get the operand output after using the void operator. </p>
<script>
console.log("JavaScript unary unary void operator");
void 0
var wlcm_var = function () {
console.log('hello students, welcome to tutorial!')
return 21;
}
var re_var = wlcm_var()
console.log(re_var);
var rslt_var = void (wlcm_var())
console.log(rslt_var);
</script>
</body>
</html>
Output
Display the operand as an output after using the unary void operator.
Conclusion
Unary operators simplify the execution of JavaScript values by providing various operations and functionalities in a straightforward manner. This ease of use benefits both developers and users when working with JavaScript values.