1
Q
1- Formas de declarar variables y diferencias ?
A
var:
Ámbito: función o global.
Hoisting: sí, pero su valor es undefined antes de asignar.
Reasignar y redeclarar: sí, dentro del mismo ámbito.
let:
Ámbito: bloque {}.
Hoisting: sí, pero no usable antes de la declaración (temporal dead zone).
Reasignar: sí. Redeclarar: no en el mismo bloque.
const:
Ámbito: bloque {}.
Hoisting: igual que let.
Reasignar o redeclarar: no.
Para objetos/arrays, sí se pueden modificar propiedades o elementos.
2
Q
2- Qué es el Scope en JavaScript?
A
Scope es el contexto donde una variable es accesible. Hay tres tipos principales:
Global: accesible desde cualquier parte.
Function: accesible dentro de una función.
Block: accesible dentro de un bloque {} (usando let o const).
3
Q
3- Qué es hoisting en JavaScript ?
A
Hoisting es el comportamiento donde las declaraciones de variables y funciones se “mueven” al inicio de su contexto (función o global) antes de ejecutar el código, permitiendo usarlas antes de declararlas.
4
Q
4- Cuál es la diferencia entre undefined y null?
A
undefined: indica que una variable ha sido declarada pero no tiene valor.
null: es un valor asignado manualmente para indicar ausencia de valor.
5
Q
5- Qué es la declaración y asignación ?
A
En programación, declaración es cuando creas una variable y reservas espacio en memoria para ella, mientras que asignación es cuando le das un valor a esa variable.
6
Q
1- Cuáles son todos los tipos de datos en JavaScript?
A
Tipos primitivos:
Number: números enteros o decimales.
String: cadenas de texto.
Boolean: true o false.
Undefined: variable declarada sin valor asignado.
Null: valor intencionalmente vacío.
Symbol: valor único e inmutable, usado como clave única.
7
Q
2- Qué tipos de estructuras de datos hay en JavaScript?
A
Arrays: listas ordenadas de elementos.
Objects: colecciones de pares clave-valor.
Sets: colecciones de valores únicos que no se repiten.
Maps: colecciones de pares clave-valor con claves de cualquier tipo.
Stacks y Queues: pueden implementarse usando arrays (LIFO/FIFO).
8
Q
3- Función y sintaxis del método forEach() ?
A
forEach() itera sobre cada elemento de un array y ejecuta una función callback para cada uno.
No devuelve un nuevo array, siempre retorna undefined. Para transformar arrays, usar map().
const nums = [1, 2, 3];
nums.forEach((num) => {
console.log(num * 2);
});
9
Q
4- Diferencia entre un arreglo y un objeto ?
A
Los arreglos almacenan datos ordenados y se accede a sus elementos por índices numéricos.
Los objetos almacenan datos no ordenados y se accede a sus valores mediante claves descriptivas.
10
Q
5- Métodos de array.
A
push(), pop(), shift(), unshift()
forEach(), map(), filter(), reduce()
find(), findIndex(), includes()
slice(), splice(), concat()
sort(), reverse()
11
Q
6- Cuáles son los métodos de los string ?
A
charAt(), concat(), includes(), indexOf(), lastIndexOf()
slice(), substring()
toLowerCase(), toUpperCase(), trim()
replace(), split()
startsWith(), endsWith()
12
Q
7- Cuáles son los métodos de los objetos
A
Object.keys(), Object.values(), Object.entries()
Object.assign(), Object.freeze(), Object.seal()
hasOwnProperty()
Object.create()
13
Q
8- Cómo funcionan el Rest Operator y el Spread Operator en JavaScript?
A
Rest (…): agrupa múltiples argumentos en un array.
Spread (…): expande un array u objeto en elementos individuales.
14
Q
9- Cómo se utilizan las expresiones regulares en JavaScript?
A
Se usan para buscar, validar y manipular texto mediante patrones.
const regex = /patrón/;
const regex2 = new RegExp(‘patrón’);
15
Q
11- Qué es una propiedad ?
A
Una propiedad es un par nombre-valor que describe una característica de un objeto.
const coche = { marca: ‘Toyota’, color: ‘Rojo’ };
console.log(coche.marca); // Toyota
16
Q
12- Qué es un método ?
A
Un método en JavaScript es una función que se define como propiedad de un objeto.
17
Q
1- Qué es y cómo se ve el formato JSON ?
A
JSON (JavaScript Object Notation) es un formato ligero y estructurado para representar datos en texto.
18
Q
2- Cuáles son los métodos del JSON ?
A
JSON.stringify(obj) → Convierte objeto a string JSON.
JSON.parse(string) → Convierte string JSON a objeto.
19
Q
1- Qué son las closures ?
A
Son funciones que recuerdan y pueden acceder a variables de su entorno externo incluso después de que la función externa haya terminado.
20
Q
1- Diferencia entre for, while y do…while.
A
for: cuando conocemos el número de iteraciones.
while: se ejecuta mientras la condición sea verdadera.
do…while: igual que while, pero se ejecuta al menos una vez.
21
Q
3- Diferencia entre forEach() y map().
A
forEach(): ejecuta, pero no devuelve nada.
map(): devuelve un nuevo array transformado.
22
Q
4- Diferencia entre for…in y for…of.
A
for…in: itera sobre claves de un objeto.
for…of: itera sobre valores de objetos iterables.
23
Q
5- Qué es un loop infinito y cómo evitarlo?
A
Sucede cuando la condición nunca es falsa. Evitarlo modificando variables o asegurando condiciones de salida.
24
Q
6- Cuándo usar reduce() en lugar de un for?
A
Cuando quieres acumular valores en una sola salida (suma, concatenación, etc.).
25
7- Diferencia entre break y continue.
break: sale del bucle.
continue: salta a la siguiente iteración.
26
8- Cual es la complejidad temporal de un bucle anidado?
Generalmente O(n²).
27
10- Ventajas de map(), filter() o reduce() sobre loops tradicionales.
Más legibles, declarativos y funcionales.
28
-Que es el DOM ?
El DOM (Document Object Model) es una interfaz estructurada que los programas pueden utilizar para cambiar dinámicamente el contenido y la apariencia de una página web.
29
2-Cómo se trabaja con el DOM en JavaScript ?
Se usan métodos para seleccionar, modificar, crear o eliminar elementos en la página.
Selección de elementos:
document.getElementById('id')
document.querySelector('.clase')
document.querySelectorAll('div')
Manipulación:
element.innerHTML (cambiar contenido HTML)
element.textContent (cambiar texto)
element.setAttribute('attr', 'valor') (modificar atributos)
Crear y eliminar:
document.createElement('p') (crear)
parent.appendChild(element) (agregar)
parent.removeChild(element) (eliminar)
30
3-Cómo evitar que se produzca un evento ?
Usa event.preventDefault() para bloquear el comportamiento predeterminado del evento, como evitar que un formulario se envíe o que un enlace navegue a otra página.
31
4-Qué hace dataset ?
La propiedad dataset permite acceder a los atributos HTML personalizados que empiezan con data-, facilitando guardar y leer información extra en los elementos para usarla en JavaScript.
32
5-Diferencia entre textContent e innerHTML ?
textContent: Se usa para obtener o modificar solo el texto de un elemento, sin interpretar etiquetas HTML.
innerHTML: Permite obtener o cambiar el contenido HTML completo, incluyendo etiquetas y texto.
33
6-Que es la Web Storage API y su funcionamiento ?
La Web Storage API permite almacenar datos clave-valor en el navegador con dos tipos:
localStorage
Persiste incluso tras cerrar y abrir el navegador.
Capacidad de 5-10 MB aproximadamente.
sessionStorage
Datos solo para la sesión actual (se borran al cerrar la pestaña o ventana).
Capacidad similar a localStorage pero limitada a la sesión.
34
7-Como uso localStorage, como la inicializo, cuales son sus metodos ?
Inicializar: No necesita inicialización previa, está disponible globalmente como localStorage.
Métodos principales:
localStorage.setItem(key, value): Guarda un valor (string) con una clave.
localStorage.getItem(key): Obtiene el valor guardado para una clave.
localStorage.removeItem(key): Elimina el valor guardado para una clave.
localStorage.clear(): Limpia todos los datos almacenados.
localStorage.key(index): Obtiene la clave en la posición index.
35
8-Como refresco la pagina actual con javascript ?
location.reload() sirve para recargar (refrescar) la página web actual en el navegador. Es útil para actualizar el contenido sin que el usuario tenga que hacerlo manualmente.
36
10-Qué es classList y para qué sirve?
La propiedad classList permite acceder, agregar, quitar o alternar clases CSS de un elemento de forma sencilla.
element.classList.add('active');
element.classList.remove('hidden');
element.classList.toggle('selected');
37
11-Cómo crear y agregar un elemento al DOM?
Usando document.createElement para crearlo y appendChild o append para insertarlo.
38
12-Cómo eliminar un elemento del DOM?
Se usa parent.removeChild(element) o el método moderno element.remove().
39
13-Qué es querySelector y querySelectorAll?
querySelector: Devuelve el primer elemento que coincide con el selector CSS dado.
querySelectorAll: Devuelve todos los elementos que coinciden, en una NodeList.
40
1-Que son los operadores de expresiones ?
Los operadores de expresiones son símbolos que indican una operación a realizar entre uno o más valores o variables, devolviendo un resultado.
41
2-Que tipos de operadores existen en javascript ?
Aritméticos: +, -, *, /, %, ++, --.
De asignación: =, +=, -=, *=, /=.
De comparación: ==, ===, !=, !==, >, <, >=, <=.
Lógicos: &&, ||, !.
De cadena: + (concatena cadenas).
Ternario: condición ? valor1 : valor2.
De tipo: typeof, instanceof.
42
1-Que es una funcion en javascript ?
Una función en JavaScript es un bloque de código reutilizable diseñado para realizar una tarea o devolver un valor. Se ejecuta cuando es llamada y puede recibir parámetros y devolver resultados con return.
43
2-Cuál es la diferencia entre una función y un constructor
Función: bloque de código que realiza una tarea específica cuando se invoca.
Constructor: función especial usada para crear e inicializar objetos de una clase, se ejecuta automáticamente al usar new.
Las funciones pueden llamarse muchas veces con parámetros, mientras que el constructor se usa al instanciar un objeto para definir sus valores iniciales.
44
3-Que es un parametro ?
Un parámetro es una variable definida en una función que recibe un valor al momento de la llamada, permitiendo que la función trabaje con él.
45
4-Que es un argumento ?
Los argumentos son los valores que se pasan a una función cuando se llama, y que la función usa para realizar sus operaciones.
46
5-Cual es la diferencia de una funcion normal a una de flecha ?
Las funciones flecha no usan la palabra function; las expresiones sí.
Las funciones flecha no tienen su propio this, heredan el this del contexto donde se definen.
Las expresiones de función tienen su propio this, que depende de cómo se llamen.
Las funciones flecha tienen retorno implícito si no usan llaves; las funciones normales requieren return.
Las funciones flecha no tienen objeto arguments; las expresiones sí.
Las funciones flecha no pueden usarse como constructores (no funcionan con new).
Las expresiones de función sí pueden usarse como constructores con new.
47
1-Qué significa this en JavaScript?
this es una palabra clave que apunta al contexto de ejecución actual. Su valor cambia según dónde y cómo se use.
En métodos, this es el objeto que contiene el método.
En el contexto global (navegador), this es el objeto global (window).
En funciones normales sin modo estricto, this es el objeto global.
En funciones con modo estricto, this es undefined.
No funciona en funciones flecha (que no tienen su propio this).
call, apply y bind permiten definir explícitamente el valor de this.
48
1-Explique la diferencia entre funciones sincronas y funciones asincronas.
Funciones síncronas: Se ejecutan en orden, una línea de código debe terminar antes de que comience la siguiente. Bloquean el flujo hasta completar la tarea.
Funciones asíncronas: No bloquean el flujo; permiten que otras tareas se ejecuten mientras esperan un resultado (por ejemplo, llamadas a una API). Usan mecanismos como callbacks, promesas o async/await.
49
2-¿Qué es una API y para qué sirve?
Una API es un conjunto de reglas que permite la comunicación entre diferentes software. En web, se usa para enviar o recibir datos desde un servidor.
Métodos más comunes:
GET: Obtener información.
POST: Crear un recurso.
PUT: Actualizar un recurso completo.
PATCH: Actualizar parcialmente un recurso.
DELETE: Eliminar un recurso.
HEAD: Obtener solo encabezados de respuesta.
OPTIONS: Saber qué métodos soporta el servidor.
50
3-¿Por qué Fetch es la forma preferida de enviar una solicitud de red?
fetch es la API nativa de JavaScript para hacer solicitudes de red en navegadores.
Ventajas:
No bloquea el hilo principal (mejor rendimiento y experiencia de usuario).
Convierte datos JSON fácilmente.
Usa promesas, con una sintaxis más limpia y moderna que los callbacks.
51
4-Como se usa fetch y para que ?
fetch se usa para hacer solicitudes HTTP desde el navegador y obtener respuestas de servidores.
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
52
5-Qué son las promesas, cómo funcionan y sus ventajas ?
Las promesas son objetos en JavaScript que representan el resultado eventual de una operación asíncrona. Mejoran la legibilidad y manejo de errores comparado con callbacks.
Estados:
Pendiente: operación en proceso.
Cumplida: operación exitosa con resultado.
Rechazada: operación fallida con error.
El constructor recibe dos funciones: resolve (éxito) y reject (error).
Usos comunes:
Llamadas a APIs.
Lectura/escritura de archivos.
Temporizadores y eventos.
53
6-Como crear una promesa ?
const miPromesa = new Promise((resolve, reject) => {
const exito = true;
if (exito) {
resolve('Éxito');
} else {
reject('Error');
}
});
54
7-¿Existe otra forma, aparte de usar promesas explícitas, para manejar código asíncrono?
Sí, async y await son palabras clave que simplifican el manejo de promesas, haciendo el código más claro y legible.
async: se usa antes de una función para indicar que es asíncrona y siempre devuelve una promesa.
await: se usa dentro de funciones async para esperar a que una promesa se resuelva antes de continuar.
55
8-Como crear una solictud con Async y Await ?
async function obtenerDatos() {
try {
const respuesta = await fetch('https://api.example.com/data');
const datos = await respuesta.json();
console.log(datos);
} catch (error) {
console.error('Error:', error);
}
}
56
9-Que es una callback ?
Una callback es una función que se pasa como argumento a otra función para que se ejecute después de que termine una tarea, especialmente en operaciones asíncronas.
57
10-Como puedo crear una callback ?
function saludar(nombre, callback) {
console.log(`Hola, ${nombre}`);
callback();
}
saludar('Juan', () => {
console.log('Callback ejecutada');
});
58
11-Diferencia entre Callback, Promesa y Async/Await
Callback: función que se pasa como argumento y se ejecuta después de otra tarea.
Promesa: objeto que representa un resultado futuro, facilita manejar código asíncrono evitando el "Callback Hell", permite encadenar .then() y manejar errores con .catch().
Async/Await: sintaxis que hace el código asíncrono más legible, usando async para declarar funciones y await para esperar promesas, con manejo de errores sencillo usando try/catch.
59
12-Que es el Callback Hell ?
Es cuando las operaciones asíncronas se anidan en muchas callbacks, haciendo el código difícil de leer y mantener. Ocurre por usar demasiadas funciones callback anidadas.
60
13-Cuál es la diferencia entre API y REST API ?
API: conjunto de reglas y protocolos que permiten la comunicación entre software.
REST API: tipo específico de API que sigue principios REST, usando métodos HTTP, URLs descriptivas y formatos como JSON.
61
14-¿Cómo funciona .then()?
.then() se usa con promesas para ejecutar una función cuando la promesa se resuelve exitosamente. Recibe como argumento una función que maneja el resultado.
62
15-¿Qué es AJAX?
AJAX es una técnica que permite a las páginas web comunicarse con el servidor de forma asíncrona, actualizando datos sin recargar la página completa. Usa el objeto XMLHttpRequest para enviar y recibir datos.
63
1-Qué es una clase?
Una clase es una plantilla o molde para crear objetos con propiedades y métodos.
class Persona {
constructor(nombre) {
this.nombre = nombre;
}
saludar() {
console.log(`Hola, soy ${this.nombre}`);
}
}
64
2-Cómo puedo crear un objeto?
const persona = new Object();
persona.nombre = "Ana";
65
3-Para qué sirven public y private?
Son modificadores de acceso que controlan la visibilidad de propiedades y métodos en una clase.
public: accesible desde fuera de la clase.
private: solo accesible dentro de la clase, protege datos y fomenta el encapsulamiento.
66
4-Qué es el constructor en una clase?
Es un método especial que se ejecuta automáticamente al crear una instancia de la clase, usado para inicializar propiedades.
class Animal {
constructor(nombre) {
this.nombre = nombre;
}
}
67
5-Cómo se definen métodos en una clase?
Los métodos se definen dentro de la clase sin la palabra function.
class Coche {
arrancar() {
console.log("El coche arrancó");
}
}
68
6-Qué es una instancia de clase?
Es un objeto creado a partir de una clase.
const auto = new Coche();
69
7-Qué es la herencia en clases?
Es el mecanismo por el cual una clase puede heredar propiedades y métodos de otra con extends.
class Perro extends Animal {
ladrar() {
console.log("Guau!");
}
}
70
8-Para qué sirve super?
Se usa para llamar al constructor o métodos de la clase padre.
class Perro extends Animal {
constructor(nombre, raza) {
super(nombre);
this.raza = raza;
}
}
71
9-Qué es el encapsulamiento en las clases de javascript?
Es el principio de ocultar los detalles internos de una clase, usando modificadores como private o # para proteger datos sensibles.
72
10-Qué es un getter en una clase?
Es un método que obtiene el valor de una propiedad, pero se usa como si fuera una propiedad.
get nombreCompleto() {
return `${this.nombre} ${this.apellido}`;
}
73
11-Qué es un setter en una clase?
Es un método que asigna o modifica el valor de una propiedad de forma controlada.
set nombre(nuevoNombre) {
this._nombre = nuevoNombre;
}
74
12-Qué son los métodos estáticos?
Son métodos que pertenecen a la clase y no a sus instancias.
class Util {
static sumar(a, b) {
return a + b;
}
}
console.log(Util.sumar(2, 3)); // 5
No requieren instanciar la clase.
Sirven para utilidades generales.
Menor consumo de memoria.
75
13-Cómo puedo usar propiedades privadas en una clase?
Se definen con # para que solo puedan accederse dentro de la clase.
class Cuenta {
#saldo = 0;
}
76
14-Qué es la composición frente a herencia?
La composición construye clases usando otras clases u objetos como propiedades, en lugar de heredar.
Esta se hace por medio de una funcion que activa otras funciones asi:
// Funciones que representan comportamientos
function puedeCaminar(persona) {
return {
caminar: () => console.log(`${persona.nombre} está caminando 🚶`)
};
}
function puedeHablar(persona) {
return {
hablar: () => console.log(`${persona.nombre} dice: Hola 👋`)
};
}
function puedeProgramar(persona) {
return {
programar: () => console.log(`${persona.nombre} está programando 💻`)
};
}
// Usamos composición para crear un "programador"
function crearProgramador(nombre) {
const persona = { nombre };
return {
...persona,
...puedeCaminar(persona),
...puedeHablar(persona),
...puedeProgramar(persona)
};
}
const adam = crearProgramador("Adam");
adam.caminar(); // Adam está caminando 🚶
adam.hablar(); // Adam dice: Hola 👋
adam.programar(); // Adam está programando 💻
77
15-Cómo puedo sobrescribir un método de una clase padre?
Definiendo el mismo método en la clase hija.
class Hijo extends Padre {
saludar() {
console.log("Hola desde Hijo");
}
}
78
16-Qué significa instanciar una clase?
Significa crear un objeto basado en esa clase usando new.
const obj = new MiClase();
79
17-Qué diferencia hay entre una clase y un objeto literal?
Clase: es un molde para crear múltiples objetos.
Objeto literal: es una única instancia sin molde formal.
80
18-Qué es el polimorfismo en POO?
Es la capacidad de que un mismo método se comporte de manera distinta según la clase que lo implemente.
81
19-Diferencia entre herencia prototipo y herencia clásica?
Herencia Prototipo (JavaScript):
Los objetos heredan de otros objetos directamente.
No existen clases formales, se usa delegación en el prototipo.
Herencia Clásica (Java, C++):
Basada en clases como plantillas.
Una subclase extiende una superclase heredando atributos y métodos.
82
1-¿Qué son los módulos en JavaScript y cómo se utilizan?
Los módulos en JavaScript son bloques de código organizados en archivos separados que permiten exportar e importar funciones, objetos o variables. Esto ayuda a mantener el código limpio, reutilizable y fácil de mantener.
83
2-¿Cómo funciona la importación y exportación con módulos en JavaScript?
En JavaScript, los módulos permiten dividir el código en archivos separados para organizarlo mejor. Para compartir funciones, objetos o variables entre archivos, se usan exportaciones e importaciones.
// Exportación nombrada
export function saludar() {
console.log("Hola");
}
// Exportación por defecto
export default function despedir() {
console.log("Adiós");
}
// Importar exportaciones nombradas
import { saludar } from './modulo.js';
saludar(); // "Hola"
// Importar exportación por defecto
import despedir from './mod
84
3-¿Cuál es la diferencia entre la exportación normal y la default?
Exportación normal (nombrada):
Puedes exportar múltiples elementos desde un archivo.
Se deben importar con el mismo nombre exacto.
Se colocan entre llaves { } al importar.
Exportación por defecto:
Solo puede haber una exportación por defecto por archivo.
Se puede importar con cualquier nombre (no requiere { }).
85
4-¿Cómo importar o usar varios archivos JS en tu proyecto?
Se utiliza type="module" en el script principal.
86
1-¿Qué es JavaScript?
JavaScript es un lenguaje de programación interpretado y de alto nivel, usado principalmente en desarrollo web para agregar interactividad y dinamismo a las páginas.
Se ejecuta en el navegador sin necesidad de compilación.
Soporta paradigmas como programación orientada a objetos, funcional y basada en eventos.
Se usa para tareas como validación de formularios, animaciones o actualización dinámica de contenido.
87
2-¿Cuál es la historia de JavaScript?
JavaScript fue creado en 1995 por Brendan Eich en Netscape como un lenguaje de scripting para el navegador Netscape Navigator. Al inicio se llamó LiveScript, pero se renombró a JavaScript para aprovechar la popularidad de Java.
En 1997, se estandarizó como ECMAScript, y sus versiones (ES3, ES5, ES6, etc.) han agregado nuevas características y mejoras.
Hoy en día es esencial en el desarrollo web, tanto en frontend como en backend (con Node.js), y es uno de los lenguajes más populares por su versatilidad y soporte multiplataforma.
88
3-¿Conoces ECMAScript?
ECMAScript es el estándar definido por la organización ECMA que describe cómo debe funcionar JavaScript.
Es un conjunto de reglas y especificaciones que garantizan que el lenguaje sea consistente, moderno y compatible entre navegadores y entornos.
89
4-Errores comunes en JavaScript y sus causas
SyntaxError → Error de sintaxis, como paréntesis o llaves faltantes.
ReferenceError → Se accede a una variable no definida o fuera de alcance.
TypeError → Operación inválida en un tipo de dato (ej. llamar método en null).
RangeError → Número fuera del rango permitido (ej. índice negativo en array).
InternalError → Error interno grave del motor de JavaScript.
Error personalizado → Errores definidos por el desarrollador usando la clase Error.
90
5-¿Qué es y cómo funciona el modo estricto en JavaScript?
El modo estricto en JavaScript es un modo que aplica reglas más estrictas para evitar errores comunes y malas prácticas. Se activa con "use strict"; al inicio de un archivo o función.
Bloquea el uso de variables sin declarar.
Impide repetir nombres de parámetros.
Cambia el comportamiento de this (puede ser undefined en funciones normales).
Evita usar identificadores reservados (eval, arguments, private, etc.).
✅ Se usa para escribir código más seguro, limpio y evitar bugs difíciles de detectar.
91
6-¿Cómo se manejan los errores en JavaScript?
Usando try...catch para capturar errores y evitar que el programa se detenga.
throw para lanzar errores personalizados.
finally ejecuta código siempre, ocurra o no un error.
En promesas y funciones asíncronas se usa .catch() o try...catch con async/await.
92
7-¿Qué es el Event Loop?
El event loop es un mecanismo que permite a JavaScript manejar tareas que tardan en completarse (como pedir datos a un servidor) sin detener todo el programa.
Partes básicas del event loop:
Call Stack (Pila de llamadas): Aquí se ponen las funciones que se ejecutan.
Web APIs: Herramientas del navegador (temporizadores, peticiones).
Task Queue (Cola de tareas): Donde van los callbacks listos para ejecutarse.
Flujo paso a paso:
JavaScript ejecuta el código en el Call Stack.
Al encontrar algo asíncrono, lo delega a las Web APIs.
Cuando la Web API termina, manda el callback a la Task Queue.
El event loop revisa si el Call Stack está vacío.
Si está vacío, mueve el callback de la cola a la pila para ejecutarlo.
Esto se repite indefinidamente, evitando bloqueos.
93
8-¿Qué es la delegación de eventos en JavaScript y para qué sirve?
La delegación de eventos consiste en asignar un único manejador a un elemento padre para controlar los eventos que ocurren en sus elementos hijos.
✅ Ventajas:
Mejor rendimiento (menos listeners).
Soporta elementos dinámicos creados después de la carga.
Código más limpio y fácil de mantener.
94
1-¿Qué es el objeto Date en JavaScript?
Es un objeto incorporado que permite trabajar con fechas y horas.
95
2-¿Cómo se crea la fecha y hora actual con Date?
const ahora = new Date();
96
3-¿Cómo se crea un objeto Date a partir de una fecha específica?
const fecha = new Date("2025-09-09");
97
4-¿Cómo se crea un Date con año, mes, día, hora, minuto y segundo?
const fecha = new Date(2025, 8, 9, 14, 30, 0);
98
5-¿Qué método devuelve el año de un objeto Date?
fecha.getFullYear(); // 2025
99
6-¿Qué método devuelve el mes?
getMonth() → devuelve de 0 (enero) a 11 (diciembre).
100
7-¿Qué método devuelve el día del mes?
getDate() → de 1 a 31.
101
8-¿Qué método devuelve el día de la semana?
getDay() → de 0 (domingo) a 6 (sábado).
102
¿Qué es Map en JavaScript?
Map es un objeto que almacena pares clave-valor.
Es parecido a un objeto {}, pero con ventajas:
Las claves pueden ser de cualquier tipo (objetos, funciones, primitivos).
Mantiene el orden de inserción.
Tiene métodos propios para trabajar con los datos.
Se crea así:
const myMap = new Map();
O inicializado:
const myMap = new Map([
["nombre", "Adam"],
[42, "respuesta"],
[{}, "un objeto como clave"]
]);
103
Métodos principales de Map ?
🔹 Añadir y obtener
set(key, value) → Agrega o actualiza un valor con su clave.
get(key) → Devuelve el valor asociado a la clave, o undefined si no existe.
const map = new Map();
map.set("color", "rojo");
console.log(map.get("color")); // "rojo"
🔹 Verificar
has(key) → Devuelve true si la clave existe.
delete(key) → Elimina una entrada por su clave.
clear() → Borra todas las entradas.
104
¿Qué es un ListNode? (Linked list)
Un ListNode es un nodo dentro de una lista enlazada (linked list).
En programación, una lista enlazada es una colección de nodos, donde cada nodo guarda:
Un valor (dato).
Una referencia al siguiente nodo (o null si es el último).
👉 Ejemplo de definición clásica en JavaScript:
class ListNode {
constructor(value, next = null) {
this.value = value; // dato que almacena el nodo
this.next = next; // puntero al siguiente nodo
}
}
105
¿Cuál es la diferencia entre "push" y "pull" en Git?
Push: envía los cambios locales a un repositorio remoto después de confirmarlos.
Pull: combina fetch y merge. Descarga los cambios del remoto y los fusiona con la rama local.
106
¿Cuál es la diferencia entre Rebase y Merge en Git?
Merge:
Mantiene el historial de ambas ramas.
Crea un nuevo commit de merge.
Puede generar un historial más complejo.
Los conflictos se resuelven antes del commit de merge.
Rebase:
Reescribe el historial.
No crea commits de merge.
Genera un historial más lineal.
Los conflictos se resuelven durante el proceso, commit por commit.
Cuándo usar cada uno:
Merge: si quieres conservar el historial real de cómo se unieron las ramas.
Rebase: si prefieres un historial limpio y lineal (pero evita usarlo en ramas compartidas).
107
¿Qué flujos de trabajo de ramificación en Git conoces?
Por problema (Issue Branch): cada tarea o bug se desarrolla en su propia rama.
Por lanzamiento (Release Branch): se crean ramas específicas para cada versión importante.
Por entorno (Environment Branch): se mantienen ramas separadas para desarrollo, pruebas y producción.
108
¿Cómo se utiliza el sistema de control de versiones?
Se utiliza mediante comandos en la terminal o con interfaces gráficas que ofrecen aplicaciones como VS Code.
109
¿Qué significa branching o rama en Git?
Una rama es una línea de desarrollo separada. Permite trabajar en nuevas funciones o correcciones sin afectar la rama principal. Al terminar, los cambios pueden fusionarse con la rama principal.
Un merge commit es un commit que se crea al fusionar dos ramas.
110
¿Cuáles son los estados en Git?
Confirmado (Committed): cambios guardados en la base de datos local.
Modificado (Modified): archivo editado pero no guardado en la base de datos.
Preparado (Staged): archivo marcado para incluirse en el próximo commit.
111
¿Qué es un repositorio remoto?
Es una versión del proyecto alojada en Internet o en una red. Puede haber varios repositorios remotos con distintos permisos de lectura/escritura.
112
¿Qué son las etiquetas en Git y para qué sirven?
Son referencias estáticas a commits específicos. Se usan para marcar versiones o hitos importantes.
Etiquetas ligeras: simples punteros a un commit.
Etiquetas anotadas: incluyen nombre, correo, fecha, mensaje y pueden firmarse con GPG.
113
¿Qué significa HEAD en Git?
Es un puntero que indica el commit actual en la rama activa. Puede apuntar a una rama o estar en estado "detached HEAD" si apunta directamente a un commit.
114
¿Qué significa fast-forward en Git?
Es una fusión en la que Git simplemente avanza el puntero de la rama, ya que no existen commits divergentes.
115
¿Qué es Git y para qué se utiliza?
Es un sistema de control de versiones distribuido que permite rastrear cambios en el código, colaborar y gestionar el historial del proyecto.
116
¿Cuál es la diferencia entre Git y GitHub?
Git: herramienta de control de versiones en local.
GitHub: plataforma en línea que aloja repositorios Git y facilita la colaboración.
117
¿Qué es un commit en Git?
Es una instantánea de los cambios realizados en el código. Incluye un mensaje descriptivo y un hash único.
118
¿Qué es un conflicto de fusión (merge conflict) y cómo se resuelve?
Ocurre cuando Git no puede combinar ramas automáticamente por cambios en las mismas líneas. Se resuelve editando manualmente los archivos en conflicto y confirmando la solución.
119
¿Cómo se realiza un push en Git?
git push nombre-remoto nombre-rama
120
¿Qué es un pull request (PR) en GitHub?
Es una solicitud para fusionar cambios de una rama a otra. Permite revisar y aprobar los cambios antes de integrarlos.
121
¿Cómo se clona un repositorio en Git?
git clone url-repositorio
122
¿Qué es el archivo .gitignore y para qué se utiliza?
Sirve para indicar qué archivos o carpetas no deben ser rastreados por Git (ej. temporales, dependencias, configuración local).
123
¿Qué es el historial de commits en Git y cómo se puede ver?
Es el registro de todos los commits del repositorio. Se visualiza con: git log
124
¿Cómo se revierten los cambios en Git?
git checkout: descarta cambios no confirmados.
git reset: deshace commits.
git revert: crea un nuevo commit que deshace uno anterior.
125
¿Cómo se puede ver la diferencia entre dos commits en Git?
git diff hash1 hash2
126
¿Qué es el staging area en Git?
Es el área de preparación donde se guardan los cambios listos para el próximo commit. Se añaden con git add.
127
¿Qué es un fork en GitHub?
Es una copia personal de un repositorio en GitHub. Permite experimentar o contribuir sin afectar al repositorio original.
128
¿Cómo se puede ver qué archivos han cambiado en un repositorio de Git?
git status
129
¿Qué es git rebase y cómo se utiliza?
Permite aplicar los commits de una rama sobre otra, reescribiendo el historial. Se usa para mantener un historial lineal y ordenado.
130
¿Cómo se puede eliminar una rama en Git?
Local: git branch -d nombre-rama
Remota: git push nombre-remoto --delete nombre-rama
131
¿Cómo se puede hacer un cherry-pick en Git?
git cherry-pick hash-commit
132
¿Qué es el comando git fetch?
Descarga los cambios de un repositorio remoto sin fusionarlos. Permite ver ramas y commits remotos antes de integrarlos.
133
¿Cómo se puede restablecer un archivo a una versión anterior en Git?
git checkout hash-commit -- nombre-archivo
134
¿Cómo se pueden buscar cambios específicos en el historial de commits?
git log --grep="texto"
135
¿Qué es producción?
Diferencias entre entornos:
Desarrollo: donde los devs escriben y prueban código (inestable, experimental).
Pruebas: entorno formal para testear con datos de prueba y automatización.
Producción: versión final y estable, usada por usuarios reales, con máxima estabilidad, rendimiento y seguridad.
En software, producción (prod) es el entorno donde el producto/servicio está disponible y operativo para los usuarios finales.
136
¿Qué son Hotfixes?
Un hotfix es una corrección de emergencia aplicada directamente en producción para resolver problemas críticos (funcionalidad o seguridad).
Se diferencia de las actualizaciones normales porque se implementa rápidamente y de forma aislada para arreglar un error urgente.
137
¿Qué son las ramas de apoyo en Git Flow y cuál es su función?
feature/:
Para desarrollar nuevas funcionalidades.
Se crean desde develop y se fusionan de nuevo en develop.
release/:
Para preparar una nueva versión.
Se crean desde develop y se fusionan en master y develop.
hotfix/:
Para arreglos críticos en producción.
Se crean desde master y se fusionan en master y develop.
138
Recordatorio de como se conecta un form para post.
form.addEventListener("submit", async (e) => {
e.preventDefault();
const datos = {
usuario: form.elements["usuario"].value,
correo: form.elements["correo"].value
};
const res = await fetch("/api/registro", {
method: "POST",
headers: {"Content-Type": "application/json"},
body: JSON.stringify(datos)
});
if (res.ok) alert("Formulario enviado con éxito");
});
139
1. ¿Qué es y qué hace TypeScript?
TypeScript es un lenguaje de programación de código abierto desarrollado y mantenido por Microsoft. Es un superset de JavaScript, lo que significa que todo el código JavaScript válido también es válido en TypeScript.
La gran diferencia es que añade tipado estático y otras características que no existen en JavaScript, lo que lo hace ideal para proyectos grandes y colaborativos.
140
¿Para qué sirve TypeScript?
Es excelente para proyectos grandes mantenidos por múltiples desarrolladores, ya que el tipado estático ayuda a detectar errores temprano.
Permite escribir código más claro y estructurado mediante tipos, interfaces y clases.
Transpila a JavaScript estándar, garantizando compatibilidad con navegadores y entornos.
Se integra con frameworks y librerías como React, Angular y Vue.js.
141
Lo esencial de TypeScript
Tipado estático opcional: permite declarar tipos para variables, parámetros y retornos de funciones.
Superset de JavaScript: cualquier código JS válido funciona en TS.
Compilación a JavaScript: se convierte en JS para ser ejecutado en cualquier entorno.
Soporte de características modernas: clases, módulos, arrow functions, etc.
Orientado a objetos y modular: con clases, interfaces y namespaces.
Gran ecosistema: herramientas como Visual Studio Code y una comunidad activa.
142
Diferencia entre type e interface
type
Alias para cualquier tipo.
Permite uniones (|) e intersecciones (&).
Maneja tipos complejos como funciones o tuplas.
No se puede extender ni reabrir.
interface
Define la forma de un objeto.
Puede extender otras interfaces.
Puede ser implementada por clases.
Se puede reabrir y extender varias veces.
Mejor soporte con herramientas de documentación.
143
Diferencia entre unknown, any y never
unknown: similar a any, pero más seguro porque obliga a verificar el tipo antes de usarlo.
any: desactiva la verificación de tipos (peligroso, útil solo para migraciones).
never: representa algo que nunca ocurre (funciones que no retornan o código imposible).
144
El tipo void
Se usa en funciones que no devuelven un valor, solo producen efectos secundarios.
function greet(name: string): void {
console.log(`Hola, ${name}`);
}
145
Que son las Uniones en TypeScript
Permiten que una variable pueda tener más de un tipo.
let valor: string | number;
146
Que es Type Assertion ?
Permite indicar manualmente al compilador que trate un valor como un tipo específico:
let valor = variable as Tipo;
const inputEdad = input as HTMLInputElement;
147
Que es la Inferencia de tipos ?
TypeScript puede deducir automáticamente el tipo de una variable según su valor, sin necesidad de declararlo.
148
Archivo tsconfig.json
El archivo tsconfig.json es uno de los archivos más importantes en un proyecto TypeScript (y Angular lo usa mucho).
compilerOptions → es el corazón del archivo.
Aquí defines reglas para el compilador:
"target" → a qué versión de JavaScript compilar (es2015, es2020, etc.).
"module" → qué sistema de módulos usar (esnext, commonjs).
"strict" → activa todas las comprobaciones estrictas de TypeScript (muy recomendable).
"esModuleInterop" → facilita importar librerías con import.
"skipLibCheck" → evita errores en los archivos de definiciones (.d.ts), suele estar en true.
"baseUrl" y "paths" → muy útiles para crear alias de rutas (@app/*, @shared/*, etc.).
include / exclude
"include" → qué archivos o carpetas incluir en la compilación (normalmente src).
"exclude" → qué ignorar (node_modules, dist, etc.).
extends
En Angular casi siempre verás "extends": "./tsconfig.base.json".
Eso significa que tu tsconfig.json hereda configuraciones de otro archivo base.
149
Como se ven las propiedas opcionales en typescript ?
Se declaran con ?:
class Persona {
nombre?: string;
}
150
Que son las Tuplas y como se ven ?
Arreglos de longitud fija y tipos específicos:
let tupla: [string, number] = ["texto", 10];
151
¿Cómo correr TypeScript en un proyecto?
npm init -y:
Crea archivo package.json
npm install --save-dev typescript:
Agrega typescript a las herramientas de desarrollo.
npx tsc --init
Crea el archivo tsconfig.json
npx tsc:
Ejecuta el compilador de typescript.
npx tsc --watch:
Se queda escuchando cambios
152
Como instalar Sass en un proyecto ?
1. Instalación
Primero instala Node.js, luego instala Sass:
Global (para usar en cualquier proyecto):
npm install -g sass
Local (solo en el proyecto actual):
npm install sass --save-dev
2. Estructura de carpetas recomendada
mi-proyecto/
│── scss/
│ └── style.scss (archivo principal Sass)
│── css/
│ └── style.css (archivo compilado)
│── index.html
153
Comandos basicos de Sass.
Comandos básicos
Compilar un archivo Sass a CSS (una sola vez):
sass scss/style.scss css/style.css
Compilar en modo "watch" (actualiza al guardar cambios):
sass --watch scss/style.scss css/style.css
Compilar con salida comprimida (minificado):
sass scss/style.scss css/style.min.css --style compressed
Compilar toda una carpeta SCSS a CSS:
sass --watch scss:css
154
Cual es al diferencia de sass y scss ?
Sass y SCSS son dos sintaxis diferentes del mismo preprocesador de estilos Sass.
Sass (.sass): Es la sintaxis más antigua, no usa llaves {} ni punto y coma ;, se basa en la indentación (espacios). Es más concisa pero menos parecida a CSS.
SCSS (.scss): Es la sintaxis más moderna y la más usada. Usa llaves {} y punto y coma ;, igual que CSS, por lo que cualquier archivo CSS válido también es un archivo SCSS válido.
En resumen: Sass y SCSS hacen lo mismo, solo cambia la forma de escribir el código.
155
1-Que es la iteracion?
La iteración en programación es el proceso de repetir un conjunto de instrucciones o bloques de código varias veces. Esta repetición puede estar controlada por una condición lógica o por un contador que determina el número de veces que se debe ejecutar el bloque de código. Las iteraciones son fundamentales en la programación porque permiten automatizar tareas repetitivas y procesar conjuntos de datos de manera eficiente.
156
2-Que es la Recursion ?
La recursión es una técnica de programación en la cual una función se llama a sí misma directa o indirectamente para resolver un problema. Este enfoque se utiliza para descomponer un problema complejo en subproblemas más pequeños y manejables, que tienen la misma estructura que el problema original.
157
3-Que es la programacion dinamica ?
La programación dinámica es una forma de resolver problemas grandes descomponiéndolos en problemas más pequeños y almacenando las soluciones de estos subproblemas para evitar resolverlos múltiples veces.
158
4-Que es la terminal y para que sirve?
La terminal, también conocida como línea de comandos, consola o shell, es una interfaz de texto que permite a los usuarios interactuar directamente con el sistema operativo.
1-Herramientas como Git, que se utilizan para el control de versiones del código, se manejan principalmente desde la terminal.
2-Permite ejecutar comandos del sistema operativo, como crear, modificar o eliminar archivos y directorios, navegar por el sistema de archivos y gestionar procesos.
3- Los desarrolladores utilizan la terminal para instalar y gestionar paquetes y dependencias a través de gestores de paquetes como npm (Node.js), pip (Python), Maven (Java), entre otros.
159
5-Como funcionan las cookies ?
Las cookies son pequeños archivos de texto que se almacenan en el navegador del usuario cuando visita un sitio web. Estas cookies contienen datos que los sitios web pueden usar para recordar información sobre el usuario, como sus preferencias, estado de inicio de sesión y actividades anteriores en el sitio.
Como funcionan ?
1- Cuando un usuario visita un sitio web, el servidor puede enviar una cookie al navegador del usuario. El navegador almacena esta cookie en el disco duro del usuario.
2-En las siguientes visitas al mismo sitio web, el navegador enviará automáticamente la cookie almacenada al servidor. Esto permite al servidor reconocer al usuario y recordar información relevante.
3- Una cookie puede contener información como un identificador único, preferencias del usuario, estado de autenticación, y otros datos específicos del sitio web.
160
6-Que es una sintaxis en programacion ?
La sintaxis se refiere a las reglas y estructuras que definen cómo se deben escribir y estructurar las instrucciones en un lenguaje de programación específico. Esencialmente, la sintaxis determina la gramática del lenguaje de programación y dicta cómo deben combinarse palabras clave, operadores, variables y otros elementos para formar instrucciones válidas que el compilador o intérprete pueda entender y ejecutar correctamente.
161
7-Que es node, para que sirve y cuales son sus funciones principales.
Node.js proporciona un entorno de tiempo de ejecución en el cual se puede ejecutar JavaScript del lado del servidor, es decir, en el servidor donde se aloja una aplicación web.
Servidor web: Node.js es muy popular para crear servidores web rápidos y escalables. Su modelo de E/S no bloqueante y orientado a eventos lo hace ideal para aplicaciones que manejan muchas conexiones simultáneas, como aplicaciones en tiempo real (por ejemplo, chats, juegos en línea).
Herramienta de línea de comandos: Node.js también se utiliza para crear herramientas de línea de comandos y scripts del lado del servidor.
Desarrollo de API: Es común utilizar Node.js para desarrollar APIs RESTful debido a su capacidad para manejar solicitudes HTTP de manera eficiente.
Desarrollo de aplicaciones: Muchos frameworks y librerías están disponibles en Node.js para el desarrollo de aplicaciones web, móviles y de escritorio.
162
8-Que es el SEO ?
SEO (Search Engine Optimization) en español se traduce como Optimización para Motores de Búsqueda. Es un conjunto de prácticas y técnicas orientadas a mejorar la visibilidad de un sitio web en los resultados orgánicos (no pagados) de los motores de búsqueda como Google, Bing, Yahoo, entre otros.
163
9-Que es y como funciona el Sistema BEM ?
El método BEM (Block, Element, Modifier) es una convención de nomenclatura utilizada en el desarrollo de CSS para mejorar la mantenibilidad y reutilización del código. Fue desarrollado por Yandex y se basa en dividir la interfaz de usuario en bloques, elementos y modificadores.
Bloque (Block):
Es una unidad independiente que tiene significado por sí misma.
Representa un componente de la interfaz, como un menú, botón, contenedor, etc.
Ejemplo: .menu, .button, .container.
Elemento (Element):
Es una parte del bloque que no tiene significado independiente y está estrechamente relacionado con el bloque.
Se representa con el bloque seguido de dos guiones bajos (__) y el nombre del elemento.
Ejemplo: .menu__item, .button__icon.
Modificador (Modifier):
Es una variante del bloque o elemento que cambia su apariencia o comportamiento.
Se representa con el bloque o elemento seguido de dos guiones (-) y el nombre del modificador.
Ejemplo: .button--primary, .menu__item--active.
164
10-Cuales son las diferencias de React, Angular y Vue ?
1-React es una biblioteca de JavaScript para construir interfaces de usuario, desarrollada por Facebook. Se centra en la construcción de componentes reutilizables.
Uso Común:
Aplicaciones web interactivas y SPA (Single Page Applications).
Aplicaciones móviles (con React Native).
2-Angular es un framework completo para el desarrollo de aplicaciones web, mantenido por Google. Es una reescritura completa de AngularJS y ofrece una solución integral para el desarrollo front-end.
Uso Común:
Aplicaciones empresariales de gran escala.
Aplicaciones que requieren una solución integral y estructurada.
3-Vue es un framework progresivo para construir interfaces de usuario, creado por Evan You. Se puede adoptar de forma incremental y es conocido por su facilidad de integración y simplicidad.
Uso Común:
Proyectos de tamaño pequeño a mediano.
Proyectos donde la simplicidad y la facilidad de integración son importantes.
165
11-Cuales son los principios Solid ?
Los principios SOLID son un conjunto de cinco principios de diseño de software destinados a hacer que el software sea más comprensible, flexible y mantenible. Estos principios fueron introducidos por Robert C. Martin, también conocido como "Uncle Bob".
1-Principio de Responsabilidad Única: Single Responsibility.
"Una clase debe tener una sola razón para cambiar." Cada clase debe encargarse de una sola responsabilidad o tarea.
2-Principio Abierto/Cerrado: Open / Close principle.
"El software debe estar abierto para extensión, pero cerrado para modificación." Puedes extender el comportamiento de una clase sin modificar su código original.
3-Principio de Sustitución de Liskov: Liskov Substitution.
"Los objetos de una clase hija deben poder sustituir a los de su clase padre sin alterar el funcionamiento del programa." Una subclase debe comportarse como su superclase sin romper la lógica.
4-Principio de Segregación de Interfaces: Interface Segregation Principle.
"Los clientes no deben estar obligados a depender de interfaces que no usan." Es mejor tener muchas interfaces pequeñas que una sola grande.
5-Principio de Inversión de Dependencias: Dependency Inversion Principle.
"Los módulos de alto nivel no deben depender de módulos de bajo nivel. Ambos deben depender de abstracciones." Las clases no deben depender de clases concretas, sino de interfaces o abstracciones.
166
12-Que son los microfrontend, como usarlos ?
Los microfrontends son una arquitectura de desarrollo de software que extiende el concepto de microservicios al front-end. Al igual que los microservicios descomponen aplicaciones back-end monolíticas en servicios más pequeños y manejables, los microfrontends dividen una aplicación de front-end en fragmentos más pequeños y autónomos que pueden ser desarrollados, desplegados y mantenidos de forma independiente.
167
13-Que es un interprete , un compilador y transpilador en programacion ?
En programación, intérpretes, compiladores y transpiladores son herramientas esenciales que transforman el código fuente escrito en lenguajes de alto nivel en un formato que pueda ser ejecutado por una computadora.
1-Un intérprete es un programa que ejecuta directamente las instrucciones escritas en un lenguaje de programación sin necesidad de compilarlas previamente a código máquina. El intérprete lee el código fuente y lo ejecuta línea por línea.
Ejemplos: Python, JavaScript (cuando se ejecuta en un navegador web), Ruby
2-Un compilador es un programa que traduce el código fuente escrito en un lenguaje de alto nivel a código máquina o a un lenguaje intermedio antes de que el programa se ejecute.
Ejemplos: C/C++, Java (compilado a bytecode que es ejecutado por la JVM), Go
3-Un transpilador (también conocido como source-to-source compiler) es un tipo de compilador que traduce el código fuente de un lenguaje de programación a otro lenguaje de programación de nivel similar.
Ejemplos: Babel (JavaScript ES6+ a ES5), TypeScript (TypeScript a JavaScript), CoffeeScript (CoffeeScript a JavaScript)
168
14-Qué es un servicio no code?
Un servicio "no-code" se refiere a una plataforma o herramienta de software que permite a los usuarios crear aplicaciones y soluciones informáticas completas sin necesidad de escribir código tradicionalmente. Estas plataformas están diseñadas para ser intuitivas y accesibles para personas sin experiencia en programación, permitiéndoles diseñar, desarrollar y desplegar aplicaciones rápidamente mediante interfaces visuales y configuraciones simples.
169
15-Qué es y qué hace un servidor?
Un servidor es un sistema informático que proporciona recursos, datos, servicios o programas a otros sistemas, conocidos como clientes, a través de una red. Los servidores pueden ser hardware dedicado, software, o incluso ambos combinados. Su función principal es responder a las solicitudes de los clientes y proporcionarles los recursos necesarios.
170
16-Qué es Docker y cómo puede ser útil para un desarrollador front-end?
Docker es una plataforma de código abierto que permite a los desarrolladores empaquetar, distribuir y ejecutar aplicaciones dentro de contenedores.
Contenedores: Docker utiliza contenedores para encapsular aplicaciones y sus dependencias, proporcionando una forma consistente de ejecutar software en diferentes entornos (desarrollo, pruebas, producción) sin problemas de configuración.
Imágenes: Las imágenes Docker son plantillas de solo lectura que contienen todo lo necesario para ejecutar una aplicación, incluidas bibliotecas, dependencias y configuraciones.
Dockerfile: Un archivo de texto que define cómo se construye una imagen Docker, especificando qué comandos y configuraciones son necesarios para configurar el entorno de ejecución de la aplicación.
171
18-¿Qué es la programación orientada a objetos?
La programación orientada a objetos (POO) es un paradigma de programación que se basa en el concepto de "objetos", que son entidades que combinan estado (datos) y comportamiento (métodos o funciones que operan sobre esos datos).
Objetos: Un objeto es una instancia concreta de una clase. Puede pensar en un objeto como un contenedor que agrupa datos (atributos o propiedades) y métodos (funciones o procedimientos) que operan sobre esos datos.
Clases: Una clase es una plantilla o plano que define el comportamiento (métodos) y las características (atributos) comunes a todos los objetos de ese tipo. Es decir, define qué datos y operaciones estarán disponibles para cada objeto creado a partir de esa clase.
Abstracción: La abstracción se refiere a la capacidad de modelar objetos del mundo real como objetos de software con características esenciales. Se enfoca en los aspectos relevantes y omite los detalles no esenciales.
Encapsulamiento: El encapsulamiento es un principio de la POO que consiste en ocultar los detalles internos de cómo funcionan los objetos y exponer solo las operaciones esenciales que otros objetos necesitan para interactuar con ellos. Esto se logra mediante el uso de modificadores de acceso como público, privado y protegido.
Herencia: La herencia permite que una clase (llamada clase hija o subclase) herede los atributos y métodos de otra clase (llamada clase padre o superclase). Esto promueve la reutilización del código y la organización jerárquica de clases.
Polimorfismo: El polimorfismo permite que objetos de diferentes clases respondan al mismo mensaje o método de manera diferente. Esto se puede lograr mediante la sobrecarga de métodos (métodos con el mismo nombre pero con diferentes parámetros) y la sobrescritura de métodos (métodos con el mismo nombre y firma en clases diferentes).
172
19-Qué son los paradigmas de programación?
Los paradigmas son diferentes estilos de usar la programación para resolver un problema.
1-Paradigma imperativo: Se basa en estructuras como condicionales, bucles, y asignaciones.
2-Paradigma orientado a objetos: Se basa en objetos que contienen datos (atributos) y comportamientos (métodos). Usa conceptos como clases, herencia, polimorfismo y encapsulamiento.
3-Paradigma reactivo: Se centra en flujos de datos y propagación de cambios. Ideal para interfaces que responden a eventos (como Angular o RxJS en JavaScript).
4-Paradigma funcional: Se enfoca en el qué se quiere hacer, no en el cómo. Usa funciones puras, evita cambios de estado y datos mutables.
5-Paradigma declarativo: El programador indica qué quiere lograr, no cómo hacerlo paso a paso. Es común en bases de datos y programación funcional.
6-Paradigma lógico: Se basa en la lógica matemática. Se usa resolviendo problemas con soluciones matemáticas.
173
20-Qué es la programación funcional?
La programación funcional es un paradigma de programación. Se centra en el uso de funciones puras, inmutabilidad y composición de funciones, proporcionando un enfoque más declarativo para resolver problemas. Son 6 reglas en total:
1-Funciones puras: Una función siempre devuelve el mismo resultado para los mismos argumentos. No tiene efectos secundarios (no cambia variables externas, ni modifica archivos, ni accede a la red).
2-Evitar efectos secundarios: No se modifica el estado del programa ni el de sus variables. Se evita alterar cosas fuera de la función (como modificar un array global).
3-Inmutabilidad: No se modifica el valor de variables, objetos o estructuras de datos una vez creados. En vez de cambiar, se crean copias nuevas con los cambios.
4-Funciones de orden superior: Puedes pasar funciones como argumentos a otras funciones o retornar funciones desde otras funciones.
5-Transparencia referencial: Un fragmento de código puede ser reemplazado por su valor sin alterar el comportamiento del programa.
6-Recursión: En lugar de for o while, se usa recursión para repetir procesos.
174
21-Qué es una función pura?
Una función pura es una función que:
Siempre da el mismo resultado si le das los mismos valores.
No cambia nada fuera de ella (no toca variables externas, no imprime en consola, no modifica archivos, etc.) pero sí puede modificar variables dentro de ella.
175
22-Qué son las funciones impuras?
Las funciones impuras son aquellas que pueden tener efectos secundarios observables o depender de estados externos. Significa que son fácilmente modificables y que su valor depende del código externo.
176
23-Qué es una función de orden superior en programación funcional?
Una función de orden superior en programación funcional es una función que cumple al menos uno de los siguientes criterios:
Toma una o más funciones como argumentos: Esto implica que la función puede aceptar otras funciones como parámetros.
Devuelve una función como resultado: La función puede también devolver otra función como su resultado.
177
25-Cual es la diferencia entre una biblioteca y un framework?
En resumen, una biblioteca es un conjunto de funciones que puedes utilizar a tu conveniencia, manteniendo el control del flujo de la aplicación, mientras que un framework es un conjunto de herramientas, librerías y reglas; te proporciona una estructura con su propio flujo de trabajo, dictando cómo debes integrar tu código en su marco predefinido.
178
28-Qué es CSR?
CSR significa "Client-Side Rendering" (Renderizado del Lado del Cliente). Es una técnica en la que la mayor parte del procesamiento y renderizado de la página web ocurre en el navegador del usuario, generalmente usando JavaScript. Esto permite interfaces más dinámicas e interactivas, pero el contenido inicial puede tardar más en aparecer y puede afectar al SEO si no se maneja adecuadamente.
179
Tipos de pruebas en la testabilidad de una aplicación web ?
Pruebas Unitarias: Se centran en funciones o componentes individuales para validar su comportamiento.
Pruebas de Integración: Verifican que los componentes o módulos trabajen juntos correctamente.
Pruebas Funcionales: Evalúan si la aplicación cumple con los requisitos funcionales especificados.
Pruebas de Usabilidad: Evalúan la experiencia del usuario.
Pruebas de Rendimiento: Comprueban cómo la aplicación maneja la carga y el rendimiento.
Pruebas de Seguridad: Verifican la resistencia de la aplicación a posibles ataques.
180
Que es la Refactorización ?
La refactorización es el proceso de reestructurar y mejorar el diseño interno del código fuente de un programa sin cambiar su comportamiento externo. Su objetivo es mejorar la legibilidad, la mantenibilidad y la eficiencia del código sin alterar su funcionalidad observable.
181
Que son las Pruebas E2E (End-to-End) ?
Las pruebas E2E verifican que todo el sistema funcione correctamente desde el inicio hasta el final del flujo de trabajo, simulando acciones que un usuario real podría realizar.
Definición: Simulan escenarios de uso real desde la perspectiva del usuario final, interactuando con todo el sistema, desde la interfaz de usuario hasta la base de datos y servicios externos.
Objetivos:
Validar que todas las funcionalidades funcionen correctamente en conjunto.
Detectar problemas de integración entre diferentes componentes.
Evaluar la usabilidad y experiencia del usuario.
Garantizar la calidad del producto antes de su lanzamiento.
182
Diferencia entre HTTP y HTTPS ?
HTTP (HyperText Transfer Protocol):
Transmisión no segura: los datos se envían en texto plano y pueden ser interceptados.
Puerto predeterminado: 80.
No requiere certificado de seguridad.
HTTPS (HyperText Transfer Protocol Secure):
Transmisión segura: utiliza SSL/TLS para encriptar los datos.
Puerto predeterminado: 443.
Requiere un certificado digital emitido por una autoridad de certificación para verificar la identidad del servidor.
183
Que es un Proyecto Legacy ?
Un proyecto legacy es un software desarrollado en el pasado que sigue en uso, pero cuyo código y tecnologías están obsoletos o no siguen prácticas modernas de desarrollo.
184
Que es Open Source ?
"Open-source" (código abierto) se refiere a software cuyo código fuente está disponible públicamente y puede ser utilizado, modificado y distribuido por cualquier persona.
185
Hardware vs Software ?
Hardware: Parte física de la computadora. Ej.: CPU, RAM, discos, monitores. Ejecuta lo que el software indica.
Software: Parte intangible que da instrucciones al hardware. Ej.: Windows, apps, juegos.
186
Como se ve una promesa en JavaScript ?
// Crear una promesa
const miPromesa = new Promise((resolve, reject) => {
const exito = true; // simula si la operación fue exitosa o no
if (exito) {
resolve("¡La promesa se cumplió!");
} else {
reject("Hubo un error en la promesa");
}
});
// Usar la promesa
miPromesa
.then((mensaje) => {
console.log(mensaje); // se ejecuta si la promesa se cumple
})
.catch((error) => {
console.error(error); // se ejecuta si la promesa falla
});
187
Como se ve ASYNC AWAIT ?
async function ejecutarPromesa() {
try {
const resultado = await miPromesa;
console.log(resultado);
} catch (error) {
console.error(error);
}
}
ejecutarPromesa();
188
Como logro una transparencia en mis contenedores tipo Apple ?
.card {
background: rgba(255, 255, 255, 0.2); /* fondo semitransparente */
backdrop-filter: blur(15px); /* desenfoque del fondo */
-webkit-backdrop-filter: blur(15px); /* soporte para Safari */
border: 1px solid rgba(255, 255, 255, 0.3); /* borde sutil */
border-radius: 16px;
padding: 2rem;
color: white;
}
.card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.3), transparent);
border-radius: 16px;
pointer-events: none;
}
189
Que es CORS ?
CORS significa Cross-Origin Resource Sharing
(Compartición de Recursos entre Orígenes).
Es un mecanismo de seguridad del navegador que decide si una página puede pedir datos a un servidor que está en otro dominio.
¿Por qué existe?
Porque sin CORS, cualquier página maliciosa podría hacer peticiones a otros servidores usando tu sesión, cookies, tokens, etc.
Entonces el navegador pregunta:
“¿El servidor realmente permite que este frontend le pida datos?”
Si el servidor no lo permite → Error CORS.
190
Que es destructuring ?
El destructuring es una forma rápida y elegante de extraer valores de arreglos u objetos y guardarlos en variables.
const numeros = [10, 20, 30];
const [a, b, c] = numeros;
const persona = {
nombre: "Adam",
edad: 22,
};
const { nombre, edad } = persona;
191
Que es intersection en TypeScript ?
En TypeScript, una intersección (intersection) es cuando combinas dos o más tipos en uno solo, y el resultado debe cumplir con todos los tipos al mismo tiempo.
type A = { nombre: string };
type B = { edad: number };
type Persona = A & B;
192
Que son los Enums en Typescript ?
Los Enums en TypeScript son una forma de crear conjuntos de valores nombrados, como etiquetas que representan opciones fijas.
Piensa en un enum como:
👉 “una lista de opciones con nombre, que nunca cambian”.
enum Rol {
Admin = 1,
User = 2,
Guest = 3,
}
enum Color {
Rojo = "ROJO",
Verde = "VERDE",
Azul = "AZUL",
}
193
¿Cuál es la diferencia entre display: block, inline e inline-block?
Un elemento block:
Ocupa todo el ancho disponible (aunque su contenido sea pequeño)
Siempre empieza en una nueva línea
Puedes cambiar width, height, margin, padding sin problema
Ejemplos de elementos block por defecto: div, p, h1, section
display: inline
Un elemento inline:
Solo ocupa el ancho de su contenido
No empieza en nueva línea
NO puedes cambiar width o height
Sí puedes poner padding y margin, pero a veces solo se aplica horizontalmente
Ejemplos inline por defecto: span, a, strong
display: inline-block
Es una mezcla de ambos:
Se comporta como inline (no rompe línea)
Pero te permite usar width, height, margin, padding como si fuera block
Se alinea en la misma línea que otros inline-block
Ejemplo útil: botones, tarjetas pequeñas, inputs, etc.
block → “ocupa toda la línea y puedo darle tamaño”.
inline → “se coloca en línea y NO puedo darle tamaño”.
inline-block → “se coloca en línea pero sí puedo darle tamaño”.
194
¿Qué es grid layout?
CSS Grid Layout (o simplemente Grid) es un sistema de diseño en CSS que te permite organizar elementos en filas y columnas, como si estuvieras trabajando con una tabla flexible, moderna y súper poderosa.
Piensa en Grid como:
👉 “una cuadrícula donde puedes colocar tus elementos exactamente donde quieres.”
195
¿Qué significa “complejidad temporal” (Big O)?
La complejidad temporal, usualmente expresada con Notación Big O, es una forma de medir qué tanto tarda un algoritmo en ejecutarse conforme crece el tamaño de los datos.
Piensa en Big O como:
👉 “qué tan rápido empeora tu código cuando le das más datos”.
No mide segundos reales, sino escala.
Porque un programa que funciona bien con 10 datos puede ser lentísimo con 1 millón.
Big O sirve para comparar algoritmos sin importar la computadora.
196
¿Qué es un endpoint?
Es una URL de un servidor donde puedes hacer una petición para obtener o enviar datos.
197
¿Qué es autenticación vs autorización?
Autenticación: verificar quién eres.
Autorización: verificar qué permisos tienes.
198
¿Qué son las pruebas unitarias?
Son pruebas que validan que una función o componente pequeño funciona correctamente de forma aislada.
199
¿Qué diferencia hay entre SQL y NoSQL?
SQL: bases de datos relacionales con tablas y relaciones.
NoSQL: bases de datos no relacionales, más flexibles para datos grandes o no estructurados.
200
¿Qué es un runtime?
Es el entorno donde se ejecuta un programa (ej. Node.js para JavaScript).
Programacion
flashcards
Decks in class (2)
# Cards
