11 abreviaturas de JavaScript y TypeScript imprescindibles para una codificación eficiente

JavaScript y TypeScript son lenguajes de programación muy populares en el campo del desarrollo web. Ambos tienen un amplio conjunto de funciones y muchos atajos de sintaxis que contribuyen significativamente a mejorar la eficiencia de la codificación.

Aprenda a reforzar su código y aprovechar al máximo estos lenguajes con algunos atajos útiles.

1. Operador Ternario

El operador ternario ofrece una sintaxis concisa y eficiente para expresar sentencias condicionales. Tiene tres partes: una condición, una expresión para ejecutar si la condición se evalúa como verdadera y una expresión para ejecutar si es falsa.

Este operador resulta particularmente útil cuando se toman decisiones basadas en condiciones y se asignan diferentes valores en consecuencia.

Considere el siguiente ejemplo:

constante edad = 20;
constante tipoedad ​​= edad >= 18? "Adulto": "Niño";
consola.log (tipoedad); // Salida: "Adulto"

Este ejemplo usa el operador ternario para verificar si la variable edad es mayor o igual a 18. Si es así, el código asigna el valor Adulto a la variable tipo de edad, en caso contrario asigna el valor "Niño".

2. Literales de plantilla

Los literales de plantilla ofrecen una forma poderosa y eficiente de formatear cadenas JavaScript e incorporando variables o expresiones dentro de ellos. A diferencia de la concatenación de cadenas tradicional que usa comillas simples o dobles, los literales de plantilla usan acentos graves (`).

Esta sintaxis única proporciona varias ventajas cuando se trabaja con cadenas. Considere el siguiente ejemplo que demuestra el uso de literales de plantilla:

constante nombre = "Alicia";
constante saludo = `Hola, ${nombre}!`;
consola.log (saludo); // Salida: "¡Hola, Alicia!"

El ejemplo incluye el nombre variable en el literal de la plantilla usando ${}. Esto le permite construir fácilmente cadenas dinámicas.

3. Operador coalescente nulo

El operador coalescente nulo (??) proporciona una manera conveniente de asignar valores predeterminados cuando una variable es nulo o indefinido. Devuelve el operando del lado derecho si el operando del lado izquierdo es nulo o indefinido.

Considere el siguiente ejemplo:

constante nombre de usuario = nulo;
constante displayName = nombre de usuario?? "Invitado";
consola.log (tabla); // Salida: "Invitado"

En este ejemplo, dado que la variable nombre de usuario es nulo, el operador coalescente nulo asigna el valor predeterminado Invitado a la variable nombre para mostrar.

4. Evaluación de cortocircuito

La evaluación de cortocircuito le permite escribir expresiones condicionales concisas utilizando operadores lógicos como && y ||. Aprovecha el hecho de que un operador lógico dejará de evaluar expresiones tan pronto como pueda determinar el resultado.

Considere el siguiente ejemplo:

constante nombre = "John";
constante saludo = nombre && `Hola, ${nombre}`;
consola.log (saludo); // Salida: "Hola, John"

Este ejemplo solo evaluará la expresión `Hola, ${nombre}` si la variable nombre tiene un valor de verdad. En caso contrario, cortocircuita y asigna el valor de nombre sí mismo a la variable saludo.

5. Taquigrafía de asignación de propiedad de objeto

Al crear objetos, tiene la opción de utilizar una notación abreviada que asigna variables como propiedades con el mismo nombre.

Esta notación abreviada elimina la necesidad de indicar de forma redundante tanto el nombre de la propiedad como el nombre de la variable, lo que da como resultado un código más claro y conciso.

Considere el siguiente ejemplo:

constante nombre = "John";
constante apellido = "Gama";
constante persona = { nombre, apellido };
consola.log (persona); // Salida: { nombre: "John", apellido: "Doe" }

Este ejemplo asigna las propiedades nombre de pila y apellido usando notación abreviada.

6. Encadenamiento opcional

Encadenamiento opcional (?.) le permite acceder a las propiedades anidadas de un objeto sin preocuparse por los valores intermedios nulos o indefinidos. Si una propiedad en la cadena es nula o indefinida, la expresión se cortocircuita y devuelve indefinida.

Considere el siguiente ejemplo:

constante usuario = { nombre: "Alicia", DIRECCIÓN: { ciudad: "Nueva York", país: "EE.UU" }};
constante país = usuario.dirección?.país;
consola.log (país); // Salida: "EE.UU."

En el ejemplo anterior, el operador de encadenamiento opcional asegura que el código no arroje un error si el DIRECCIÓN propiedad o la país falta la propiedad.

7. Destrucción de objetos

Desestructuración de objetos es una característica poderosa en JavaScript y TypeScript que le permite extraer propiedades de objetos y asignarlas a variables usando una sintaxis concisa.

Este enfoque simplifica el proceso de acceso y manipulación de las propiedades de los objetos. Echemos un vistazo más de cerca a cómo funciona la desestructuración de objetos con un ejemplo:

constante usuario = { nombre: "John", edad: 30 };
constante { nombre, edad } = usuario;
consola.log (nombre, edad); // Salida: "Juan" 30

Este ejemplo extrae las variables nombre y edad desde el usuario objeto a través de la desestructuración del objeto.

8. Operador de propagación

El operador de propagación (...) le permite expandir elementos de un iterable, como una matriz u objeto, en elementos individuales. Es útil para combinar arreglos o crear copias superficiales de ellos.

Considere el siguiente ejemplo:

constante números = [1, 2, 3];
constante newNumbers = [...números, 4, 5];
consola.log (nuevosNúmeros); // Salida: [1, 2, 3, 4, 5]

En el ejemplo anterior, el operador de propagación expande el números matriz en elementos individuales, que luego se combinan con 4 y 5 para crear una nueva matriz, nuevosNúmeros.

9. Taquigrafía de bucle de objeto

Al iterar sobre objetos, puede utilizar el para... en bucle en combinación con la desestructuración de objetos para iterar convenientemente sobre las propiedades del objeto.

Considere este ejemplo:

constante usuario = { nombre: "John", edad: 30 };
para (constante [valor clave] deObjeto.entradas (usuario)) { 
consola.registro(`${clave}: ${valor}`);
}
// Producción:
// nombre: Juan
// edad: 30

En el ejemplo anterior, Objeto.entradas (usuario) devuelve una matriz de pares clave-valor, que luego cada iteración desestructura en las variables llave y valor.

10. Array.indexOf Taquigrafía usando el operador bit a bit

Puede reemplazar las llamadas al Array.indexOf método con una abreviatura usando el operador bit a bit ~ para verificar si un elemento existe en una matriz. La abreviatura devuelve el índice del elemento si se encuentra o -1 si no se encuentra.

Considere el siguiente ejemplo:

constante números = [1, 2, 3];
constante índice = ~números.indexOf(2);
consola.log (índice); // Salida: -2

En el ejemplo anterior, ~numeros.indexOf (2) devoluciones -2 porque 2 está en el índice 1, y el operador bit a bit niega el índice.

11. ¡Conversión de valores a booleanos con!

A convertir explícitamente un valor a un valor booleano, puede utilizar el operador de doble negación (!!). Convierte efectivamente un valor veraz en verdadero y un valor falso para FALSO.

Considere el siguiente ejemplo:

constante valor1 = "Hola";
constante valor2 = "";
consola.log(!!valor1); // Salida: verdadero
consola.log(!!valor2); // Salida: falso

En el ejemplo anterior, !!valor1 devoluciones verdadero porque la cuerda Hola es verdad, mientras !!valor2 devoluciones FALSO porque la cadena vacía es falsa.

Desbloqueo de la eficiencia y legibilidad del código

Al utilizar estas abreviaturas en JavaScript y TypeScript, puede mejorar su eficiencia de codificación y producir un código más conciso y legible. Ya sea utilizando el operador ternario, la evaluación de cortocircuitos o aprovechando el poder de los literales de plantilla, estas abreviaturas brindan herramientas valiosas para una codificación eficiente.

Además, la taquigrafía de asignación de propiedades de objetos, el encadenamiento opcional y la desestructuración de objetos simplificar el trabajo con objetos, mientras que el operador de extensión y las abreviaturas de matriz permiten una matriz eficiente manipulación. Dominar estas abreviaturas lo convertirá en un desarrollador de JavaScript y TypeScript más productivo y efectivo.