DEV Community

Cover image for What you should know about Unary Operators in JavaScript
Emmanuel Fordjour Kumah
Emmanuel Fordjour Kumah

Posted on

What you should know about Unary Operators in JavaScript

#codenewbie #beginners #webdev #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
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

The output will be

unary plus on true will result in  1
unary plus on false will result in  0
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

The output will be

NaN
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

The output of the above will be

the value of x is 80
the value of y is now  81
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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]);
}
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

The output will be

decreasing the age by 1 results in 99
Enter fullscreen mode Exit fullscreen mode
  • 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)
Enter fullscreen mode Exit fullscreen mode

The output will be

the value of y is  10
the value of x is now  9
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

The output will be

data type of name is  string
data type of age is  number
data type of isAlive is  boolean
Enter fullscreen mode Exit fullscreen mode

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++;
Enter fullscreen mode Exit fullscreen mode

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 )

Top comments (1)

Collapse
 
mussa_chitemo profile image
MUSSA CHITEMO •

Very helpful 🔥 thank you 😊