JavaScript Unary Operators: Simple and Useful

#ReactJS is taking over #frontend #developing!  by @samerbuna #javascript #webdev

  • Unary operators are more efficient than standard JavaScript function calls.
  • If the operand cannot be converted into a number, the unary plus operator will return NaN.
  • Both the unary negation and plus perform the same operation as the Number() function for non-numbers.
  • var, let and const create non-configurable properties that cannot be deleted with the delete operator:

    Notice that the var keyword is marked as non-configurable

    Arrays are considered type object in javascript.

  • The void operator is used in either of the following ways: void (expression) void expression

    The void operator is not a function, so () are not required, but it is good style to use them according to MDN

    The void operator can be used to specify an expression as a hypertext link.

You might have come across things like i++, –i in loops or ! when writing conditions. Ever wondered how these operations work? Well,…

@starliftorg: #ReactJS is taking over #frontend #developing! by @samerbuna #javascript #webdev

You might have come across things like i++, –i in loops or ! when writing conditions. Ever wondered how these operations work? Well, these are unary operators and we are going to take an in-depth look into how they work.

What is an operator?

Mathematically, an operation is a calculation on one or more values called operands mapping to an output value. An operator is a symbol/sign that maps operands to output values.

What is an unary operator?

A unary operation is an operation with only one operand. This operand comes either before or after the operator. Unary operators are more efficient than standard JavaScript function calls. Additionally, unary operators can not be overridden, therefore their functionality is guaranteed.

It can convert all string representations of numbers, boolean values(true and false) and null to numbers. Numbers will include both integers, floats, hexadecimal, scientific (exponent) notation and Infinity.

If the operand cannot be converted into a number, the unary plus operator will return NaN.

Examples:

The illustration above clearly shows how the + operator will behave when applied to different data types.

An object can only be converted if it has a key valueOf and it’s function returns any of the above types.

Unary plus is considered the fastest and preferred way of making conversions because it doesn’t perform any additional operation. Both the unary negation and plus perform the same operation as the Number() function for non-numbers.

Examples:

The above illustration demonstrates how logical not returns false if the operand can be converted to true, if not it returns false.

You can use double negation(!!)

Let us take a look at a more awesome example:

Why true? So we execute from right to left.

Then:

Thus:

It can be used as a postfix or prefix operator.

Examples:

It returns a value before decrementing if it is postfix. Prefixing it returns the value after decrementing.

Examples:

A bitwise not on a number results in: -(x + 1).

The table below takes a deeper look into how this operation is performed.

It returns true if it successfully deleted the property or if the property does not exist. It returns false if it fails to delete an item.

Delete does not have any effect on both functions and variables. Let’s look at the following examples.

As earlier stated, it deletes the property or the whole object. Examples:

Delete has no effect on an object property that is as non-configurable. It will always return false. In strict mode, this will raise a SyntaxError.

Read more about defineProperty()

var, let and const create non-configurable properties that cannot be deleted with the delete operator:

Notice that the var keyword is marked as non-configurable

Arrays are considered type object in javascript. Thus this method will work on them.

The delete operator will only delete the value and not the index of the array. It will leave the value of that particular index as undefined. This is why the length does not change.

strict mode

In strict mode, delete throws a SyntaxError due to the use of direct reference to a variable, a function argument or a function name.

Here are a few pointers to always consider when using delete:

Void operator’s main purpose is to return undefined. The void operator specifies an expression to be evaluated without returning a value.

The void operator is used in either of the following ways: void (expression) void expression

Note:

The void operator is not a function, so () are not required, but it is good style to use them according to MDN

The void operator can be used to specify an expression as a hypertext link. The expression is evaluated but is not loaded in place of the current document.

The code above creates a link that does nothing when a user clicks it. This is because void(0) evaluates to undefined.

The code creates a link that submits a form when the user clicks it.

Always consider the order of operations when dealing with more than one operator. This is good practice in mitigating unforeseen bugs.

Here is a brief table that shows the order of precedence in operations when using Javascript. Operands on the same level have the same order of precedence.

JavaScript Unary Operators: Simple and Useful