Cheatsheet de JavaScript

Declaración de variables

Las variables en JavaScript pueden declararse con let y const.

let nombre = 'Juan'; // Variable que puede cambiar
const edad = 20; // Constante, no puede cambiar

Tipos de datos primitivos en JavaScript

• Number: Representa números, tanto enteros como decimales.
• String: Cadenas de texto.
• Boolean: Verdadero (true) o falso (false).
• Null: Ausencia de valor.
• Undefined: Valor no asignado.
• Symbol: Valor único y inmutable.
• BigInt: Para números enteros grandes.

let numero = 100;
let texto = "Hola Mundo";
let esVerdad = true;
let sinValor = undefined;

Operadores asignación

• Asignación =
• Asignación con operación +=, -=, \*=, /=

Operadores aritméticos

• Suma +
• Resta -
• Multiplicación *
• División /
• Módulo %

Operadores de comparación

• Igualdad ==
• Igualdad estricta ===
• Desigualdad !=
• Mayor >
• Menor <

console.log(10 + 2); // Suma
console.log(3 === 3); // true

Lógicos

• AND lógico `&&^
• OR lógico ||
• NOT lógico !

Declaración de funciones

Las funciones permiten encapsular código que puede reutilizarse.

function sumar(a, b) {
return a + b;
}

let resultado = sumar(5, 7); // Llamada a la función

Funciones anónimas y funciones flecha

const multiplicar = (x, y) => x * y;

Closures

Un closure es una función que recuerda el entorno en el que fue creada.

function crearContador() {
let contador = 0;
return function() {
contador++;
return contador;
};
}

const contador1 = crearContador();
console.log(contador1()); // 1
console.log(contador1()); // 2

Estructura básica

if (condición) {
// Código si la condición es verdadera
} else {
// Código si es falsa
}

Operador ternario

Es una forma compacta de escribir condicionales.

let resultado = (edad >= 18) ? 'Adulto' : 'Menor';

For

for (let i = 0; i < 5; i++) {
console.log(i);
}

While

let i = 0;
while (i < 5) {
console.log(i);
i++;
}

ForEach

let numeros = [1, 2, 3, 4];
numeros.forEach(numero => {
console.log(numero);
});

Declaración de objetos

Un objeto en JavaScript es una colección de pares clave-valor.

let persona = {
nombre: 'Juan',
edad: 30,
saludar: function() {
return `Hola, soy ${this.nombre}`;
}
};

console.log(persona.saludar());

Declaración de arrays

Un array es una lista ordenada de elementos.

let frutas = ['Manzana', 'Naranja', 'Plátano'];
console.log(frutas[1]); // Accede a la segunda fruta

Métodos útiles de arrays

let numeros = [1, 2, 3, 4];
let dobles = numeros.map(num => num * 2); // [2, 4, 6, 8]

Declaración de clases

En ES6, las clases permiten crear objetos con métodos y propiedades.

class Persona {
constructor(nombre, edad) {
this.nombre = nombre;
this.edad = edad;
}
saludar() {
return `Hola, soy ${this.nombre}`;
}
}

let juan = new Persona('Juan', 30);
console.log(juan.saludar());

Herencia en clases

Permite que una clase herede propiedades y métodos de otra.

class Estudiante extends Persona {
constructor(nombre, edad, curso) {
super(nombre, edad);
this.curso = curso;
}
estudiar() {
return `${this.nombre} está estudiando ${this.curso}`;
}
}

let maria = new Estudiante('María', 22, 'Matemáticas');
console.log(maria.estudiar());

Funciones de Callback

Una función pasada como argumento a otra función.

function procesar(palabra, callback) {
console.log(`Procesando: ${palabra}`);
callback();
}

procesar('JavaScript', () => console.log('Proceso completado'));

Manejo de Promesas

Las promesas manejan operaciones asíncronas.

let promesa = new Promise((resolve, reject) => {
let exito = true;
if (exito) {
resolve('¡Éxito!');
} else {
reject('Error');
}
});

promesa.then((mensaje) => console.log(mensaje)).catch((error) => console.error(error));

Sintaxis Async/Await

Una forma más legible de manejar promesas.

async function obtenerDatos() {
try {
let respuesta = await fetch('https://api.example.com');
let datos = await respuesta.json();
console.log(datos);
} catch (error) {
console.error('Error:', error);
}
}

Seleccionar elementos

let titulo = document.getElementById('titulo');
let items = document.querySelectorAll('.item');

Modificar contenido

titulo.textContent = 'Nuevo Título';

Modificar estilos

titulo.style.color = 'blue';

Agregar eventos a elementos

let boton = document.getElementById('boton');
boton.addEventListener('click', function() {
alert('Botón clicado');
});

Hacer una petición HTTP

fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

Convertir a JSON y desde JSON

let objeto = { nombre: "Juan", edad: 30 };
let json = JSON.stringify(objeto); // Convertir a JSON
let nuevoObjeto = JSON.parse(json); // Convertir desde JSON

Exportar módulos

// archivo.js
export const PI = 3.14;
export function sumar(a, b) {
return a + b;
}

Importar módulos

// main.js
import { PI, sumar } from './archivo.js';
console.log(PI);
console.log(sumar(2, 3));