Cómo utilizar operadores unarios en JavaScript

Introducción

Matemáticamente, una operación es un cálculo sobre uno o más valores llamados operandos que se asignan a un valor de salida. Un operador es un símbolo o signo que asigna operandos a valores de salida.

Una operación unaria es una operación con un solo operando. Este operando se coloca antes o después del operador.

Los operadores unarios son más eficientes que las llamadas a funciones estándar de JavaScript. Además, los operadores unarios no se pueden anular, por lo que su funcionalidad está garantizada.

En este artículo, conocerá todos los operadores unarios en JavaScript.

Prerrequisitos

Si deseas seguir este artículo, necesitarás:

• Algunos conocimientos sobre tipos de datos , variables , objetos y funciones de JavaScript .

Unario más ( +)

El operador unario más ( +) precede a su operando y evalúa a su operando pero intenta convertirlo en un número si aún no lo es.

Puede convertir todas las representaciones de cadenas de números, valores booleanos ( truey false) y nullen números. Los números incluirán tanto números enteros, flotantes, hexadecimales, notación científica (exponente) y Infinity.

Si el operando no se puede convertir en un número, el operador unario más devolverá NaN.

A continuación se muestran algunos ejemplos:

Un objeto solo se puede convertir si tiene un valor clave valueOf y su función devuelve cualquiera de los tipos anteriores.

+{  valueOf: function() {    return "0xFF"  }}

Esto generará el siguiente resultado:

Output255

Después de experimentar con diferentes valores, puedes continuar con el siguiente operador unario.

Negación unaria ( -)

El operador de negación unario ( -) precede a su operando y lo niega.

Tanto la negación unaria como la suma realizan la misma operación que la Number()función para números no numéricos.

A continuación se muestran algunos ejemplos:

Después de experimentar con diferentes valores, puedes continuar con el siguiente operador unario.

Incremento ( ++)

El operador de incremento ( ++) incrementa (suma uno a) su operando y devuelve un valor.

Se puede utilizar como operador de prefijo o de sufijo.

• Postfix: significa que el operador va después del operando ( y++). Esto devuelve el valor antes de incrementarlo.
• Prefijo: el operador va antes del operando ( ++y). Al usarlo como prefijo, se devuelve el valor después de incrementarlo.

He aquí un ejemplo de sufijo:

x = 4       // x = 4y = x++     // y = 4 and  x = 5

yse establece en el valor antes de incrementar y se suma 1a x.

Tenga cuidado al restablecer valores al utilizar postfix:

var z = 5   // z = 5z = z++     // z = 5

zse establece en el valor antes de incrementar.

He aquí un ejemplo de prefijo:

x = 4       // x = 4y = ++x     // y = 5 and  x = 5

yse establece en el valor después de incrementar y agrega 1 a x.

var z = 5   // z = 5z = ++z     // z = 6

zse establece en el valor después del incremento.

Después de experimentar con diferentes valores, puedes continuar con el siguiente operador unario.

Decremento ( --)

El operador de decremento ( --) decrementa (resta uno de) su operando y devuelve un valor.

Se puede utilizar como operador de prefijo o de sufijo.

• Postfix: significa que el operador va después del operando ( y--). Esto devuelve el valor antes de decrementar.
• Prefijo: el operador va antes del operando ( --y). Al usarlo como prefijo, se devuelve el valor después de decrementarlo.

He aquí un ejemplo de sufijo:

x = 4       // x = 4y = x--     // y = 4 and  x = 3

Se establece yen el valor antes de decrementar y elimina 1 de x.

var z = 5   // z = 5z = z--     // z = 5

zse establece en el valor antes de disminuir.

He aquí un ejemplo de prefijo:

x = 4       // x = 4y = --x     // y = 3 and  x = 3

Se establece yen el valor después de decrementar y elimina 1 de x.

var z = 5   // z = 5z = --z     // z = 4

zse establece en el valor después de decrementar.

Después de experimentar con diferentes valores, puedes continuar con el siguiente operador unario.

NO lógico ( !)

El !operador lógico NO ( ) (complemento lógico, negación) convierte la verdad en falsedad y viceversa.

A continuación se muestran algunos ejemplos:

Estos ejemplos demuestran cómo el NO lógico retorna falsesi el operando se puede convertir a true, si no, retorna false.

También puedes utilizar la doble negación ( !!).

!!1 === true        // returns true!!0 === false       // returns true!!'hi' === true     // returns true

Examinemos el último ejemplo.

Primero, una negación de una cadena devuelve false:

!'hi'               // returns false

Entonces, una negación de false, devuelve true:

!false              // returns true

De este modo:

true === true       // returns true

Después de experimentar con diferentes valores, puedes continuar con el siguiente operador unario.

Bit a bit NO ( ~)

El operador NOT bit a bit ( ~) invierte los bits de su operando.

Un bit a bit no en un número da como resultado: -(x + 1).

A continuación se muestran algunos ejemplos:

La siguiente tabla analiza con más detalle cómo se realiza esta operación.

Después de experimentar con diferentes valores, puedes continuar con el siguiente operador unario.

typeof

El typeofoperador devuelve una cadena que indica el tipo del operando no evaluado.

A continuación se muestran algunos ejemplos:

Después de experimentar con diferentes valores, puedes continuar con el siguiente operador unario.

delete

El operador JavaScript deleteelimina una propiedad de un objeto; si no hay más referencias a la misma propiedad, finalmente se libera automáticamente.

Regresa truesi se eliminó exitosamente la propiedad o si la propiedad no existe.

Regresa falsesi no se puede eliminar un elemento.

deleteno tiene ningún efecto sobre las funciones y variables.

A continuación se muestra un ejemplo de intento de uso deleteen una variable:

var variableExample = 1;delete variableExample;          // returns falseconsole.log(variableExample);    // returns 1

A continuación se muestra un ejemplo de cómo intentar utilizar deleteuna función:

function functionExample(){};delete functionExample;           // returns falseconsole.log(functionExample);     // returns function functionExample(){}

A continuación se muestra un ejemplo de cómo intentar usarlo deleteen una matriz:

var arrayExample = [1,1,2,3,5]delete arrayExample             // returns falseconsole.log(arrayExample);      // [1,1,2,3,5]

A continuación se muestra un ejemplo de cómo intentar utilizarlo deleteen un objeto:

var objectExample = {propertyExample: "1"}delete objectExample            // returns falseconsole.log(objectExample);     // returns Object { propertyExample: "1" }

Ahora, aquí hay un ejemplo de uso deleteen una propiedad con la notación literal:

var inventory = {"apples": 1, "oranges": 2}delete inventory["apples"]          // returns trueconsole.log(inventory);             // returns Object { "oranges": 2 }console.log(inventory["apples"]);   // returns undefined

Y aquí hay un ejemplo de uso deleteen una propiedad con la notación de puntos:

var inventory = {"apples": 1}delete inventory.apples;            // returns trueconsole.log(inventory);             // returns {}console.log(inventory.apples);      // returns undefined

A continuación se muestra un ejemplo de intento de uso deleteen una propiedad que no existe:

var inventory = {"apples": 1};delete inventory.oranges;           // returns trueconsole.log(inventory.apples);      // returns 1

A continuación se muestra un ejemplo de intento de uso deletede una propiedad no configurable de un objeto predefinido:

delete Math.PI;                     // returns falseconsole.log(Math.PI);               // returns 3.141592653589793

deleteno tiene efecto sobre una propiedad de objeto que se establece como no configurable. Siempre devolverá false.

En modo estricto, esto generará un SyntaxError.

A continuación se muestra un ejemplo de intento de uso deleteen una propiedad no configurable:

var configurableFalseExample = {};Object.defineProperty(configurableFalseExample, 'name', { value: 'Sammy', configurable: false })console.log(configurableFalseExample.name);     // returns 'Sammy'delete configurableFalseExample.name            // returns falseconsole.log(configurableFalseExample.name);     // returns 'Sammy'

A continuación se muestra un ejemplo de uso deleteen una propiedad no configurable:

var configurableTrueExample = {};Object.defineProperty(configurableTrueExample, 'name', { value: 'Sammy', configurable: true })console.log(configurableTrueExample.name);      // returns 'Sammy'delete configurableTrueExample.name             // returns trueconsole.log(configurableTrueExample.name);      // returns undefined

Lea más sobre defineProperty().

var, let, y constcrea propiedades no configurables que no se pueden eliminar con el deleteoperador:

A continuación se muestra un ejemplo de configuración varen un windowámbito (por ejemplo, un navegador web):

var num = 1;Object.getOwnPropertyDescriptor(window, "num")

Esto devolverá:

Output{  value: 1,  writable: true,  enumerable: true,  configurable: false}

Luego intenta con deletela variable:

delete num;

Esto devolverá:

Outputfalse

A continuación se muestra un ejemplo de configuración varen un globalámbito (por ejemplo, Nodo):

var num = 1;Object.getOwnPropertyDescriptor(global, "num")

Esto devolverá:

Output{  value: 1,  writable: true,  enumerable: true,  configurable: false}

Ahora, aquí hay un ejemplo de un objeto:

var inventory = { "apples": 1 };Object.getOwnPropertyDescriptor(inventory, "apples")

Esto devolverá:

Output{  value: 1,  writable: true,  enumerable: true,  configurable: true}

Tenga en cuenta que la configurablepropiedad está marcada como true.

Arraysse consideran tipos Objecten JavaScript, por lo que este método funcionará con ellos:

var arrayExample = [20,30,40];console.log(arrayExample.length);     // returns 3delete arrayExample[2]                // returns trueconsole.log(arrayExample);            // returns [ 20, 30, 1 empty item ]console.log(arrayExample[2]);         // returns undefinedconsole.log(arrayExample.length);     // returns 3

El deleteoperador solo eliminará el valor y no el índice de la matriz. Dejará el valor de ese índice en particular como undefined. Por eso la longitud no cambia.

En strictmodo , deletelanza un error SyntaxErrordebido al uso de una referencia directa a una variable, un argumento de función o un nombre de función.

A continuación se muestra un ejemplo de una referencia directa a una variable que provocará un SyntaxError:

‘use strict’var inventory = {"apples": 1, "oranges": 2};delete inventory;

Esto producirá:

OutputUncaught SyntaxError: Delete of an unqualified identifier in strict mode.

A continuación se muestra un ejemplo de un argumento de función que provocará un SyntaxError:

‘use strict’function Person() { delete name; var name;}

A continuación se muestra un ejemplo de un nombre de función que provocará un SyntaxError:

‘use strict’function yo() { }delete yo;

A continuación se indican algunos consejos que siempre se deben tener en cuenta al utilizar delete:

• Intentar eliminar una propiedad que no existe deletedevolverá el resultado truepero no tendrá efecto en el objeto.
• La eliminación solo afecta las propiedades propias de un objeto. Esto significa que si existe una propiedad con el mismo nombre en la cadena de prototipos del objeto , deleteno lo afectará. Después de la eliminación, el objeto utilizará la propiedad de la cadena de prototipos.
• La variable declarada var, let, y constno se puede eliminar del ámbito global ni del ámbito de una función.
  • Significado: deleteno se puede eliminar ninguna función en el ámbito global ni en el ámbito de funciones.
  • deletetrabaja en funciones que son parte de un objeto (aparte del ámbito global).
• Las propiedades no configurables no se pueden eliminar.
• deleteno funciona en ninguno de los objetos integrados como Math, Array, Objecto propiedades que se crean como no configurables con métodos como Object.defineProperty().

Después de experimentar con diferentes valores, puedes continuar con el siguiente operador unario.

void

El voidoperador evalúa la expresión dada y luego devuelve undefined.

voidEl objetivo principal del operador es devolver undefined. El operador void especifica una expresión que se evaluará sin devolver un valor.

El operador void se utiliza de cualquiera de las siguientes maneras: void (expression)o void expression.

Nota: El voidoperador no es una función, por lo que ()no es obligatorio, pero es un buen estilo usarlos según MDN

He aquí un ejemplo:

void 0

Esto devolverá:

Outputundefined

He aquí un ejemplo de una función:

var functionExample = function () {  console.log('Example')  return 4;}

Si hace referencia a la función:

var result = functionExample()console.log(result);

Esto devolverá el valor 4:

Output4

Sin embargo, si utiliza voidla función:

var voidResult = void (functionExample())console.log(voidResult);

Esto devolverá el valor undefined:

Outputundefined

El voidoperador también se puede utilizar para especificar una expresión como un enlace de hipertexto. La expresión se evalúa pero no se carga en lugar del documento actual.

A continuación se muestra un ejemplo de uso void(0)en un enlace:

a href="javascript:void(0)"Link to perform no action./a

El código anterior crea un enlace que no hace nada cuando un usuario hace clic en él. Esto se debe a que void(0)evalúa como undefined.

A continuación se muestra un ejemplo de uso void(document.form.submit())en un enlace:

a href="javascript:void(document.form.submit())"Link to submit a form./a

El código crea un enlace que envía un formulario cuando el usuario hace clic en él.

Experimente con diferentes valores.

Conclusión

En este artículo, conocimos todos los operadores unarios en JavaScript.

Tenga siempre en cuenta el orden de las operaciones cuando trabaje con más de un operador. Esta es una buena práctica para mitigar errores imprevistos.

A continuación se muestra una breve tabla que muestra el orden de precedencia de las operaciones cuando se utiliza Javascript. Los operandos del mismo nivel tienen el mismo orden de precedencia.

Si desea obtener más información sobre JavaScript, consulte nuestra página de temas de JavaScript para obtener ejercicios y proyectos de programación.