In the previous tutorial so far, we learned all binary operators and ternary operators. JavaScript also provides Unary operators that requires only single variable.

Unary operators in JavaScript are those operators that works on a single operand, which may be variable or literal.

In other simple words, unary operators are operators that have a single operand.

For example, to assign two variables with different values containing positive or negative signs, the statements are:

let x = -10; // Assign 'x' x negative 10.
let y = +20; // Assign 'y' y positive 20 (the plus is not required).

Arithmetic operators can also be done on a single operand using unary operators. For example, the statement x = x + 1 has the same result as expression x++.

Types of Unary Operators in JavaScript

---

The list of JavaScript unary operators is given below:

Operator	Meaning
+	Changes the operand to a number.
–	Changes the sign of a value or negates a operand.
++	Increment a value by 1.
—	Decrement a value by 1.
delete	Removes a property.
void	Returns undefined.
typeof	Returns a string representing data type.
~	Bitwise NOT
!	Logical NOT

Let’s understand all types of JavaScript unary operators one by one.

Unary Plus Operator in JavaScript

---

A unary plus operator in JavaScript that allows us to explicitly specify the sign of numeric literals. It can be used to convert something to a number. Consider the following example.

let x = +"20";

In the above statement, the code results in the string “20” being converted to a number by JavaScript unary plus operator and the numeric value 20 being stored in the variable x. If the conversion is not possible, it returns NaN.

Unary Negation Operator

---

When the unary minus operator is used before a single operand, it performs unary negation. In other simple words, it converts a positive value to an equivalent negative value and vice versa. If the operand is not a number then this operator tries to convert it to 1.

Let’s take some example program based on the unary minus operator.

Program code 1:

Output:
       Value of a: -40

Program code 2:

Output:
      Value of a: -20

Try It Yourself

Program code 3:

JavaScript Increment Operator (++)

---

Increment operator in JavaScript is an unary operator that increases the value of a variable by one. In simple words, it increments a number by 1. It is represented by ++.

The ++ operator can be used into two forms:

• Pre-increment unary operator (Prefix)
• Post-increment unary operator (Postfix)

1. Pre-Increment (Prefix):

When we write ++ operator before a variable, it is called pre-increment or prefix unary operator. In pre-increment, the increment is done first and then returns the new incremented value.

In other words, the prefix operator first adds 1 to the value of an operand, and then the result is stored in the left-hand side variable. The general syntax of prefix unary operator is as follows:

++x;

If operand is a string, it is converted to a number. If the conversion is not possible, it returns NaN.

Let’s take some example programs based on pre incrementing unary operator in JavaScript.

Program code 4:

Output:
       x is 11, y is 11

The first statement in the script code assigns a value 10 to x. The second statement in the script code performs two different actions:

• Increments x to 11.
• Assigns the new incremented value 11 to y.

Program code 5:

Output:
     x is 21, y is 21

Try It Yourself

Program code 6:

2. Post-Increment (Postfix):

When we write ++ operator after a variable, it is called post increment or postfix unary operator. In post-increment, the operator first returns the value of operand and then at the end increment is done.

In other words, the postfix operator first stores the value in the left-side variable and then the operator adds 1 to an operand. The general syntax of post-incrementing operator is as follows:

x++;

If the operand is a string, it is converted into a number. If the conversion is not possible, it returns NaN.

Let’s take some example program based on post-incrementing unary operator in JavaScript.

Program code 6:

Output:
     x is 51, y is 50

As you can observe that with postfix operator, the value of x is first stored in y and then x is incremented by 1. Therefore, the final value of x is 51 but the final value of y remains as 50.

Program code 7:

Output:
     x is 31, y is 30

Program code 8:

Output:
       x = 2
       y = 2
       z = 3
       p = 2
       q = 0
       exp = 6 

In this example program, the initial values of x, y, z are true, false, and 2 respectively. If the boolean value is true, it is converted into 1. If the boolean value is false, it is converted into 0.

1. When the statement p = ++x executes by JavaScript interpreter, the value of x is incremented first by 1 and then the value of x is displayed as 2 on the browser.

After incrementing, the value of x is stored into the variable p. Therefore, the value of p is also displayed as 51 (same as that value of x). Thus, this operation happened in the below form:

x = x + 1;
p = x;

2. When the statement q = y++ executes by interpreter, the current value of y is stored into the variable q because the increment operator is in postfix form. Therefore, the value of q is displayed as 0.

After storing the current value of y into q, y’s value is incremented by 2 because y is modified two times in the program and then it is assigned to y. Therefore, the value of y is displayed as 2 on the browser. Thus, this operation occurs into two steps:

q = y;
y = ( y + 1) + 1;

3. When the statement exp = x + y++ + ++z is executed, the value of x is assigned as 2 because the value of x is now 2 after increment. The value of y is incremented by 1 and then it is assigned as 1 into y because y++ is in postfix form.

Similarly, the value of z is also incremented by 1 and then it is assigned 3 into z. The sum of three values 2 + 1+ 3 will be stored into the variable c. Thus, the output is 6.

---

Program code 9:

Output:
     x = 23
     y = 33

This program is more complicated than the previous example program. So, let’s understand the explanation of the above program.

1. When ++x executes in the numerator of expression, first, value’s x is incremented by 1 and then returns to the expression as 21, which is multiplied by 10.

So, the operation will occur like this: let y = 21 * 10 / x++ + ++x; // x assigns the value of 21.

2. Next, when x++ in the denominator of expression executes, the value of x is again incremented by 1 but the original value 21 of x will use in the expression because it is post-increment.

So, the next operation will be like this: int y = 21 * 10 / 21 + ++x; // x assigns value of 21.

3. The final assignment of x increments the value of x by 1 because it is pre-increment. So, the value of x is now 23 because, after post-increment, the value of x returned as 22 to the ++x.

We can simplify this: let y = 21 * 10 / 21 + 23; // x assigns value of 23.

4. Finally, we can easily evaluate multiply and division from left to right and perform simple addition. Thus, the final value of x is 23, and the value of y is 33.

---

Try It Yourself

Program code 10:

Decrement Operator (- -) in JavaScript

---

Decrement operator (- -) in JavaScript is an unary operator that decrements the value of a variable (operand) by one. It is represented by ( – – ).

The operator – – subtracts 1 to the value of operand. It occurs into two forms:

• Pre-decrement unary operator (Prefix)
• Post-decrement unary operator (Postfix)

1. Pre decrement:

When we write – – operator before a variable, it is called pre decrement unary operator in JavaScript. In pre decrement, the decrement is done first and then returns a new decremented value.

In other words, the prefix operator first subtracts 1 to an operand, and then the result is stored in the left-hand-side variable. The general syntax of pre-decrement operator is as follows:

- -x

Let’s take some example program based on pre-decrement operator in JavaScript.

Program code 11:

Output:
      x is 9, y is 9

Inside the script code, the first statement assigns the value 10 to x. The second statement in the script performs two different actions:

• Decrements x to 9.
• Assigns a new decremented value to y.

2. Post decrement:

When we write – – operator after a variable, it is called post decrement unary operator in JavaScript. In post-decrement, the operator first returns the value of operand and then at the end, decrement is done.

In other words, the postfix operator first stores the value in the left-side variable and then the operator subtracts 1 to an operand. The general syntax of post decrement operator is as follows:

x--;

Let’s take an example program based on post decrement operators.

Program code 12:

Output:
       x is 9, y is 10

As you can observe that with postfix operator, the value of x is first stored in y and then x is dcremented by 1. Therefore, the final value of x is 9 but the final value of y remains as 10.

---

Let’s take an example program based on the pre, post increment and pre, post decrement operators for best practice.

Program code 13:

Output:
      a is 1, x is 10

---

In this tutorial, you learned unary operators in JavaScript with various example programs. Hope that you will have understood the basic concepts of pre and post increment operators, pre and post decrement operators.
Thanks for reading!!!

The post Unary Operators in JavaScript | Increment, Decrement appeared first on Scientech Easy.