DEV Community is a community of 861,926 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Emmanuel Fordjour Kumah

Posted on

What you should know about Unary Operators in JavaScript

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.