Códigos secretos de JavaScript (que deberías conocer)

Por /

JavaScript es un lenguaje de programación versátil y poderoso, pero a menudo pasamos por alto algunas de sus características más útiles. En este artículo, te revelaré algunos códigos secretos y funcionales que te harán la vida más fácil como desarrollador.

JavaScript en SofTim

1. Operador de encadenamiento opcional (?.)

Este operador te permite acceder a propiedades anidadas de un objeto sin tener que preocuparte por si alguna de ellas es null o undefined.

const usuario = {
  nombre: 'Juan',
  direccion: {
    calle: 'Calle falsa 123',
  },
};

const calle = usuario?.direccion?.calle; // 'Calle falsa 123'

const codigoPostal = usuario?.direccion?.codigoPostal; // undefined

2. Operador de fusión nula (??)

Este operador te permite asignar un valor predeterminado a una variable si su valor es null o undefined.

const nombre = usuario.nombre ?? 'Usuario anónimo'; // 'Juan'

const apellido = usuario.apellido ?? 'Sin apellido'; // 'Sin apellido'

3. Desestructuración de objetos y arrays

La desestructuración te permite extraer valores de objetos y arrays de forma concisa.

const { nombre, direccion: { calle } } = usuario;

console.log(nombre); // 'Juan'

console.log(calle); // 'Calle falsa 123'

const numeros = [1, 2, 3];

const [primerNumero, segundoNumero] = numeros;

console.log(primerNumero); // 1

console.log(segundoNumero); // 2

4. Conjuntos (Sets)

Los conjuntos te permiten almacenar colecciones de valores únicos.

const numerosUnicos = new Set([1, 2, 2, 3, 3, 4]);

console.log(numerosUnicos); // Set(4) {1, 2, 3, 4}

5. Mapas (Maps)

Los mapas te permiten almacenar pares clave-valor, similar a los objetos, pero con la ventaja de que las claves pueden ser de cualquier tipo.

const mapaUsuarios = new Map();

mapaUsuarios.set('Juan', { edad: 30 });

mapaUsuarios.set('Maria', { edad: 25 });

console.log(mapaUsuarios.get('Juan')); // { edad: 30 }

6. Promesas (Promises) y async/await

Las promesas y async/await te permiten trabajar con código asíncrono de forma más legible y concisa.

const obtenerDatos = async () => {
  try {
    const respuesta = await fetch('https://ejemplo.com/datos');

    const datos = await respuesta.json();

    console.log(datos);
  } catch (error) {
    console.error(error);
  }
};

obtenerDatos();

7. Proxy

Los proxies te permiten interceptar y personalizar operaciones en objetos.

const usuarioProxy = new Proxy(usuario, {
  get: (target, propiedad) => {
    console.log(`Accediendo a la propiedad ${propiedad}`);

    return target[propiedad];
  },
});

console.log(usuarioProxy.nombre); // 'Juan'

8. Generadores (Generators)

Los generadores te permiten crear funciones que pueden pausar y reanudar su ejecución.

function* generadorNumeros() {
  yield 1;

  yield 2;

  yield 3;
}

const generador = generadorNumeros();

console.log(generador.next().value); // 1

console.log(generador.next().value); // 2

9. Módulos (Modules)

Los módulos te permiten organizar tu código en archivos separados y reutilizables.

// archivo: saludo.js

export const saludar = (nombre) => {
  console.log(`Hola, ${nombre}`);
};

// archivo: principal.js

import { saludar } from './saludo.js';

saludar('Juan'); // 'Hola, Juan'

10. Funciones de flecha (Arrow functions)

Las funciones de flecha te permiten escribir funciones de forma más concisa.

const sumar = (a, b) => a + b;

console.log(sumar(1, 2)); // 3

Conclusión

Estos son solo algunos de los códigos secretos y funcionales de JavaScript que puedes utilizar para mejorar tu productividad como desarrollador. ¡Explora la documentación de JavaScript para descubrir aún más!

recuerda que en nuestro blog puedes ver mucha información de lo más actual de tecnología. Igual puedes encontrar mas información de JavaScript aquí.

Scroll al inicio