What you should know about Unary Operators in JavaScript
Tags: javascript, webdev, beginners, codenewbie
Published: 2022-01-20 12:35:28

Hello World, in high school, we learnt the basic mathematical operators, addition `+`, multiplication `*` , substraction `-` and division `/`. 
JavaScript also utilizes these operators to solve programming problems. 

In this post, we take a look at the unary operator in JavaScript.

## Understanding basic terms 
Before we dive further, let's understand some common terms

- `Operation`: An operation is a calculation of one or more values, called `operands` resulting in an output.
- `Operators`: These are signs or symbols that connects to the `operand`
- `Operand`: Operand is what the `operators` are applied to. 

For instance in the `operation`  2 `+` 3, there are two operands, the left operand which is `2` , and the right operand which is `3`. The `+` sign in the middle then becomes the `operator`.
The `operator` will be applied on the `operand` to give the desired output. 

There are several types of operators in Javascript

- Assignment operators
- Comparison operators
- Unary operators
- Logical operators
- String operators 
- Ternary operators etc.

We focus on  `Unary` Operators in this article.

### What is Unary Operator 

> An operator is said to be unary if it has a single `operand`. 

The `unary` operator can either be before or after the `operand`. 

JavaScript supports numerous unary operators, the below are some of the operators and their uses.
#### Unary operators and their uses.

- Unary plus (`+`): It converts the operand into a numeric value
- Unary minus(`-`): It converts the operand into a numeric value and negates the number afterwards.
- Prefix / postfix increment(`++`): The increment operator add a value of 1 to its operand and returns the incremented value
- Prefix / postfix decrement(`--`): The decrement operator substracts a value of 1 from its operand and returns the decremented value
- `typeof`: It returns `string` which gives you the data type of the operand.
- Logical NOT (`!`): Converts the operand to a boolean value and then negates it. 

We will go deeper into the Logical NOT (`!`) in my next article, for now, let's see the implementation of the above operators.
 

### How to use the Unary plus (+) operator
The unary plus `+` operator helps us convert something into a numeric value. It can covert

- all string representation of numbers  to their actual numeric values
- boolean values (`true` and `false`) to numeric values
- `null` to numeric values. 

#### Syntax
The syntax for the unary operator is 

```
operator operand
```
For instance `+`100;

#### Converting string representation of numbers to numeric values 
When we have a `string` value, for instance `'10'`, we can change it to a `numeric` value using the unary `+` operator. 

Meaning, instead of having the `data type` to be a `string`, we can change it type to be a `number`.


Let's see the example below :

```
let x = '10';
console.log('the value of x is :', x );
console.log('the type of x is : ', typeof x);
/*converting the data type to number using unary plus */
x = +x;
/*checking the value and data type */
console.log('the value of x is : ', x);
console.log('the type of x is : ', typeof x);

```


The output will be 

```
the value of x is : 10
the type of x is :  string
the value of x is :  10
the type of x is :  number
```
Let's investigate what is happening above. 

Initially, the data type of `x` was a `string`, we then used the unary plus operator `+` to change the type to a `number`.
Now, instead of working with a string value of `x` (Eg, `'10'`), we have converted it to the `numeric` value (`10`).

### Applying the unary plus operator on boolean

When the unary plus `+` is applied on a `boolean`, it will convert it to the corresponding numeric value. 
For instance :
- `false` will be converted to `0` 
- `true` will be converted to `1`.

Let's see an example below 

```
console.log('unary plus on true will result in ', +true);
console.log('unary plus on false will result in ', +false)

```
The output will be 

```
unary plus on true will result in  1
unary plus on false will result in  0
```
Since the unary plus (`+`) works to convert a string value (eg. `'50'` to a numeric value, if it is operated on any string, it cannot convert it to numeric value hence will return `NaN`.

Let's see an example 

```
let text = "this is a string";
console.log(+text);
```
The output will be 

```
NaN
```
The `text` variable is a **string **of characters not a **number **hence it will return `NaN`.

### How to use the Unary minus operator

> The unary minus converts an operand to a negative numeric value 

Like the unary plus (`+`) the unary minus (`-`) converts the type to `number`. However, it will negate the value. 

Let's use the same example above but use the unary minus `-` operator

```
let x = '10';
console.log('the value of x is :', x );
console.log('the type of x is : ', typeof x);
x = -x;
console.log('the value of x is : ', x);
console.log('the type of x is : ', typeof x);
```

The output will be 

```
the value of x is : 10
the type of x is :  string
the value of x is :  -10
the type of x is :  number
```

### Using the increment operator 

> The increment operator (`++`) increases a value by 1 and returns the incremented value. 

It can be used as either a **postfix **or **prefix **operator.

- The postfix increment operator means the operator comes after the operand. Eg `a++`. This will return the value first, before performing any increment. 
- The prefix increment operator performs the increment and immediately returns the value.

#### Using the prefix increment operator
- With the prefix, the operator comes before the operand. Eg `++a`. 
This will **increase the value then immediately return the increased value.**

Let's take a look at some examples 

```
let x = 80;
console.log('the value of x is', x);
let y = ++x;
console.log('the value of y is now ', y);
```
The output of the above will be 

```
the value of x is 80
the value of y is now  81

```
#### Using the postfix increment operator.
With the postfix increment operator, the operator comes after the operand. Eg `a++`. 
The postfix increment, will **return the initial value before incrementing. **

Let's take a look at the example below 

```
let a = 3;
console.log('the value of a is ', a);
let b = a++;
console.log('the value of b is ', b);
console.log('the value of a is now ', a);

```
The output of the above code will be 

```
the value of a is  3
the value of b is  3
the value of a is now  4
```
With the above output, eventhough we are incrementing the variable `a`, and assigning it to `b`, when we console.log `b` the output is still `3`. 

- This is mainly because the postfix  increment operator will **display the initial value and increase the value afterwards. 

- We display `3`, then increases the value, later when we console.log `a` the value has increased to `4`. 

We normally will see the postfix increment operator in action in a `for` loop. 
Eg. in the code below

```
var colors=["red","blue","green"];
for (let i = 0; i < colors.length; i++) { 
  console.log(colors[i]);
}
```
Because the postfix increment operator (`i++`) returns the value then later increase it by 1, we will display the initial item in the colors array using the index of 0, increase its index , then move to the next item. 

### Using the decrement operator 

> The decrement operator (--) decrements (subtracts one from) its operand and returns a value.

It can also be used as a **postfix or prefix operator**. 
 

- The prefix decrement operator will substract 1 from a value and then return it. 

In the example below, we are using the prefix decrement to substract 1 from the `myAge` variable.

```
let myAge = 100; 
myAge = --myAge;
console.log('decreasing the age by 1 results in', myAge)
```
The output will be 

```
decreasing the age by 1 results in 99
```

- The postfix decrement operator returns the value before decreasing.  

Let's apply the postfix decrement operator on the example below

```
let x = 10; 
let y = x--;
console.log('the value of y is ', y)
console.log('the value of x is now ', x)
```
The output will be 

```
the value of y is  10
the value of x is now  9
```
Because we are using the **postfix **decrement, we return the value of `x` first (10), assign it to `y` before decreasing it by 1.
Now if we consoloe.log(x) we get the value of `9`.

### Understanding the `typeof` operator. 
We have already used the `typeof` in the examples above. 

> `typeof` is a unary operand which returns a string indicating that the data type of the operand.

#### Syntax 
The syntax will be 

```
typeof operand;
```
Let's see some examples 

```
let name ="Emmanuel"
let age = 30;
let isAlive = true;

console.log('data type of name is ', typeof name);
console.log('data type of age is ', typeof age);
console.log('data type of isAlive is ', typeof isAlive);
```
The output will be 

```
data type of name is  string
data type of age is  number
data type of isAlive is  boolean
```

### Challenge
Let's take a little challenge to text our knowledge. 

- What will be the final values of all the variables `a`, `b`, `c` and `d` after the code below ?

```
let a = 1, b = 1;

let c = ++a; 
let d = b++;
```

## Summary
In summary, we learnt that 

- Unary operators work on one value
- The unary plus (`+`) or unary minus (`-`) will change a non numeric value to a number 
- The increment operator (`++`) adds one to a value, whilst the decrement operator (`--`) substracts one from a value. 
- The `typeof` operator helps you know the `data type` of the variable.
 
Trust you learnt something useful from this article, i would love to read your comments or feedback. 

Written with love, from Ghana. Me daa se ( Thankyou )