Guía Completa de JavaScript para Iniciar en React JS

Template Literals

Los template literals permiten crear cadenas de texto con múltiples líneas y expresiones embebidas.

javascript 
// Forma tradicional
const nombre = "Ana";
const edad = 25;
const mensaje = "Hola " + nombre + ", tienes " + edad + " años";

// Con template literals
const mensajeTemplate = `Hola ${nombre}, tienes ${edad} años`;

// Múltiples líneas
const html = `
<div>
  <h1>Perfil</h1>
  <p>Nombre: ${nombre}</p>
  <p>Edad: ${edad}</p>
</div>
`;

Shorthand Properties

Permite crear objetos de forma más concisa cuando el nombre de la propiedad es igual al nombre de la variable.

javascript 
// Forma tradicional
const nombre = "Carlos";
const edad = 30;
const persona = {
  nombre: nombre,
  edad: edad
};

// Con shorthand properties
const personaShort = {
  nombre,
  edad
};

// Métodos concisos
const calculadora = {
  suma(a, b) { return a + b; },    // En lugar de suma: function(a, b)
  resta(a, b) { return a - b; }
};

Arrow Functions

Sintaxis más corta para escribir funciones y manejan el contexto de this de manera diferente.

javascript 
// Función tradicional
function suma(a, b) {
  return a + b;
}

// Arrow function
const sumaArrow = (a, b) => a + b;

// Con un solo parámetro (no necesita paréntesis)
const cuadrado = x => x * x;

// Con cuerpo de función
const saludar = nombre => {
  console.log(`Hola ${nombre}`);
  return `Bienvenido ${nombre}`;
};

// En métodos de array
const numeros = [1, 2, 3, 4];
const duplicados = numeros.map(num => num * 2);

Destructuring

Permite extraer valores de objetos y arrays de manera más sencilla.

javascript 
// Destructuring de objetos
const usuario = {
  nombre: "María",
  edad: 28,
  ciudad: "Madrid",
  redes: {
      twitter: "@maria",
      instagram: "@maria_inst"
  }
};

const { nombre, edad, redes: { twitter } } = usuario;

// Destructuring de arrays
const colores = ["rojo", "azul", "verde"];
const [primero, segundo] = colores;

// Con valor por defecto
const [principal = "negro", secundario = "blanco"] = [];

// Intercambio de variables
let a = 5, b = 10;
[a, b] = [b, a];

Parámetros por defecto

Permite asignar valores predeterminados a los parámetros de una función.

javascript 
// Parámetros por defecto básicos
const saludar = (nombre = "Invitado", edad = 18) => {
  return `Hola ${nombre}, tienes ${edad} años`;
};

// Con objetos
const crearUsuario = ({
  nombre = "Anónimo",
  edad = 0,
  activo = true
} = {}) => {
  return { nombre, edad, activo };
};

// Combinando con destructuring
const procesarDatos = ({ id = Date.now(), datos = [] } = {}) => {
  return { id, datos };
};

Spread Operator / REST Parameters

El operador spread (…) permite expandir elementos, mientras que rest permite agruparlos.

javascript 
// Spread con arrays
const numeros = [1, 2, 3];
const masNumeros = [...numeros, 4, 5]; // [1, 2, 3, 4, 5]

// Spread con objetos
const perfil = { nombre: "Juan", edad: 25 };
const perfilCompleto = {
  ...perfil,
  ciudad: "Barcelona",
  profesion: "Developer"
};

// REST parameters
const sumarTodos = (...numeros) => {
  return numeros.reduce((total, num) => total + num, 0);
};

// Combinando spread y rest
const [primer, segundo, ...resto] = [1, 2, 3, 4, 5];

ESModules

Sistema moderno de módulos en JavaScript.

javascript 
// archivo: utils.js
export const suma = (a, b) => a + b;
export const resta = (a, b) => a - b;
export default class Calculadora {
  // ...
}

// archivo: main.js
import Calculadora, { suma, resta } from './utils.js';
// O importar todo como un objeto
import * as Utils from './utils.js';

Operador Ternario

Forma concisa de escribir condiciones.

javascript 
// Forma tradicional
let mensaje;
if (edad >= 18) {
  mensaje = "Es mayor de edad";
} else {
  mensaje = "Es menor de edad";
}

// Con operador ternario
const mensaje = edad >= 18 ? "Es mayor de edad" : "Es menor de edad";

// Ternarios anidados (usar con moderación)
const tipo = edad < 13 ? "niño" 
  : edad < 18 ? "adolescente"
  : edad < 65 ? "adulto"
  : "senior";

// En JSX (React)
return (
  <div>
      {isLoggedIn ? (
          <WelcomeUser name={user.name} />
      ) : (
          <LoginButton />
      )}
  </div>
);

Novedades de ECMAScript

Algunas características modernas adicionales útiles para React:

Optional Chaining (?.)

Optional Chaining (?.) es una característica de JavaScript que permite acceder a propiedades de objetos anidados sin tener que verificar manualmente si cada propiedad existe. Si una referencia es null o undefined, el resultado de la expresión es undefined en lugar de lanzar un error. Esto simplifica el código y mejora la legibilidad al evitar múltiples verificaciones. Por ejemplo:

javascript 
const valor = objeto?.propiedad?.subpropiedad;

Si objeto o propiedad no existen, valor será undefined en lugar de causar un error.

Otro ejemplo de Optional Chaining (?.)

En este ejemplo, Optional Chaining (?.) se usa para acceder a la propiedad twitter del objeto usuario. Si alguna de las propiedades intermedias (perfil o redes) no existe, la expresión devuelve undefined en lugar de lanzar un error, simplificando la verificación de la existencia de propiedades anidadas.

javascript 
const usuario = {
  perfil: {
      redes: {
          twitter: "@usuario"
      }
  }
};

// En lugar de: usuario && usuario.perfil && usuario.perfil.redes
const twitter = usuario?.perfil?.redes?.twitter;

Nullish Coalescing (??)

El operador de fusión nula (Nullish Coalescing, ??) en JavaScript se utiliza para asignar un valor predeterminado cuando una expresión es null o undefined. A diferencia del operador lógico OR (||), que también considera falsy valores como 0 o ”, el operador ?? solo verifica específicamente null y undefined. Por ejemplo:

javascript 
let valor = null;
let resultado = valor ?? 'Valor por defecto'; 
// resultado será 'Valor por defecto'

En este caso, resultado tomará el valor de 'Valor por defecto' solo si valor es null o undefined.

Uso de Nullish Coalescing (??) para Valores Predeterminados

javascript 
let usuario = {
  nombre: "Carlos",
  edad: 0, // 0 es un valor válido, no nulo
  ciudad: null
};

// Usando Nullish Coalescing
let edad = usuario.edad ?? 25; // edad será 0, porque no es null ni undefined
let ciudad = usuario.ciudad ?? "Desconocida"; // ciudad será "Desconocida"

console.log(edad);   // Imprime: 0
console.log(ciudad); // Imprime: Desconocida

En este caso, edad mantiene su valor de 0 porque es un valor válido, mientras que ciudad toma el valor de “Desconocida” porque su valor es null.

Array Methods

Los métodos en JavaScript son funciones integradas que nos permiten realizar acciones específicas en distintos tipos de datos, como cadenas, arrays, objetos, etc. Te invito a conocer más sobre los Array Methods con muchos ejemplos prácticos

javascript 
// find
const usuarios = [{id: 1, nombre: "Ana"}, {id: 2, nombre: "Bob"}];
const usuario = usuarios.find(u => u.id === 1);

// some y every
const tienenNombre = usuarios.every(u => u.nombre);
const existeAna = usuarios.some(u => u.nombre === "Ana");

// filter y map (muy usados en React)
const usuariosActivos = usuarios
  .filter(u => u.activo)
  .map(u => u.nombre);

Async/Await

Fundamental para manejar operaciones asíncronas en React.

javascript 
// Promesas
const obtenerDatos = () => {
  return fetch('https://api.ejemplo.com/datos')
      .then(res => res.json())
      .then(data => console.log(data))
      .catch(error => console.error(error));
};

// Con async/await
const obtenerDatosAsync = async () => {
  try {
      const respuesta = await fetch('https://api.ejemplo.com/datos');
      const datos = await respuesta.json();
      return datos;
  } catch (error) {
      console.error(error);
  }
};

// Uso en React
const ComponenteAsync = async () => {
  const [datos, setDatos] = useState(null);

  useEffect(() => {
      const cargarDatos = async () => {
          const resultado = await obtenerDatosAsync();
          setDatos(resultado);
      };
      cargarDatos();
  }, []);
};