Ejemplo de tarjetas de JavaScript de nuestra aplicación

Descarga nuestra aplicación desde la App Store o Google Play para obtener más tarjetas didácticas gratuitas o suscríbete para acceder a todas las tarjetas didácticas.

¿Qué es el ámbito léxico en JavaScript?

El alcance léxico en JavaScript es un principio donde el rango de visibilidad de una variable está determinado por su ubicación en el código. Esto significa que las variables son accesibles dentro del bloque en el que fueron definidas, así como en cualquier bloque anidado. Esto permite la creación de cierres y el control sobre el acceso a las variables. Ejemplo de uso del alcance léxico en el código de JavaScript:

function outerFunction() {
  let outerVariable = `¡Estoy fuera!`;

  function innerFunction() {
    console.log(outerVariable); // Tiene acceso a 'outerVariable'
  }

  innerFunction();
}
outerFunction(); // Muestra `¡Estoy fuera!`

El alcance léxico permite que una función interna acceda a las variables definidas en una función externa, incluso después de que la función externa ha terminado. Este es un elemento clave en la creación de cierres en JavaScript, permitiendo una gestión de estado más flexible en las aplicaciones.

¿Qué es el hoisting?

El izado es un mecanismo en los idiomas de JavaScript donde las variables y las funciones se trasladan al principio de su alcance antes de que se ejecute el código. En la práctica, esto significa que podemos usar funciones o variables antes de que se declaren realmente.

Sin embargo, debe tenerse en cuenta que el izamiento funciona de manera ligeramente diferente para las variables y las funciones.

Para las variables declaradas con las claves var , solo se iza la declaración, no la inicialización. Las variables inicializadas antes de la declaración se devolverán como undefined.

Un ejemplo de código de izamiento para variables:

console.log(myVar); // undefined
var myVar = 5;
console.log(myVar); // 5

Para las funciones, el izado mueve tanto la declaración como la definición de la función a la parte superior, lo que permite el uso de la función antes de que se declare.

Un ejemplo de código de izamiento para funciones:

console.log(myFunction()); // "Hello World"

function myFunction() {
  return "Hello World";
}

El izamiento no ocurre para las variables declaradas con let y const.

¿Qué es una función flecha y cuáles son sus ventajas?

Una función de flecha, también conocida como función de flecha, es un tipo de función introducida en ECMAScript 6 (ES6). Se llaman funciones de flecha porque utilizan una sintaxis especial con una flecha ( => ) para definir la función.

Para comparación, una función tradicional podría verse así:

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

Su equivalente como una función de flecha es:

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

La principal ventaja de una función de flecha es que no crea su propio contexto de ejecución (enlace a this), que a menudo es una fuente de errores en JavaScript. En las funciones de flecha, this se hereda del contexto circundante. Otra ventaja es la concisión de la sintaxis, especialmente útil cuando las funciones se utilizan como argumentos para otras funciones, p. Ej. en funciones de orden superior.

Por otro lado, debido a la falta de su propio this, las funciones de flecha no son adecuadas para definir objetos de constructor (creativos) o para crear métodos en objetos prototipo.

¿Qué es un objeto Promise y cómo puede utilizarse?

El objeto Promise en JavaScript se utiliza para manejar operaciones asíncronas. Una Promise representa un valor que puede no estar disponible en el momento en que se crea la Promise, pero puede estar disponible en el futuro, o nunca.

Un objeto Promise puede estar en uno de los tres estados:
1. Pendiente - la operación aún está en curso, no ha terminado ni con éxito ni con errores.
2. Cumplida - la operación se completó con éxito, Promise devolvió un valor.
3. Rechazada - la operación se completó con un error, Promise devolvió la razón del error.

Una Promise que ha sido cumplida o rechazada se considera "resuelta" y su estado nunca cambia.

Creando un objeto Promise:

const promise = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve('Operación exitosa.');
  } else {
    reject('Operación fallida.');
  }
});

Usando un objeto Promise:

promise
  .then(result => {
    console.log(result); // Imprimirá: 'Operación exitosa.'
  })
  .catch(error => {
    console.log(error);
  });

El método .then() se ejecuta cuando la Promise se cumple, y .catch() cuando se rechaza. En ambos casos, el resultado de la operación o la razón del rechazo de la Promise se pasa como argumento.

¿Qué es un callback?

Un callback, también conocido como función de callback, es una función que se pasa como argumento a otra función y luego se ejecuta (se llama de nuevo) después de la finalización de esa función. Las funciones de callback se utilizan comúnmente en JavaScript, especialmente en operaciones asíncronas como solicitudes AJAX o manejo de eventos.

Las funciones de callback suelen recibir los resultados de una operación determinada como argumentos, por lo que pueden ser utilizadas para procesar o analizar dichos resultados.

El uso de dicha función en la práctica puede verse así:

function executeAfterTimeout(callback, timeout) {
  setTimeout(() => {
    console.log('¡Tiempo pasado!');
    callback();
  }, timeout);
}

executeAfterTimeout(() => {
  console.log('¡Esto es un callback!');
}, 2000);

En este caso, la función `executeAfterTimeout` recibe una función de `callback` como parámetro, que se ejecutará después de haber pasado una cantidad específica de tiempo. Las funciones de callback son extremadamente útiles para gestionar el flujo de control asíncrono en JavaScript.

¿Qué es el operador de fusión nula y cómo funciona?

El Operador de Coalescencia Nula (??) es un operador lógico que devuelve el lado derecho de la operación cuando el lado izquierdo es nulo o indefinido. En otras palabras, cuando una variable está vacía, el operador de coalescencia nula devuelve el valor definido como resultado.

La notación básica es:

let value = null ?? 'valor predeterminado';

En este caso, como el lado izquierdo (valor) es nulo, el resultado es 'valor predeterminado'. Además, este operador difiere del operador OR (||), ya que la función OR devuelve el lado derecho cuando el lado izquierdo es falso (falso, 0, '', nulo, indefinido, NaN), mientras que el operador de coalescencia nula solo devuelve el lado derecho cuando el lado izquierdo es nulo o indefinido.

Ejemplo con OR:

let value1 = 0 || 'predeterminado';
console.log(value1); // salida: 'predeterminado' porque 0 es un valor falso

Ejemplo con coalescencia nula:

let value2 = 0 ?? 'predeterminado';
console.log(value2); // salida: 0 porque 0 no es nulo o indefinido

Por lo tanto, a diferencia de OR, el operador de coalescencia nula no trata a 0, '' y NaN como valores "vacíos".

¿Qué es Symbol y cuándo debe usarse?

Un Símbolo en JavaScript es un tipo de datos único e inmutable que a menudo se utiliza para identificar propiedades únicas de los objetos.

Puedes crear un Símbolo llamando al constructor Symbol(), que crea un símbolo único cada vez que se llama. Incluso si llamamos al constructor Symbol() con el mismo argumento, cada símbolo creado será diferente.

const symbol1 = Symbol('mySymbol');
const symbol2 = Symbol('mySymbol');
console.log(symbol1 === symbol2); // devuelve false

El Símbolo se utiliza a menudo para definir propiedades (únicas) de los objetos, especialmente cuando queremos que esta propiedad esté oculta o sea privada. También incluye propiedades que no se consideran al iterar sobre objetos usando for...in o for...of y no son devueltas por el método Object.keys(). Además, los símbolos permiten crear propiedades "pseudo" privadas.

let obj = {};
let privateProperty = Symbol('private');

obj[privateProperty] = 'Esto es privado';

console.log(obj[privateProperty]); // 'Esto es privado'
console.log(Object.keys(obj)); // []

No hay una regla definitiva sobre cuándo usar el Símbolo. Normalmente se utilizan cuando queremos crear una propiedad única en un objeto que no puede ser vista o cambiada fácilmente, o queremos definir métodos que afectan el comportamiento de los objetos a un nivel bajo.

¿Qué son WeakMap y WeakSet?

WeakMap y WeakSet son versiones especiales de los objetos Map y Set de JavaScript que no evitan la liberación automática de memoria por el Recolector de Basura.

WeakMap es una colección de pares clave-valor donde las claves deben ser objetos y los valores pueden ser cualquier cosa. La principal diferencia entre Map y WeakMap es que las claves en WeakMap se mantienen de forma "débil", lo que significa que si no hay otras referencias al objeto clave, será recogido por el recolector de basura, y su entrada en WeakMap será eliminada automáticamente.

Aquí hay un ejemplo de cómo usar WeakMap:

let john = { name: "John" };

let weakMap = new WeakMap();
weakMap.set(john, "...");

john = null; // sobreescribir la referencia

// ¡john se elimina de la memoria!

WeakSet es similar a lo que WeakMap es para Map. Es un conjunto de objetos, pero no impide la recolección de basura si el objeto no es visible en ninguna otra parte. Carece de métodos típicos de Set como `size` y `clear`, y el método `add` solo acepta objetos.

Ejemplo de uso de WeakSet:

let john = { name: "John" };

let weakSet = new WeakSet();
weakSet.add(john);

john = null; // sobreescribir la referencia

// ¡john se elimina de la memoria!

Ambos, WeakMap y WeakSet, se utilizan principalmente en situaciones en las que queremos almacenar información adicional sobre objetos que deben eliminarse cuando el propio objeto se elimina.

Tarjetas de JavaScript