Back in the JavaScript Operators lesson, you’ve been introduced to the concepts of operators and how they are working, and the common types of operators.
Today, you’re going to learn another type of JavaScript operator that hasn’t been mention in the earlier lesson, and that is a unary operator.
A unary operator is a special symbol that takes only one operand and performs a certain operation on it. This means that if you take one operator and add a value next to it, it will perform an action and get a result.
These are the common types of Unary Operators, and they are:
- delete
- typeof
- Unary plus
- Unary negation
- Increment
- Decrement
delete
The delete operator will remove the property from the object. The delete can be useful to remove a single property from an object without throwing the undefined error into the property.
For example:
let student = {
name: 'John',
age: 18,
graduated: true,
};
delete student.age;
console.log(student);
In this example, we have an object called student and contains three properties. At first, it outputs all three properties called name, age, and graduated.
When we use the delete operator on the age property, we remove it from the student object, and now it returns only two properties.
The delete operator can also remove the values from the arrays, however, it will leave undefined behind which is not good. Instead, arrays have built-in methods for removing values. We talk about this part in a separate lesson.
typeof
The typeof operator will return the type of data in the variable. This is useful when you want to find out what type of data is returning in the variable before processing the data.
For example:
let a = 'apple';
let b = 4;
let c = true;
let d = { name: 'John' };
let checkA = typeof a;
let checkB = typeof b;
let checkC = typeof c;
let checkD = typeof d;
console.log(checkA); // string
console.log(checkB); // number
console.log(checkC); // boolean
console.log(checkD); // object
Let’s take a look at one of these variables. We got a variable called a and its value is apple. When you want to find out the type of data for this particular variable, what will you do is add the typeof operator next to the variable a as shown in the code above.
The result will display string since the value of a variable a has quote marks and any data that contains quote marks are treated as string.
Unary plus
The unary plus + operator will convert the operand into a number type. This is useful when you want to convert the string-type number into a number type. It will work on strings (Provided that it is a number) and booleans, but it will not work on objects or arrays.
For example:
let a = '54';
let b = true;
let c = false;
let convertA = +a;
console.log(convertA); // 54
let convertB = +b;
console.log(convertB); // 1
let convertC = +c;
console.log(convertC); // 0
Here, the value of a variable a is 54 which is a string (Remember, it’s enclosed with quote marks). When you use the unary plus + operator on a variable, it will convert into a number.
Notice how booleans are converted into numbers 0 and 1. This is because in the binary language (a language that a computer speaks), number 1 means true, and number 0 means false.
Unary negation
The negation operator - also converts the string number into a number type and the only difference is it also adds minus next to the operand value. It is handy when you want the converted number to be negative too.
For example:
let a = '54';
let b = true;
let c = false;
let convertA = -a;
console.log(convertA); // -54
let convertB = -b;
console.log(convertB); // -1
let convertC = -c;
console.log(convertC); // -0
In this example, the value of a variable a is 54 which is a string. If you use the unary negation - operator in front of a variable, it will convert into a number. And since it’s a negation operator, the converted number will have the - symbol next to the value.
The unary negation - operator will also convert the booleans into numbers and it will have the - symbol next to the value.
Increment
The increment operator ++ adds the number to the operand by one and returns a value. For example:
let a = 1;
a++;
console.log(a); // 2
Here, we create variable a with the value of 1. We then add the increment operator ++ next to the variable meaning the value of the a variable will go up by one, thus when you check it via console log, the value of the variable a has become 2.
There are two ways you can use the increment operator and that is postfix and prefix.
In the postfix, you place the operator after the operand like this a++. Doing this way will return the value before the number has been added up.
Example of the postfix increment:
let a = 1;
console.log(a++); // 1
console.log(a); // 2
When you first log out the value of the a variable, nothing is happening here. It just prints number 1. That is because it is first returning the original value of the variable before the value is changed to number 2. So when you log out again, this time the value of the a variable will be 2.
And in the prefix, you place the operator before the operand like that way ++a. And by doing that way, it will return the value after the number has been added up.
Example of the prefix increment:
let a = 1;
console.log(++a); // 2
console.log(a); // 2
When you log out the value of the a variable, It has already changed to number 2 because by placing the operator before the operand, it will execute the code first before printing the result. Therefore, when you log it out again, the value of the a variable will still be 2.
Decrement
The decrement operator -- subtracts the number to the operand by one and returns a value. It is the complete opposite of the increment operator. For example:
let a = 1;
a--
console.log(a); // 0
Here, we once again create a variable a with the value of 1. We add the decrement operator -- next to the variable meaning the value of the a variable will go down by one, thus when you look at the console log, the value of the variable a has become 0.
Like the increment operator, you can also use the decrement operator in two ways and that is postfix and prefix.
In the postfix, you place the operator after the operand like this a--. This will return the value before the number has been added down.
Example of the postfix increment:
let a = 1;
console.log(a--); // 1
console.log(a); // 0
When you first log out the value of the a variable, nothing is happening here since it is returning the original value of the variable first before the value is changed to number 0. So when you log out again, this time the value of the a variable will be 0.
And in the prefix, you place the operator before the operand like that way --a. And by doing that way, it will return the value after the number has been added up.
Example of the prefix increment:
let a = 1;
console.log(--a); // 0
console.log(a); // 0
When you log out the value of the a variable, It has already changed to number 0 since placing the operator before the operand will execute the code first before printing the result. Therefore, when you log it out again, the value of the a variable will be 0 again.
Coding tasks
It’s your turn to practice things you’ve learned in this lesson.
Task 1
The items object has three properties: item1, item2, and item3. We want you to remove the item1 property from the object by using the delete operator.
Type the following commands in the code editor:
const items = {
item1: 'hat',
item2: 'shoes',
item3: 'watches'
}
delete items.item1;
console.log(items);
And hit the “RUN” button to run the program.
Task 2
The number variable has a string value of 347 and we want you to convert it into a number type.
Type the following commands in the code editor:
let number = '347';
let convertNumber = +number;
console.log(convertNumber);
And hit the “RUN” button to run the program.
Task 3
We want to know what type of data is in variables a, b, and c. To find out, we will need the typeof operator for this task:
Type the following commands in the code editor:
let a = '9';
let b = 4;
let c = '17';
let checkA = typeof a;
let checkB = typeof b;
let checkC = typeof c;
console.log(checkA);
console.log(checkB);
console.log(checkC);
And hit the “RUN” button to check the results.
Task 4
There’s a small mistake in this task. A developer created a simple program that will add the number by one but forgot to include the increment operator.
let x = 15;
x;
console.log(x);
Add the missing operator so that the output prints 16.
Task 5
Another mistake in this task too! A developer created a simple program that will subtract the number by one but again forgets to use the decrement operator.
let x = 38;
x;
console.log(x);
Add the missing operator so that the final output will display 37.