Encontré un problema cuando realicé una solicitud GET en mi proyecto de React que se suponía que devolvería un archivo que podía descargar. Para que el archivo se descargara correctamente, tuve que hacer que la respuesta fuera un blob.

Pero si ocurriera un error cuando el servidor devuelve un objeto JSON, no podría obtener ese objeto porque ya había definido el tipo de respuesta como un blob. Y si elimino la definición de blob, el archivo simplemente regresará como JSON normal y es posible que no se descargue correctamente.

Entonces, ¿cómo consigo que el blob lo descargue y recupere el objeto de error en caso de que algo no haya salido bien desde el servidor? Afortunadamente, hay una manera de lograrlo.

Esta guía te mostrará cómo conservar un objeto JSON para fines de manejo de errores y, al mismo tiempo, podrás descargar un archivo desde un servidor. Usaremos Axios, una biblioteca de JavaScript utilizada para realizar solicitudes HTTP, para realizar nuestra llamada API.

Paso 1: Definir el tipo de respuesta en la llamada API

Primero, define una función que realice la solicitud HTTP al servidor. En este caso, esperamos un archivo, por lo que el verbo HTTP convencional sería GET.

El tipo de respuesta para las solicitudes de Axios es JSON de forma predeterminada, pero queremos cambiarlo a un blob como este:

import axios from "axios";

const obtenerArchivoDelServidor = () => {
    const respuesta = await axios.get('https://api.some-server.com', {responseType: 'blob'})?.data;
    return respuesta;
}

Paso 2: Convertir el Blob a Texto

En el paso anterior, pudimos obtener nuestro archivo como un blob fácilmente. Pero cuando se trata de mostrar el error, necesitamos que se muestre como JSON.

Primero, necesitamos envolver la solicitud en una declaración try/catch para especificar qué debería suceder si se genera un error mientras se realiza la solicitud.

import axios from "axios";

const obtenerArchivoDelServidor = async () => {
    try {
        const respuesta = await axios.get('https://api.some-server.com', {responseType: 'blob'}).data;
    return respuesta;
    }
    catch (error) {
        let errorRespuesta = await error.response.data.text();
        const errorObjeto = JSON.parse(response);
        console.log(errorObjeto) // mostramos el error por consola
    }
}

La conversión de tipo se realizó dentro del bloque catch. Primero, convertimos los datos de respuesta a una cadena JSON usando el método text() de la API Fetch de JavaScript.

Finalmente, utilizamos el método JSON.parse() para convertir esa cadena a JSON real. De esa manera, podemos acceder al objeto en el formato previsto y al mismo tiempo recuperar el archivo del servidor si no hay ningún error.

Mostrando el objeto de error en la consola dará como resultado algo como esto:

{
  "statusCode": 400,
  "message": "Algún error ocurrió"
}

Conclusión

Este es uno de los problemas que enfrenté en la vida real, así que pensé en compartirlo en caso de que alguien más lo encuentre.

Déjame saber tu opinión sobre el artículo y no dudes en hacer cualquier sugerencia que creas que podría mejorar mi solución.

¡Gracias por leer!

En este artículo, profundizaremos en el operador ternario, comprenderemos su sintaxis y mostraremos ejemplos del mundo real para ayudarlo a comprender cómo funciona para aprovechar todo su potencial.

¿Qué es el operador ternario?

Un operador ternario es un operador condicional en JavaScript que evalúa una expresión condicional y devuelve un valor verdadero o falso.

Para entender cómo funciona esto, echemos un vistazo más de cerca a su sintaxis a continuación:

expresionCondicional ? valorVerdadero : valorFalso

Según la sintaxis anterior, expresionCondicional es la expresión que sirve como punto de evaluación, determinando un valor verdadero o falso.

Siguiendo el ? (signo de interrogación), el valor proporcionado se devuelve en caso de que la expresión se evalúe como verdadera, mientras que el valor que sigue a : (dos puntos) se devuelve si la expresión da como resultado un resultado falso.

valorVerdadero y valorFalso pueden ser cualquier cosa en JavaScript. Puede abarcar varias entidades como funciones, valores almacenados en variables, objetos, números, cadenas y más. El operador ternario le otorga la flexibilidad de devolver cualquier valor deseado, ofreciendo versatilidad en su código.

¿Cómo usar el operador ternario?

Ahora que hemos examinado la sintaxis y su funcionalidad, exploremos cómo utilizar el operador ternario para profundizar nuestra comprensión.

Considera este escenario: estamos creando una plataforma de juegos que solo permite usuarios mayores de 18 años. Diseñaremos una función para comprobar la edad de un usuario. Si son menores de 18 años, se les negará el acceso; de lo contrario, podrán acceder a la plataforma.

function puedeAccederPlataforma(edad) {
  const deberiaAcceder = edad >= 18 ? true : false;

  return deberiaAcceder;
}

A partir del fragmento de código anterior, creamos una función, puedeAccederPlataforma, que evalúa si un usuario, representado por su parámetro de edad, cumple con los requisitos para acceder a la plataforma.

Utiliza un operador ternario para determinar si la edad es 18 años o más, asignando true (verdadero) a la variable deberiaAcceder si se cumple la condición y false (falso) en caso contrario. Finalmente devuelve el valor deberiaAcceder, indicando si el usuario puede acceder a la plataforma o no.

Si la edad es de 18 años o más, la expresión se vuelve verdadera, por lo que el operador devuelve verdadero después de ?. De lo contrario, devuelve falso. Este resultado se guarda en una variable y luego se devuelve desde la función.

Si bien este caso de uso básico simplifica el código y mejora la legibilidad al reemplazar bloques if-else innecesarios, es importante usarlo con moderación para evitar saturar y complicar el código. Más adelante, analizaremos las mejores prácticas para utilizar el operador ternario.

Aquí hay otro ejemplo que ilustra el uso del operador ternario. Crearemos una función para determinar si un número es par o impar. Consulte el fragmento de código a continuación:

function verificaParOImpar(numero) {
  const resultado = numero % 2 === 0 ? "par" : "impar";
  return resultado;
}

// Uso:
console.log(verificaParOImpar(4)); // Salida: "par"
console.log(verificaParOImpar(7)); // Salida: "impar"

Del fragmento de código anterior:

• Definimos una función verificaParOImpar que toma un parámetro numérico.
• Dentro de la función usamos el operador ternario para comprobar si el número es par o impar.
• Si el número módulo 2 es igual a 0 (lo que significa que es divisible por 2 sin resto), entonces la condición se evalúa como verdadera y la cadena "par" se asigna a la variable de resultado.
• Si la condición se evalúa como falsa (lo que significa que el número es impar), se asigna la cadena "impar" al resultado.
• Finalmente, la función devuelve el valor del resultado, que indica si el número es par o impar.

Este código muestra cómo el operador ternario verifica rápidamente si un número es par o impar, lo que hace que el código sea más fácil de leer y comprender.

¿Cómo refactorizar sentencias if-else con el operador ternario?

Una ventaja del operador ternario es evitar bloques if-else innecesarios que pueden complicar la legibilidad y el mantenimiento del código. En esta sección, refactorizaremos algunas declaraciones if-else en operaciones ternarias, brindando una comprensión más clara de cómo usar operadores ternarios de manera efectiva.

Comencemos con nuestro primer ejemplo:

function decidirActividad(clima) {
  let actividad;

  if (clima === "soleado") {
    actividad = "salir";
  } else {
    actividad = "quedarse en casa";
  }

  console.log(actividad);
}

// Uso
console.log(decidirActividad("lloviendo")); // Salida: "quedarse en casa"
console.log(decidirActividad("nevando")); // Salida: "quedarse en casa"
console.log(decidirActividad("soleado")); // Salida: "salir"

Esta función, decidirActividad toma un parámetro clima y determina la actividad adecuada en función de las condiciones meteorológicas.

Si el tiempo es "soleado", sugiere "salir". En caso contrario, aconseja "quedarse en casa". Cuando llamamos a la función con diferentes condiciones climáticas como "lloviendo" o "nevando", genera la recomendación de actividad correspondiente usando console.log().

Por ejemplo, llamar a decidirActividad("lloviendo") generará "quedarse en casa". De manera similar, decidirActividad("nevando") también genera "quedarse en casa". Cuando se llama a decidirActividad("soleado"), el resultado es "salir". Esta sencilla función ayuda a decidir actividades en función de las condiciones climáticas proporcionadas.

Ahora podemos refactorizar estos bloques de código para que parezcan más simples y ordenados. Veamos cómo hacerlo a continuación:

function decidirActividad(clima){
   const actividad = clima === "soleado" ? "salir" ? "quedarse en casa";
   
   console.log(actividad)

}

// Uso
console.log(decidirActividad("lloviendo")); // Salida: "quedarse en casa"
console.log(decidirActividad("nevando")); // Salida: "qeudarse en casa"
console.log(decidirActividad("soleado")); // Salida: "salir"

Según el ejemplo de código anterior, esta función, decidirActividad, utiliza el operador ternario para determinar rápidamente la actividad según las condiciones climáticas. Comprueba si el tiempo es "soleado" y asigna "salir" si es cierto, en caso contrario "quedarse en casa".

Hemos simplificado las declaraciones if-else en un operador ternario de una sola línea. Esto hace que nuestro código sea más limpio, claro y fácil de leer.

Echemos un vistazo a otro ejemplo:

function verificarNumero(numero) {
  let resultado;
  if (numero > 0) {
    resultado = "positivo";
  } else {
    resultado = "no-positivo";
  }
  return resultado;
}

// Uso
console.log(verificarNumero(5)); // Salida: "positivo"
console.log(verificarNumero(-2)); // Salida: "no-positivo"

Expliquemos qué está haciendo el código anterior:

• Definición de función: comenzamos definiendo una función llamada verificarNumero que toma un único parámetro llamado numero.
• Declaración de variable: Dentro de la función, declaramos una variable llamada resultado sin asignarle ningún valor todavía. Esta variable almacenará el resultado de nuestra verificación.
• Declaración condicional (if-else): Tenemos una declaración condicional que verifica si el parámetro numero es mayor que 0.
• Si la condición es verdadera (lo que significa que el número es positivo), asignamos la cadena "positivo" a la variable de resultado.
• Si la condición es falsa (lo que significa que el número no es positivo sino que es negativo o cero), asignamos la cadena "no-positivo" a la variable de resultado.
• Declaración de devolución: finalmente, devolvemos el valor almacenado en la variable de resultado.
• Llamadas a funciones: luego llamamos a la función verificarNumero dos veces con diferentes argumentos: 5 y -2.

Cuando llamamos a verificarNumero(5), la función devuelve "positivo", que luego se registra en la consola.

De manera similar, cuando llamamos a verificarNumero(-2), la función devuelve "no-positivo", que nuevamente se registra en la consola.

Esta función determina de manera eficiente si un número es positivo o no positivo y proporciona el resultado apropiado según la condición.

Simplifiquemos y mejoremos el código reescribiéndolo usando un operador ternario.

function verificarNumero(numero) {
  const resultado = numero > 0 ? "positivo" : "no-positivo";
  return resultado;
}

// Uso
console.log(verificarNumero(5)); // Salida: "positivo"
console.log(verificarNumero(-2)); // Salida: "no-positivo"

¡Gran trabajo! Al refactorizar la función y utilizar el operador ternario para la evaluación condicional, logramos un código más limpio, conciso y legible.

Este código, que utiliza el operador ternario, parece más conciso y elegante. Determina de manera eficiente si un número es positivo o no positivo, lo que hace que el código sea más limpio y fácil de entender. Cuando llamamos a checkNumber(5), devuelve "positivo", mientras que checkNumber(-2) devuelve "no- positivo". En general, el operador ternario mejora la legibilidad del código.

¿Cómo anidar operadores ternarios?

Cuando se trata de controles condicionales, a veces una sola condición no es suficiente. En tales casos, utilizamos declaraciones else-if junto con if/else para incorporar múltiples condiciones.

Echemos un vistazo a la sintaxis:

function funcionEjemplo() {
  return expresionCondicional1
    ? valor1
    : expresionCondicional2
    ? valor2
    : expresionCondicional3
    ? valor3
    : valor4;
}

Esto se puede traducir en una cadena if/else:

function funcionEjemplo() {
  if (expresionCondicional1) {
    return valor1;
  } else if (expresionCondicional2) {
    return valor2;
  } else if (expresionCondicional3) {
    return valor3;
  } else {
    return valor4;
  }
}

Exploremos un ejemplo a continuación:

function verificarNumero(numero) {
  let mensaje;

  if (numero > 0) {
    mensaje = "Positivo";
  } else if (numero === 0) {
    mensaje = "Cero";
  } else {
    mensaje = "Negativo";
  }

  return mensaje;
}

// Uso
console.log(verificarNumero(5)); // Salida: "Positivo"
console.log(verificarNumero(0)); // Salida: "Cero"
console.log(verificarNumero(-3)); // Salida: "Negativo"

Este código anterior define una función llamada verificarNumero que toma un parámetro numero y determina su estado (positivo, cero o negativo). Utiliza un bloque if-else con una declaración else-if para evaluar el valor del número. Si el número es mayor que 0 se considera positivo y si es igual a 0 es cero. De lo contrario, es negativo. La función devuelve el resultado.

Refactoricemos este código usando un operador ternario para lograr la misma funcionalidad.

function verificarNumero(numero) {
  return numero > 0 ? "Positivo" : numero === 0 ? "Cero" : "Negativo";
}

// Uso
console.log(verificarNumero(5)); // Salida: "Positivo"
console.log(verificarNumero(0)); // Salida: "Cero"
console.log(verificarNumero(-3)); // Salida: "Negativo"

¡Eso es todo! Hemos refactorizado la función y, tras un examen más detenido, podemos observar que los operadores están encadenados. Ahora, exploremos cómo funciona el operador ternario encadenado en la función verificarNumero.

En el primer operador ternario:

• La primera condición numero > 0 comprueba si el número es mayor que 0.
• Si es verdadero, la expresión devuelve "Positivo".

En el segundo operador ternario (encadenado):

• Si la primera condición es falsa (lo que significa que el número no es mayor que 0), pasa a la siguiente parte de la expresión: número === 0.
• Esta parte comprueba si el número es igual a 0.
• Si es verdadera, la expresión devuelve "Cero".

Y el valor predeterminado:

• Si ninguna de las condiciones anteriores es verdadera (lo que significa que el número no es mayor que 0 ni igual a 0), el valor predeterminado es la última parte de la expresión: "Negativo".
• Esta parte actúa como valor predeterminado si no se cumple ninguna de las condiciones anteriores.

En resumen, el operador ternario encadenado evalúa múltiples condiciones en una sola línea de código. Comprueba cada condición secuencialmente y la primera condición que se evalúa como verdadera determina el resultado de toda la expresión. Esto permite una lógica condicional concisa y eficiente.

Examinemos otro ejemplo de operador ternario encadenado.

function obtenerBebida(edad) {
  return edad >= 21
    ? "Disfrute su coctel"
    : edad >= 18
    ? "Toma una cerveza"
    : edad >= 16
    ? "Toma un refresco"
    : "Disculpa, tu no puedes beber";
}

// Uso
console.log(obtenerBebida(25)); // Salida: "Disfrute su coctel"
console.log(obtenerBebida(19)); // Salida: "Toma una cerveza"
console.log(obtenerBebida(16)); // Salida: "Toma un refresco"
console.log(obtenerBebida(10)); // Salida: "Disculpa, tu no puedes beber"

En el ejemplo de código proporcionado, los operadores ternarios están encadenados para proporcionar diferentes sugerencias de bebidas según la edad proporcionada. Cada expresión condicional de la cadena evalúa un rango de edad específico.

Si la primera condición es verdadera (verdadera), devuelve 'Disfrute su coctel'. Si es falso (falso), pasa a la siguiente expresión condicional, y así sucesivamente. Este proceso de encadenamiento continúa hasta que una condición se evalúa como verdadera. Si ninguna de las condiciones de la cadena es verdadera, el último valor se devuelve como alternativa, similar al bloque "else" en una declaración if/else.

El concepto de "encadenar" operadores ternarios implica vincular expresiones condicionales en función del valor de la expresión anterior. Esto se puede comparar con la estructura else-if en una declaración if/else, lo que proporciona una forma concisa de manejar múltiples condiciones en JavaScript.

Buenas prácticas cuando usamos el operador ternario

El uso eficiente del operador ternario puede mejorar significativamente la legibilidad y la concisión del código. En esta sección, exploraremos las mejores prácticas clave para utilizar el operador ternario de manera efectiva.

1. Manténlo simple y legible: escribe expresiones concisas que sean fáciles de entender de un vistazo. Evita anidar demasiados operadores ternarios o escribir condiciones demasiado complejas.
2. Úsalo para asignaciones simples: los operadores ternarios son ideales para asignaciones simples donde solo hay dos resultados posibles según una condición. Para escenarios más complejos, considera usar declaraciones if/else.
3. Sepa cuándo usarlo: usa el operador ternario cuando necesitas realizar una verificación condicional simple y asignar un valor según el resultado. Es particularmente útil para asignar valores predeterminados o determinar el valor de una variable en función de una condición.
4. Pruebe minuciosamente: prueba tu código minuciosamente para asegurarse de que el operador ternario se comporte como se espera en diferentes condiciones. Verifica casos extremos y valida la exactitud de los valores asignados.
5. Evite los ternarios anidados: si bien es posible encadenar ternarios, el anidamiento excesivo puede generar código difícil de leer. Elige claridad y considera usar if/else para condiciones complejas.
6. Mantén los ternarios breves: intenta mantener las expresiones ternarias breves y concisas. Los ternarios largos pueden ser difíciles de leer y comprender, lo que genera desafíos de mantenimiento del código.

Estas mejores prácticas describen pautas para utilizar eficazmente el operador ternario. Si bien no son reglas estrictas, ofrecen información valiosa para mejorar la claridad y legibilidad de su código.

Conclusión

Al concluir este artículo, obtendrás una comprensión integral del operador ternario: su aplicación en tareas diarias de codificación, conversión de declaraciones if/else, operadores de encadenamiento y mejores prácticas. Estoy seguro de que has adquirido conocimientos valiosos que mejorarán tus prácticas de codificación utilizando el operador ternario.

¡Gracias por leer y hasta la próxima!

Contacto de información

¿Quieres ponerte en contacto conmigo? No dudes en comunicarte a través de cualquiera de los siguientes canales:

• Twitter / X: @developeraspire
• Email: developeraspire5@gmail.com

TypeScript es un superconjunto de JavaScript que introduce el tipado estático en JavaScript. La seguridad de tipos mejorada y la capacidad de mantenimiento del código de TypeScript permiten a los desarrolladores escribir código con más confianza.

Un aspecto fundamental del sistema de escritura estática de TypeScript es su soporte para tipos básicos. Estos proporcionan una base para definir la forma y el comportamiento de los datos dentro de las aplicaciones TypeScript.

En esta guía completa, exploraremos los tipos básicos de TypeScript comparándolos con sus homólogos de JavaScript. También aclararé las diferencias y ventajas que ofrecen las funciones de escritura estática de TypeScript.

Puede obtener todo el código JavaScript y TypeScript desde aquí.

Entendiendo el tipado

El tipado en TypeScript implica especificar explícitamente el tipo de datos de las variables, los parámetros de función y los valores de retorno. Esta anotación mejora la claridad del código y permite que la verificación de tipos estáticos de TypeScript detecte errores durante la compilación. Esto mejora la calidad y el mantenimiento del código.

En TypeScript, las anotaciones de tipo se escriben utilizando dos puntos (:) seguidos del tipo deseado. Exploremos cómo se aplican las anotaciones de tipo en los tipos básicos de TypeScript:

Tipos Básicos: JavaScript vs TypeScript

Boolean

Así es como escribirías un valor booleano en JavaScript:

let estaHecho = false;
console.log("estaHecho:", estaHecho); // Salida: estaHecho = false
if (!estaHecho) {
    console.log("La tarea no ha finalizado");
}

En JavaScript, una variable booleana estaHecho se declara e inicializa con el valor false. La condición !estaHecho comprueba si estaHecho es false y, si es verdadero, registra un mensaje que indica que la tarea aún no ha finalizado.

Y así es como declararías un booleano en TypeScript:

let estaHecho: boolean = false;
console.log("estaHecho :", estaHecho ); // Salida: estaHecho = false
if (!estaHecho ) {
    console.log("La tarea no ha finalizado");
}

En TypeScript, la misma variable booleana estaHecho se declara con una anotación de tipo explícita: boolean que indica que solo puede contener valores booleanos. El comportamiento y el resultado siguen siendo los mismos que los de JavaScript.

Números

Así es como se declara un número en JavaScript:

let contador = 42;
let precioTotal = 24.99;
let cantidad = 10;
console.log("contador:", contador); // Salida: contador: 42
console.log("precioTotal:", precioTotal); // Salida: precioTotal: 24.99
console.log("cantidad:", cantidad); // Salida: cantidad: 10

En JavaScript, las variables numéricas contador, precioTotal y cantidad se declaran e inicializan con valores numéricos. Cada valor representa un tipo numérico diferente (entero, punto flotante, entero respectivamente).

Y en TypeScript:

let contador: number = 42;
let precioTotal: number = 24.99;
let quantity: number = 10;
console.log("contador:", contador); // Salida: contador: 42
console.log("precioTotal:", precioTotal); // Salida: precioTotal: 24.99
console.log("cantidad:", cantidad); // Salida: cantidad: 10

En TypeScript, el tipado: number se agregan a cada declaración de variable, especificando explícitamente que solo pueden contener valores numéricos. Esto proporciona claridad y seguridad de escritura similar a JavaScript.

Cadenas

Así es como se escribe una cadena en JavaScript:

let mensaje = "Hola, JavaScript!";
let primerNombre = "John";
let apellido = "Doe";
console.log("mensaje:", mensaje); // Salida: mensaje: Hola, JavaScript!
console.log("primerNombre:", primerNombre); // Salida: primerNombre: John
console.log("apellido:", apellido); // Salida: apellido: Doe

En JavaScript, las variables de cadena mensaje, PrimerNombre y apellido se declaran e inicializan con valores de cadena.

Y así es como se hace en TypeScript:

let mensaje: string = "Hola, TypeScript!";
let primerNombre: string = "John";
let apellido: string = "Doe";
console.log("mensaje:", mensaje); // Salida: mensaje: Hola, TypeScript!
console.log("primerNombre:", primerNombre); // Salida: primerNombre: John
console.log("apellido:", apellido); // Salida: apellido: Doe

En TypeScript, el tipado: string se agregan a cada declaración de variable, especificando explícitamente que solo pueden contener valores de cadena. Esto mejora la legibilidad y el mantenimiento del código.

Arreglos

Así es como puedes declarar un arreglo en JavaScript:

let numeros = [1, 2, 3, 4, 5];
let frutas = ["manzana", "banana", "naranja"];
console.log("numeros:", numeros); // Salida: numeros: [1, 2, 3, 4, 5]
console.log("frutas:", frutas); // Salida: frutas: ["manzana", "banana", "naranja"]

En JavaScript, los arreglos de numeros y frutas se declaran e inicializan con valores numéricos y de cadena respectivamente.

Así es como se hace en TypeScript:

let numeros: number[] = [1, 2, 3, 4, 5];
let frutas: string[] = ["manzana", "banana", "naranja"];
console.log("numeros:", numeros); // Salida: numeros: [1, 2, 3, 4, 5]
console.log("frutas:", frutas); // Salida: frutas: ["manzana", "banana", "naranja"]

En TypeScript, se agregan tipados para declarar arreglos con tipos de elementos específicos (: number[] y : string[]), asegurando que solo se puedan almacenar valores numéricos o de cadena en arreglos de números y frutas, respectivamente.

Tupla

Así es como escribirías una tupla en TypeScript:

let persona: [string, number] = ["John", 30];
console.log("persona:", persona); // Salida: persona: ["John", 30]

En TypeScript, una tupla persona se declara con una anotación de tipo explícita [string, number], lo que indica que debe contener una cadena seguida de un número. Almacena el nombre y la edad de una persona.

Y aquí está la simulación de JavaScript:

// JavaScript no tiene soporte nativo para tuplas, pero podemos usar arreglos
let persona = ["John", 30];
console.log("persona:", persona); // Salida: persona: ["John", 30]

En JavaScript, dado que las tuplas no son compatibles, los arreglos se utilizan a menudo como solución alternativa para simular un comportamiento similar a una tupla. El arreglo persona almacena el nombre y la edad de una persona, similar al ejemplo de TypeScript.

Enum

Así es como declararías una enumeración en TypeScript:

enum Direccion {
    Arriba,
    Abajo,
    Izquierda,
    Derecha
}
let direccion: Direccion = Direccion.Arriba;
console.log("direccion:", direccion); // Salida: direccion: 0

En TypeScript, una direccion de enumeración se declara con constantes nombradas Arriba, Abajo, Izquierda y Derecha, a las que se les asignan valores numéricos a partir de 0 de forma predeterminada. A la variable de direccion se le asigna el valor Direccion.Arriba.

Y aquí está la simulación de JavaScript:

// JavaScript no soporta de manera nativa los enums, pero podemos usar objetos o constantes
const Direccion = {
    Arriba: 0,
    Abajo: 1,
    Izquierda: 2,
    Derecha: 3
};
let direccion = Direccion.Up;
console.log("direccion:", direccion); // Salida: direccion: 0

En JavaScript, las enumeraciones no son compatibles de forma nativa, por lo que a menudo se utilizan objetos o constantes para simular un comportamiento similar a una enumeración. Aquí, el objeto Direccion contiene constantes con nombre asignadas a valores numéricos, y a la variable de direccion se le asigna el valor de Direccion.Arriba similar al ejemplo de TypeScript.

Conclusión

Los tipos básicos de TypeScript brindan ventajas significativas sobre JavaScript tradicional en términos de seguridad, claridad y mantenibilidad de tipos.

Al introducir tipado explicito y estructuras, como tuplas y enumeraciones, TypeScript permite a los desarrolladores escribir código más sólido y sin errores.

Comprender las diferencias entre los tipos básicos de JavaScript y TypeScript es esencial para aprovechar todo el potencial de las capacidades de escritura estática de TypeScript en el desarrollo web moderno.

Si tiene algún comentario, puede enviarme un mensaje de texto en Twitter o LinkedIn.

Fetch API es una función de JavaScript que puede utilizar para enviar una solicitud a cualquier URL de API web y obtener una respuesta.

En este artículo, le mostraré cómo realizar solicitudes HTTP a API externas utilizando la API Fetch de JavaScript. Aprenderá a crear solicitudes GET, POST, PUT/PATCH y DELETE utilizando la API Fetch.

Para aprovechar al máximo este artículo, debe tener un buen conocimiento de las promesas de JavaScript. Puedes leer mi artículo Promesas en JavaScript si necesitas un repaso.

• Cómo funciona la API Fetch
• Cómo enviar una solicitud GET
• Cómo enviar una solicitud POST
• Cómo enviar una solicitud PUT
• Cómo enviar una solicitud PATCH
• Cómo enviar una solicitud DELETE
• Cómo usar Async/Await con la API Fetch
• Ejemplos de Código de Ejecución
• Resumen

¡Comencemos!

¿Cómo trabaja la API Fetch?

Para enviar una petición similar a la de un formulario HTML, solo necesita pasar la URL donde desea enviar los datos como argumento a la función fetch():

fetch('<Tu URL>', {})

La función fetch() acepta dos parámetros:

1. La URL a la que enviar la petición (este es un parámetro obligatorio).
2. Las opciones a configurar en la petición. Puede configurar el método de solicitud aquí (este es un parámetro opcional).

Debajo del capó, la función fetch() devuelve una Promesa, por lo que necesitas agregar los métodos .then() y .catch().

Cuando la petición devuelve una respuesta, se llamará al método then(). Si la solicitud devuelve un error, se ejecutará el método catch():

fetch('<Tu URL>', {})
  .then(respuesta => {
    // Manejamos la respuesta de la petición aqui
  })
  .catch(error => {
    // Si hay un error en la petición, lo manejamos aqui 
  })

Dentro de los métodos .then() y .catch(), pasas una función de callback de llamada para ejecutarla cuando se llaman los métodos respectivos.

El método .catch() se puede omitir en Fetch API. Se usa solo cuando Fetch no puede realizar una solicitud a la API, como por ejemplo si no hay conexión de red o no se encuentra la URL.

¿Cómo mandar una petición GET usando Fetch API?

La petición GET es una solicitud HTTP que se utiliza para solicitar datos específicos de una API cuando así se necesita.

En el siguiente ejemplo, accederemos a una URL ficticia ubicada en https://jsonplaceholder.typicode.com para solicitar un usuario registrado en el sitio:

fetch('https://jsonplaceholder.typicode.com/users/1')
  .then(respuesta => console.log(respuesta))
  .catch(error => console.log(error));

El código anterior dará la siguiente respuesta:

Aquí puede ver que la propiedad del cuerpo contiene un ReadableStream. Para usar ReadableStream en nuestra aplicación JavaScript, necesitamos convertirlo para llamar al método json():

fetch('https://jsonplaceholder.typicode.com/users/1')
  .then(respuesta => respuesta.json())
  .then(datos => console.log(datos))

El método json() convierte ReadableStream en un objeto JavaScript. La variable de datos anterior se imprimirá de la siguiente manera:

{
  "id": 1,
  "name": "Leanne Graham",
  "username": "Bret",
  "email": "Sincere@april.biz",
  "address": {
    "street": "Kulas Light",
    "suite": "Apt. 556",
    "city": "Gwenborough",
    "zipcode": "92998-3874",
    "geo": {
      "lat": "-37.3159",
      "lng": "81.1496"
    }
  },
  "phone": "1-770-736-8031 x56442",
  "website": "hildegard.org",
  "company": {
    "name": "Romaguera-Crona",
    "catchPhrase": "Multi-layered client-server neural-net",
    "bs": "harness real-time e-markets"
  }
}

Ahora que tiene el objeto de datos, puede utilizar este valor de la forma que desee. Por ejemplo, si desea mostrar el nombre de usuario y el correo electrónico en HTML, así es como lo hace:

<body>
  <h1 id='nombre-usuario'>Esperando por datos</h1>
  <h2 id='correo-usuario'>Esperando por datos</h1>
  <script>
    fetch('https://jsonplaceholder.typicode.com/users/1')
      .then(respuesta => respuesta.json())
      .then(datos => {
        document.querySelector('#nombre-usuario').textContent = datos.name
        document.querySelector('#correo-usuario').textContent = datos.email
      })
  </script>
</body>

En el código anterior, la API Fetch se ejecutará tan pronto como el navegador cargue el documento HTML.

Después de procesar la respuesta en un objeto de datos, JavaScript cambiará el texto de los elementos <h1> y <h2> anteriores para reflejar el nombre y el correo electrónico del usuario.

Si ejecuta el código anterior, obtendrá el siguiente resultado:

Y así es como envía una solicitud GET usando Fetch y muestra los datos devueltos en HTML.

Tenga en cuenta que, según la petición que solicite, una API puede devolver un tipo diferente de datos.

En este ejemplo, la API typicode devuelve un objeto, pero también puede obtener una matriz cuando solicita más de una unidad de datos.

Si accede a la URL en https://jsonplaceholder.typicode.com/users, verá que la API responde con un arreglo de objetos.

Necesita conocer el tipo de datos devuelto por la API para manejarlo correctamente.

¿Cómo mandar peticiones POST usando Fetch API?

Si desea enviar una solicitud POST en lugar de una solicitud GET, debe definir el segundo argumento al llamar a la función, que es el objeto de configuración

Dentro del objeto de configuración, defina una propiedad method de la siguiente manera:

fetch('https://jsonplaceholder.typicode.com/users', {
  method: 'POST', // Establecemos el método de la petición aqui
})
.then(respuesta => respuesta.json())
.then(datos => console.log(datos))

Cuando envía un método POST, debe configurar el encabezado de la solicitud y las propiedades del cuerpo para garantizar un proceso fluido.

Para el encabezado, debe agregar la propiedad Content-Type y configurarla en application/json.

Los datos que desea enviar deben colocarse dentro de la propiedad `body` en formato JSON. Vea el ejemplo a continuación:

fetch('https://jsonplaceholder.typicode.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    nombre: 'Nathan Sebhastian',
    correo: 'ns@mail.com'
  }),
}).then(respuesta => respuesta.json())
  .then(datos => console.log(datos))

En el ejemplo anterior, enviamos una solicitud POST para crear un nuevo usuario. En la propiedad del cuerpo, un objeto JavaScript normal se convirtió en una cadena JSON llamando al método JSON.stringify().

JSON es uno de los formatos que utilizan las computadoras para comunicarse entre sí en Internet.

La respuesta de la API de Typicode.com sería similar a la siguiente:

{
  "nombre": "Nathan Sebhastian",
  "correo": "ns@mail.com",
  "id": 11
}

Esto significa que creamos exitosamente un nuevo usuario. Dado que typicode.com es una API falsa, el usuario realmente no será agregado, pero simulará como si lo fuera.

¿Cómo mandar peticiones PUT?

Una solicitud PUT se utiliza para crear un nuevo recurso o actualizar uno existente.

Por ejemplo, si desea actualizar un nombre de usuario y datos de correo electrónico existentes. Puede utilizar una solicitud PUT para hacerlo:

fetch('https://jsonplaceholder.typicode.com/users/1', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    nombre: 'Nathan Sebhastian',
    correo: 'nathan@mail.com'
  }),
}).then(respuesta => resporespuestanse.json())
  .then(datos => console.log(datos))

La solicitud anterior recibirá la siguiente respuesta:

{
    "name": "Nathan Sebhastian",
    "email": "nathan@mail.com",
    "id": 1
}

Debido a que ya existen datos de usuario con un id de 1, la solicitud PUT anterior actualiza esos datos.

A continuación, veamos la solicitud PATCH.

¿Cómo mandar una petición PATCH?

La solicitud PATCH se envía cuando necesita actualizar una petición existente.

Por ejemplo, si desea cambiar el nombre y el usuario de un usuario existente.

A continuación se muestra un ejemplo de cómo enviar una solicitud PATCH a typicode.com:

fetch('https://jsonplaceholder.typicode.com/users/1', {
  method: 'PATCH',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ 
    nombre: 'Nathan Sebhastian',
    usaurio: 'nsebhastian'
  }),
}).then(respuesta => respuesta.json())
  .then(datos => console.log(datos))

La solicitud anterior recibirá la siguiente respuesta:

{
    "id": 1,
    "nombre": "Nathan Sebhastian",
    "usuario": "nsebhastian",
    "correo": "Sincere@april.biz",
    // ... the rest of user data
}

Arriba, puede ver que los valores de las propiedades de nombre yusuario se actualizan utilizando el cuerpo de la solicitud PATCH.

¿Cómo mandar una petición DELETE?

La solicitud DELETE se utiliza cuando desea solicitar que un recurso se elimine permanentemente del servidor.

Para ejecutar una solicitud DELETE con Fetch, solo necesita especificar la URL del recurso que desea eliminar y el method: 'DELETE' de la siguiente manera:

fetch('https://jsonplaceholder.typicode.com/users/1', {
  method: 'DELETE',
}).then(respuesta => respuesta.json())
  .then(datos => console.log(datos))

La solicitud anterior eliminará los datos de un usuario que tenga un idde 1.

La API podría responder con algún mensaje para confirmar que el recurso se ha eliminado. Pero como typicode.com es una API ficticia, devolverá un objeto JavaScript vacío {}.

¿Cómo utilizar Async/Await con la API Fetch?

Dado que Fetch devuelve un objeto Promise, esto significa que también puede usar la sintaxis async/await para reemplazar los métodos .then() y .catch().

A continuación se muestra un ejemplo de envío de una solicitud GET usando Fetch en sintaxis async/await:

try {
  const respuesta = await fetch('https://jsonplaceholder.typicode.com/users/1');
  const json = await respuesta.json();
  console.log(json);
} catch (error) {
  console.log(error);
}

Manejar una respuesta Fetch usando async/await parece más limpio porque no es necesario usar las devoluciones de llamada .then() y .catch().

Si necesita un repaso sobre async/await, puede leer mi artículo JavaScript Async/Await.

Ejecutando el código de ejemplo

También creé un sitio web de ejemplo que le muestra cómo ejecutar estos 5 protocolos de solicitud HTTP en https://nathansebhastian.github.io/js-fetch-api/

Compruébelo y estudie el objeto de datos devuelto. Para saber qué peticiones puede enviar a una API específica, debe consultar la documentación de ese proyecto de API.

Resumen

Fetch API le permite acceder a las API y realizar una solicitud de red utilizando métodos de solicitud estándar como GET, POST, PUT, PATCH y DELETE.

La API Fetch devuelve una promesa, por lo que debe encadenar la llamada a la función con los métodos .then() y .catch(), o usar la sintaxis async/await.

¡Y así es como funciona la API Fetch! Si te ha gustado este artículo, quizás quieras consultar mi libro Beginning Modern JavaScript para mejorar tus habilidades en JavaScript:

El libro está diseñado para ser fácil para principiantes y accesible para cualquiera que quiera aprender JavaScript. Proporciona una guía sencilla paso a paso que le ayudará a comprender cómo utilizar JavaScript para crear una aplicación web dinámica.

Esta es mi promesa: realmente sentirás que entiendes lo que estás haciendo con JavaScript.

¡Nos vemos en otros artículos!

Nota del traductor: Este post contiene muchos videos que sirven para complementar la información del mismo, los videos están en inglés pero es posible verlos con los subtítulos autogenerados que proporciona YouTube.

Trabajar con Git y GitHub suele ser una parte esencial de sus tareas diarias de programación. En muchos casos, necesitarás tanto un repositorio Git local como un repositorio GitHub remoto para un proyecto.

• Con el repositorio local, trabajas en tu propia copia del proyecto. Usted realiza y prueba los cambios de forma independiente antes de enviarlos al repositorio remoto para que otros los revisen y combinen.
• El repositorio remoto se usa para almacenamiento externo y para compartir el proyecto con otros.

Este tutorial se divide en 2 escenarios:

• Local primero: primero crea un repositorio local y envía su código a ese repositorio. Más adelante, creará un repositorio remoto. Con los dos repositorios instalados, querrás mantenerlos sincronizados. Este escenario es común si ha iniciado un proyecto por su cuenta y luego desea compartirlo.
• Remoto primero: en este escenario, existe un repositorio remoto y desea trabajar con ese código. Utilice ese repositorio remoto para crear su repositorio local para poder realizar y probar cambios localmente. Con los dos repositorios instalados, querrás mantenerlos sincronizados. Este escenario es común si está trabajando en un equipo o en un proyecto de código abierto que tiene un repositorio de GitHub existente.

Esto es lo que trataremos en este tutorial:

1. ¿Qué significan Git, GitHub y Repositorio?
2. ¿Cómo instalar Git y GitHub?
3. Escenario 1: Primero local
4. ¿Cómo crear un repositorio local?
5. ¿Cómo confirmar archivos en el repositorio local?
6. ¿Cómo crear un repositorio remoto de GitHub?
7. ¿Cómo conectar Git y Github?
8. ¿Cómo sincronizar los repositorios local y remoto?
9. Escenario 2: Primero remoto
10. ¿Cómo clonar un repositorio?
11. Terminando

Comencemos con una breve introducción a los términos que estamos usando y luego pasemos a nuestros dos escenarios.

¿Qué significan Git, GitHub y repositorio?

Un repositorio, o "repo" para abreviar, almacena y rastrea las versiones de los archivos de su proyecto. A medida que realiza cambios en esos archivos, confirma (o copia) esos archivos en el repositorio para su custodia. El repositorio mantiene una lista de todos los cambios confirmados, denominada historial de confirmaciones o commit history en inglés.

Git es un sistema de control de versiones popular y ampliamente utilizado para crear y trabajar con repositorios. Se ejecuta localmente en su computadora. Puedes descargar, instalar y usar Git en cualquier plataforma sin ningún costo ni tarifa. Con Git, creas un repositorio local en la carpeta de trabajo de tu proyecto y Git almacena el historial de confirmación de los archivos en esa carpeta.

Si eres nuevo en Git, considera ver este vídeo como introducción:

GitHub es un sitio web que aloja repositorios remotos en Internet. Una cuenta básica de GitHub también es gratuita. Utilice GitHub para crear un repositorio remoto para su proyecto. Con un repositorio remoto, puede almacenar su código fuera del sitio, colaborar con otros, trabajar en proyectos de la empresa o de código abierto y mostrar su portafolio a posibles empleadores.

Si eres nuevo en GitHub, considera ver este vídeo como introducción:

Antes de saltar a nuestros escenarios, necesitamos instalar Git y crear una cuenta de GitHub.

¿Cómo instalar Git y GitHub?

Si desea trabajar con los ejemplos presentados en este tutorial, existen algunos pasos preparatorios. Pero no dudes en pasar a la siguiente sección si ya tienes estas herramientas instaladas o prefieres leer este artículo sin codificar.

Primero, instala Git en tu computadora si aún no lo tienes. Para obtener instrucciones paso a paso sobre cómo instalar Git, vea la segunda parte de este video:

A continuación, cree una cuenta de GitHub, si aún no tiene una. Este video proporciona instrucciones paso a paso sobre cómo crear una cuenta de GitHub:

Por último, cree una carpeta de trabajo en su computadora (yo nombré mis recetas en mi carpeta de documentos). Luego cree dos archivos de texto simples en esa carpeta: archivo1.txt y archivo2.txt. Aunque estemos usando archivos de texto, el proceso de sincronización cubierto en este artículo es el mismo con cualquier tipo de archivos de código.

Ahora estamos listos para analizar nuestros dos escenarios: primero el local y primero el remoto.

Escenario 1: Primero local

Supongamos que desea crear un sitio web de recetas (o tal vez una aplicación) para recopilar y administrar recetas. Crea un repositorio local para poder rastrear fácilmente sus cambios en los archivos del proyecto.

Más tarde decide que también desea un repositorio remoto para mantener una copia de sus archivos fuera del sitio y compartir el proyecto con otros. Una vez que tenga el repositorio remoto, querrá mantener su repositorio local sincronizado con ese repositorio remoto.

Este escenario se muestra en la Figura 1:

Según los números de la Figura 1:

1. Primero se crea el repositorio local, representado como un cuadro.
2. El repositorio remoto se crea con GitHub algún tiempo después.
3. Los dos repositorios se mantienen sincronizados.

Repasemos estos pasos en detalle.

¿Cómo crear un repositorio local?

Ya preparamos una carpeta de trabajo y creamos dos archivos que son el comienzo de nuestro proyecto.

Para crear un repositorio local para ese proyecto, abra su terminal o símbolo del sistema y navegue hasta esa carpeta de trabajo.

Luego inicializa un nuevo repositorio Git usando el siguiente comando:

git init

Este comando inicializa un nuevo repositorio Git en la carpeta actual. El proceso de inicialización crea una carpeta .git dentro de la carpeta del proyecto que almacena los archivos y datos del repositorio.

Esta carpeta .git puede estar oculta de forma predeterminada. En el Finder de Mac, use Command + Mayús +. (punto) para que aparezcan carpetas y archivos ocultos. En Windows, use la pestaña Ver del Explorador de archivos y marque Elementos Ocultos para mostrar carpetas y archivos ocultos.

¡Ahora tenemos un repositorio local! Agreguemos nuestros dos archivos de proyecto en ese repositorio.

¿Cómo confirmar archivos en el repositorio local?

Cada vez que creamos archivos nuevos, cambiamos archivos existentes o eliminamos archivos, enviamos esos cambios a nuestro repositorio local. Esto asegura que el repositorio rastree el estado actual de nuestro proyecto.

Enviar archivos a un repositorio local requiere dos pasos:

1. Stage (Área de preparación)
2. Commit (Confirmación)

Primero, agregue los archivos al área de preparación de Git:

git add .

Le decimos a Git qué archivos queremos incluir en esa confirmación agregándolos a un área de preparación. La puesta en escena nos permite elegir selectivamente qué cambios incluir en una confirmación.

Utilizando el . (punto) agrega todos los archivos en la carpeta de trabajo (y sus subcarpetas) al área de preparación. Si solo desea agregar archivos específicos, puede enumerarlos.

A continuación, confirmamos los archivos preparados en el repositorio local:

git commit -m "Confirmación inicial"

Este comando envía los archivos en el área de preparación de Git al repositorio local.

La opción -m es para un mensaje de confirmación. Siga la -m con el mensaje, entre comillas. Asegúrese de definir un mensaje claro que describa los cambios que está realizando.

Para obtener más información sobre cómo definir excelentes mensajes de confirmación, vea este video:

Después de estos pasos, el terminal aparece como se muestra a continuación:

El comando init muestra un mensaje de estado que nos indica que creó un repositorio Git vacío.

El comando add no proporciona ningún resultado.

El comando commit muestra la rama en la que estamos ( main en este ejemplo), los primeros caracteres de la identificación de la confirmación y el mensaje de confirmación. Luego enumera los archivos modificados. En este ejemplo, se cambiaron 2 archivos y ambos fueron inserciones (archivos nuevos).

El número después del modo de creación indica el tipo de archivo y los permisos. 100644 significa que se trata de archivos normales, no carpetas, con permisos de lectura y escritura del propietario.

Con nuestro repositorio local implementado, es hora de crear nuestro repositorio remoto.

¿Cómo crear un repositorio remoto en GitHub?

Ahora crearemos un repositorio remoto en GitHub. Vaya al sitio web de GitHub en www.github.com e inicie sesión. Si no tiene una cuenta de GitHub, consulte la sección "Cómo instalar Git y GitHub" anteriormente en este tutorial para conocer los pasos para crear una cuenta.

Mire este video para ver el proceso de creación de un repositorio de GitHub:

Después de iniciar sesión en GitHub, se le dirigirá a su panel personal. Su panel personal de GitHub proporciona información sobre sus repositorios y proyectos.

Si es la primera vez que creas un repositorio en GitHub, proporciona el botón Crear Repositorio para ayudarte a comenzar. Si ya ha estado usando GitHub, verá un botón Nuevo en su lugar.

En cualquier caso, al hacer clic en el botón se accede a la página Crear un nuevo repositorio, como se muestra en la Figura 3.

Comience ingresando el nombre del repositorio. El nombre de un repositorio debe ser breve, pero descriptivo de su proyecto. Debe ser único dentro de su cuenta de GitHub. GitHub lo comprueba por ti.

Las convenciones generales para los nombres de los repositorios sugieren el uso de minúsculas. Si hay varias palabras, utilice guiones entre las palabras, como libro- de-recetas.

Llamé a mi repositorio de recetas. Y la flecha verde al lado del nombre significa que es único dentro de esta cuenta de GitHub.

Opcionalmente, puede proporcionar una descripción. Aquí es donde puedes poner más información sobre el repositorio, si lo deseas.

A continuación, tienes la opción de crear un repositorio público o privado. Si crea un repositorio público, cualquiera en Internet puede verlo. Pero sólo los colaboradores que tú elijas pueden comprometerse con ello. Así que no tienes que preocuparte de que extraños cambien tus archivos. Si crea un repositorio privado, será privado excepto para los colaboradores elegidos.

Considere hacer públicos sus repositorios para compartir su código con otros, a menos que su código sea propietario.

Luego tiene la opción de crear un archivo Readme (Léame). Un archivo Readme les da a quienes miran un repositorio una idea de para qué sirve ese repositorio e instrucciones sobre cómo usarlo. Marque la casilla para agregar un archivo Readme.

Una plantilla .gitignore le ayuda a identificar qué archivos de su carpeta de trabajo no desea incluir en el seguimiento de versiones de Git. Para una aplicación, no desea incluir archivos de compilación intermedios, por ejemplo, ya que suelen ser grandes y pueden reconstruirse fácilmente a partir de archivos fuente. Para este proyecto simple, no necesitamos una plantilla .gitignore.

Lo siguiente es elegir una licencia. Una licencia permite a otros desarrolladores saber qué pueden hacer con el código de su repositorio. Por ejemplo, si podrían utilizar libremente el código para sus propios proyectos.

GitHub proporciona un sitio web para ayudarle a tomar una decisión. Haga clic en obtener más información en la opción Elegir una licencia para ir a la documentación de GitHub. En la página de documentación, encontrará un enlace de choosealicense.com para obtener ayuda para seleccionar qué licencia es adecuada para su proyecto.

Para mi repositorio de recetas, haré que la licencia sea simple y permisiva y elegiré una licencia MIT.

Cierre la pestaña del navegador de documentación, regrese a la pestaña GitHub y seleccione la licencia deseada de la lista.

Justo encima del botón Crear Repositorio, GitHub proporciona un resumen para que puedas verificar la acción que estás a punto de realizar. Luego haga clic en Crear Repositorio.

Crea el repositorio como se muestra en la Figura 4.

Como puede ver en la Figura 4, ¡GitHub realizó automáticamente nuestra primera confirmación! Esa confirmación es una instantánea de los dos archivos que le dijimos que agregara al repositorio: nuestro archivo de licencia y el archivo Léame. Estableció un mensaje de confirmación de "compromiso inicial". Y de forma predeterminada, GitHub muestra el contenido de nuestro archivo Léame.

En este punto, nuestro repositorio local contiene nuestros dos archivos de texto. Y nuestro repositorio remoto contiene nuestra licencia y archivos Léame. Queremos que los dos repositorios coincidan.

¿Cómo conectar Git y Github?

Antes de poder sincronizar los repositorios local y remoto, debe establecer una conexión entre ellos. Básicamente, necesita indicarle a su repositorio local dónde encontrar el repositorio remoto.

Identificamos un repositorio remoto por su URL. En la Figura 4 anterior, observe el botón verde Código. Haga clic en ese botón para ver detalles sobre el repositorio (Figura 5).

Asegúrese de que la pestaña HTTPS esté seleccionada y haga clic en el icono de copiar para copiar la URL de este repositorio de GitHub.

De vuelta en la ventana de comandos de su máquina local, agregue el repositorio remoto al repositorio local. Luego enumere los controles remotos para confirmar que se creó el control remoto.

git remote add recipes-gh https://github.com/DeborahK/recipes.git
git remote

El comando remote add agrega el repositorio remoto en la URL proporcionada. Y le permite asignar un alias para ese repositorio para que no tenga que escribir la URL cuando haga referencia al repositorio remoto.

Un alias común para el repositorio remoto es origin, pero algunos encuentran ese nombre un poco confuso, especialmente si el repositorio remoto no fue el origen del proyecto. En ese caso, a veces uso el nombre del repositorio local con -gh (para GitHub) como apodo del repositorio remoto, para poder recordarlo fácilmente. Pero siéntete libre de usar cualquier nombre.

El comando remote por sí solo muestra la lista de controles remotos que conoce su repositorio local. Así es como se ve:

Nuestro repositorio Git local ahora sabe dónde encontrar su repositorio remoto asociado. El siguiente paso es sincronizar los repositorios para que coincida su historial de confirmaciones.

¿Cómo sincronizar un Repositorio Local con un Repositorio Remoto?

Para sincronizar nuestros repositorios local y remoto, primero recuperamos el historial de cambios del repositorio remoto y lo fusionamos en nuestro repositorio local usando el comando pull. Luego enviamos nuestro historial de cambios local al repositorio remoto usando el comando push.

Si prefieres sincronizar repositorios usando VS Code, mira este video:

Para extraer del repositorio remoto y fusionarlo con nuestro repositorio local usando un comando de Git:

git pull recetas-gh main --allow-unrelated-histories

dir		// En Windows
o
ls		// En Mac

El comando pull requiere el alias del repositorio remoto (recetas-gh) y el nombre de la rama. Como no hemos creado ninguna rama adicional, especificamos la rama principal ( main ).

La bandera --allow-un related-histories es necesaria la primera vez que extraemos porque queremos fusionar dos repositorios que se crearon por separado y actualmente no comparten un historial relacionado.

Después de la primera vez, el comando git pull no requiere esa bandera:

git pull recetas-gh main

En cualquier caso, el comando pull busca la URL apropiada para el repositorio remoto usando el apodo proporcionado ( recetas-gh ).

Luego recupera el historial de confirmaciones y otros datos de la rama especificada ( main ) del repositorio remoto que no está en esa rama del repositorio local.

Fusiona esos datos en el repositorio local. Si hay algún conflicto, deberá resolverlo manualmente antes de que Git combine los cambios.

Por último, actualiza la carpeta de trabajo local con todos los archivos de la confirmación más reciente.

Usando el comando dir en Windows, o el comando ls en una Mac, vemos que nuestro repositorio local ahora tiene nuestros archivos originales más los archivos de licencia y Léame de nuestro repositorio remoto, como se muestra en la Figura 7.

Ahora nuestro repositorio local contiene todo el historial de confirmaciones del repositorio remoto.

A continuación, enviamos el historial de cambios desde nuestro repositorio local a nuestro repositorio remoto usando el comando push.

git push recetas-gh main

El comando push requiere el nombre del repositorio remoto ( recetas-gh ) y el nombre de la rama. Como no hemos creado ninguna rama adicional, especificamos la rama principal ( main ).

Este comando fusiona el historial de cambios local con el repositorio remoto. Si hay algún conflicto, deberá resolverlo manualmente antes de que Git combine los cambios. Consulte la Figura 8 para ver el resultado:

Para confirmar que nuestro repositorio remoto incluye todos nuestros archivos, vea el repositorio remoto en GitHub. En la Figura 9, vemos que los archivos de nuestro repositorio local ahora están en nuestro repositorio remoto y ¡nuestros repositorios están sincronizados!

En resumen, sincronizar sus repositorios local y remoto implica extraer cualquier cambio del repositorio remoto a su repositorio local, resolver conflictos y luego enviar sus cambios locales nuevamente al repositorio remoto.

Eso es todo para el primer escenario. Creamos un repositorio local a partir de nuestros archivos existentes. Luego creamos un repositorio remoto, configuramos una conexión a ese repositorio remoto y sincronizamos nuestros archivos. Repita los comandos pull y push para sincronizar los repositorios mientras trabaja en su proyecto.

Escenario 2: Primero remoto

Para nuestro segundo escenario, el repositorio remoto ya existe. Este será el caso si te unes a un equipo que tiene código existente en GitHub. O si quieres trabajar en un proyecto de código abierto. O si encontró algún código en GitHub que le gustaría usar como punto de partida para su proyecto.

Quiere crear su repositorio local a partir de un repositorio remoto existente. Hay tres formas básicas de obtener código de un repositorio remoto, como se muestra en la Figura 10.

En el lado izquierdo de la Figura 10, tenemos un escenario: si posee o tiene derechos de acceso para modificar el repositorio remoto, puede clonar el repositorio remoto para crear su repositorio local. Luego puede sincronizar directamente los cambios entre los dos repositorios.

El segundo escenario se muestra en el medio de la Figura 10: si no es propietario del repositorio remoto o no tiene derechos de acceso para modificarlo, primero use GitHub para bifurcar el repositorio. Esto crea una copia del repositorio remoto en su cuenta de GitHub. Luego clona tu copia para crear tu repositorio local.

Este será el caso si estás trabajando en un proyecto de código abierto o quieres usar el código en el repositorio de otra persona como punto de partida para tu proyecto.

El tercer escenario se muestra a la derecha de la Figura 10; también existe la opción de descargar un archivo zip del código en el repositorio. Esto no crea un repositorio local. Utilice esta opción si desea ver el código de un repositorio de GitHub, pero no planea realizar un seguimiento de los cambios.

Para configurar el ejemplo de este escenario, necesita un repositorio remoto que actualmente no tenga un repositorio local asociado. Puede utilizar el repositorio remoto de recetas que ya creó en el primer escenario. Si prefieres utilizar el repositorio de otra persona para este ejemplo, asegúrate de bifurcarlo primero.

Una vez que tenga un repositorio remoto, asegúrese de que no haya ningún repositorio local asociado a él. Si está utilizando el repositorio remoto de recetas, elimine la carpeta de recetas de su sistema local. Eso elimina su repositorio local.

Ahora está listo para crear un nuevo repositorio local desde su repositorio remoto en GitHub.

¿Cómo clonar un repositorio?

Para crear un repositorio local desde un repositorio remoto en GitHub, use el comando clone.

Si prefieres clonar un repositorio usando la aplicación GitHub Desktop, mira este video:

Para clonar usando un comando de Git, primero necesitamos la URL del repositorio remoto.

Navegue a GitHub, inicie sesión y verá su panel personal. Localice el repositorio que desea clonar. Haga clic en el botón verde Código para ver los detalles sobre el repositorio como se muestra anteriormente en la Figura 5. Haga clic en el botón copiar al lado de la URL para copiarlo.

A continuación, abra su terminal o símbolo del sistema en su computadora. Navegue hasta la carpeta donde desea crear la carpeta de trabajo del proyecto. Navegaré a mi carpeta de documentos.

Entonces estamos listos para clonar ese repositorio:

git clone https://github.com/DeborahK/recetas.git

El comando clone requiere la URL del repositorio remoto. Acabamos de copiar esa URL de GitHub, así que péguela como parte de este comando.

Cuando se ejecuta el comando, primero crea la carpeta de trabajo para el repositorio utilizando el nombre del repositorio remoto de la URL, que son recetas en este ejemplo. Luego copia el historial de confirmaciones del repositorio remoto en la URL proporcionada.

El proceso de clonación también vincula automáticamente el nuevo repositorio local con su repositorio remoto. Y asigna al repositorio remoto un alias de origen. Luego podemos hacer referencia al repositorio remoto usando ese alias en lugar de su URL.

Por último, el proceso de clonación copia todos los archivos de la confirmación más reciente a la carpeta de trabajo local. Luego puede agregar, editar o eliminar archivos en esa carpeta de trabajo mientras trabaja localmente en el proyecto.

Navegue hacia abajo hasta la carpeta de nuevas recetas. Luego use el comando remoto para ver el repositorio remoto vinculado. Y como se muestra en la Figura 11, efectivamente tiene el alias origen.

Observe el resultado de la operación de clonación en la Figura 11. Git enumera (o encuentra) 10 objetos. Sólo tenemos cuatro archivos en el repositorio remoto de recetas. Entonces, ¿por qué encuentra 10 objetos? Esto se debe a que el proceso de clonación copia todo el historial de confirmaciones, no solo los archivos.

Utilice el comando rev-list con las banderas --objects y --all para ver la lista de objetos.

git rev-list --objects --all

La Figura 12 muestra el resultado de ese comando:

Cada uno de los objetos anteriores se muestra como un identificador SHA o algoritmo hash seguro. El SHA se utiliza como identificación para identificar de forma única los objetos en nuestro repositorio.

Los primeros tres objetos de esta lista (objetos 1 a 3) son las tres confirmaciones realizadas en este repositorio. Al observar la lista de confirmaciones en GitHub (Figura 13), cada confirmación muestra los primeros caracteres de su SHA. Estos coinciden con los primeros tres objetos:

• La fusión se confirma cuando fusionamos los dos repositorios.
• El commit inicial que GitHub realizó en el repositorio remoto creando los archivos LICENCIA y README.md.
• El commit inicial que realizamos en el repositorio local confirmando file1.txt y file2.txt.

Los objetos del medio en la lista que se muestra en la Figura 12 (objetos 5-8) son los cuatro archivos comprometidos.

Los tres objetos restantes (objetos 4, 9, 10) son objetos de árbol. Un objeto de árbol representa el estado de una carpeta, incluidos los archivos y subcarpetas de esa carpeta. Mantiene la jerarquía de la carpeta.

Usando el comando dir en Windows o el comando ls en Mac, vemos que nuestra carpeta de trabajo ahora contiene todos los archivos de nuestro repositorio remoto.

Ahora que hemos clonado el repositorio, nuestros repositorios local y remoto coinciden. Para mantenerlos sincronizados, utilizamos pull y push como vimos en la sección "Cómo sincronizar repositorios locales y remotos" anteriormente en este artículo.

Tenga en cuenta que si está trabajando con un repositorio remoto que no es de su propiedad, es posible que no tenga acceso para enviar sus cambios directamente al repositorio. En su lugar, deberás emitir un Pull Request.

Un Pull Request, o PR, les dice a los propietarios u otros contribuyentes que usted ha enviado cambios y que está solicitando que esos cambios se revisen y extraigan, o se fusionen, en el repositorio remoto.

Vea este vídeo para obtener más información sobre los Pull Request:

Terminando

En el primer escenario, teníamos código existente y creamos un repositorio local a partir de ese código. Luego creamos un repositorio remoto para mantener una copia de los archivos fuera del sitio y compartir el proyecto con otros.

En el segundo escenario, teníamos un repositorio remoto existente creado en GitHub por nuestro equipo o por un colaborador de código abierto. Luego clonamos ese repositorio para crear nuestro repositorio local. De esa manera, podemos trabajar en nuestra propia copia del proyecto y realizar y probar cambios de forma independiente antes de enviar esos cambios al repositorio remoto para que otros los revisen y fusionen.

Ya sea que cree primero su repositorio local o primero su repositorio remoto de GitHub, una vez que tenga ambos repositorios en su lugar, puede mantenerlos sincronizados con los comandos pull y push de Git. O enviando solicitudes de extracción o relaciones públicas.

Para obtener más detalles sobre cómo aprender Git y GitHub, consulte este curso:

Obtener una comprensión sólida de los repositorios locales y remotos, y cómo mantenerlos sincronizados, es esencial cuando se trabaja en su propio código. Es aún más importante cuando se trabaja en un equipo o en un proyecto de código abierto.

La gestión del estado es una parte esencial del desarrollo de aplicaciones en React. Una forma común de gestionar el estado es pasando props. Pasar props significa enviar datos de un componente a otro. Es una buena manera de asegurarse de que los datos lleguen al lugar correcto en una aplicación React.

Pero puede resultar molesto pasar props cuando tienes que enviar los mismos datos a muchos componentes o cuando los componentes están muy lejos unos de otros. Esto puede hacer que una aplicación sea más lenta y más difícil de trabajar.

Afortunadamente, React proporciona una función incorporada conocida como Context API que ayuda a "teletransportar" datos a los componentes que los necesitan sin pasar props.

En este artículo, exploraremos cómo funciona Context API y cómo usarla de manera efectiva en sus aplicaciones React.

El problema al pasar props

En React, pasar props es un concepto fundamental que permite que un componente principal comparta datos con sus componentes secundarios, así como con otros componentes dentro de una aplicación.

En muchos casos, pasar props puede ser una forma eficaz de compartir datos entre diferentes componentes de su aplicación. Pero pasar props a lo largo de una cadena de múltiples componentes para llegar a un componente específico puede hacer que su código sea demasiado engorroso.

Según el diagrama anterior, para pasar datos al componente "Hijo B", debemos pasarlos a través de todos los componentes intermedios, incluso si esos componentes en realidad no usan los datos por sí mismos. Esto es lo que se conoce como "prop drilling".

El prop drilling puede hacer que tu código sea más difícil de leer y mantener, y también puede dificultar la refactorización de tus componentes más adelante.

Aquí es donde entra en juego Context API. Con Context API, puede almacenar datos en el nivel superior del árbol de componentes y ponerlos a disposición de todos los demás componentes que los necesiten sin pasar props.

¿Cómo funciona Context API?

Context API permite pasar datos a través de un árbol de componentes sin tener que pasar props manualmente en cada nivel. Esto facilita el intercambio de datos entre componentes.

Por ejemplo, digamos que tiene una aplicación de compras con un componente que muestra el carrito de compras de un usuario y otro componente que muestra el historial de pedidos del usuario.

Con Context API, puede crear un "contexto" que contenga la información de compras del usuario, como su carrito y su historial de pedidos. Luego, puede usar ese contexto tanto en el carrito de compras como en el componente del historial de pedidos, sin tener que pasar la información a través de props.

Es como tener una caja grande que contiene todo lo que necesitas para tu viaje de compras. Puedes sacar cosas de la caja cuando las necesites y volver a guardarlas cuando hayas terminado.

Básicamente, Context API consta de dos componentes principales: el proveedor de contexto y el consumidor de contexto. El proveedor es responsable de crear y gestionar el contexto que contiene los datos que se compartirán entre los componentes. Por otro lado, el consumidor se utiliza para acceder al contexto y sus datos desde dentro de un componente.

En el ejemplo dado, el proveedor creará el contexto que contiene la información de compras del usuario, mientras que los componentes del consumidor (carrito de compras e historial de pedidos) accederán a ese contexto para recuperar los datos que necesitan. Esto evita la necesidad de transmitir la información a través de props, lo que hace que su código sea más eficiente y más fácil de administrar.

¿Cómo empezar a usar context API?

Para comenzar a utilizar Context API en sus aplicaciones, deberá seguir unos sencillos pasos:

Crear un objeto de contexto

Primero, necesita crear un objeto de contexto usando la función createContext que viene de manera nativa en React. Este objeto de contexto contendrá los datos que desea compartir en su aplicación.

Cree un nuevo archivo llamado MiContexto.js en la carpeta src y agregue el siguiente código para crear un objeto de contexto:

import { createContext } from 'react';

export const MiContexto = createContext("");

En el código anterior, importamos createContext desde React y lo usamos para crear un nuevo objeto de contexto llamado "MiContexto". Luego, exportamos el objeto de contexto para poder usarlo en otras partes de nuestra aplicación.

Envolver componentes con un Proveedor

Una vez que haya creado un objeto de contexto, debe envolver los componentes que necesitan acceso a los datos compartidos con un componente de proveedor. El componente Proveedor acepta una propiedad value que contiene los datos compartidos, y cualquier componente que sea hijo del componente Proveedor puede acceder a esos datos compartidos.

Es importante tener en cuenta que el componente Proveedor debe incluirse alrededor del componente de nivel superior en una aplicación para garantizar que todos los componentes secundarios tengan acceso a los datos compartidos.

A continuación se muestra un ejemplo que demuestra cómo empaquetar componentes con un Proveedor usando Context API:

// Creamos un componente padre que envuelva los componentes hijos con un Proveedor
import { useState, React } from "react";
import { MiContexto } from "./MiContexto";
import MiComponente from "./MiComponente";

function App() {
  const [texto, setTexto] = useState("");

  return (
    <div>
      <MiContexto.Provider value={{ texto, setTexto }}>
        <MiComponente />
      </MiContexto.Provider>
    </div>
  );
}

export default App;

En este ejemplo, tenemos un componente principal llamado App. Este componente tiene una variable de estado llamada "texto", que inicialmente se establece en una cadena vacía. También hemos definido una función llamada setTexto que se puede usar para actualizar el valor del texto.

Consumir el contexto

Ahora que hemos creado el componente proveedor, necesitamos consumir el contexto en otros componentes. Para hacer esto, usamos el hook "useContext" de React.

import { useContext } from 'react';
import { MiContexto } from './MiContexto';

function MiComponente() {
  const { texto, setTexto } = useContext(MiContexto);

  return (
    <div>
      <h1>{texto}</h1>
      <button onClick={() => setTexto('Hola mundo!')}>
        Click me
      </button>
    </div>
  );
}

export default MiComponente;

En este ejemplo, hemos utilizado el hook useContext para acceder a las variables "texto" y "setTexto" que se definieron en el componente del proveedor.

Dentro de la declaración de retorno de "MiComponente", hemos representado un elemento de párrafo que muestra el valor del texto. También hemos representado un botón que, al hacer clic, llamará a la función setTexto para actualizar el valor del texto a "¡Hola, mundo!".

¡Y eso es! Así es como puedes usar la Context API en tu aplicación React.

Al crear un objeto de contexto, definir un componente de proveedor y consumir el contexto en otros componentes, puede compartir datos en su aplicación de una manera simple y eficiente.

Casos de uso de context API

A continuación se muestran algunos casos de uso reales de Context API:

1. Temas: puede utilizar Context API para almacenar el tema actual de su aplicación y ponerlo a disposición de todos los componentes. De esta manera, cada vez que el usuario cambie el tema (como habilitar el modo oscuro), todos los componentes se actualizarán con el nuevo tema.
2. Autenticación de usuario: también puede utilizar Context API para almacenar el estado de autenticación de un usuario y transmitirlo a todos los componentes que lo necesitan. De esta manera, puede restringir fácilmente el acceso a ciertas partes de su aplicación según el estado de autenticación del usuario.
3. Soporte multilingüe: puede almacenar el idioma actual de su aplicación en el contexto y transmitirlo a todos los componentes que lo necesiten. De esta manera, puede cambiar fácilmente entre diferentes idiomas sin tener que pasar el idioma como props a todos los componentes.
4. Acceso a datos de fuentes externas: finalmente, puede utilizar Context API para almacenar datos recuperados de fuentes externas, como API o bases de datos, y ponerlos a disposición de todos los componentes. Esto puede simplificar su código y facilitar la administración de datos en su aplicación.

En resumen

En este artículo, exploramos Context API de React, una poderosa herramienta para administrar el estado en aplicaciones React.

Hemos analizado los conceptos básicos Context API, incluida la creación de un contexto, la creación de un componente de proveedor para pasar datos a componentes secundarios y el consumo de datos en otro componente mediante el hook useContext.

Conclusión

Si está interesado en explorar cómo implementar un tema de modo claro/oscuro en sus propios proyectos de React usando Context API, he creado un sitio web simple que demuestra cómo hacerlo. Puedes encontrar el código del proyecto en mi GitHub.

Al explorar el código y experimentar con sus propias modificaciones, estará bien encaminado para dominar Context API y desbloquear todo su potencial en sus propios proyectos.

¡Muchas gracias por leer!

En este artículo, aprenderás cómo crear nuevos directorios (que es otro nombre para las carpetas) en Python.

También aprenderás a crear una estructura de directorios anidados.

Para trabajar con directorios en Python, primero debes incluir el módulo os en su proyecto, que le permite interactuar con su sistema operativo.

El módulo os también te permite utilizar los dos métodos que cubriremos en este artículo:

• el método os.mkdir()
• el método os.makedirs()

¡Comencemos!

Cómo crear un directorio único usando el método os.mkdir() en Python

Como se mencionó anteriormente, para trabajar con directorios en Python, primero debes incluir el módulo os.

Para hacerlo, agrega la siguiente línea de código en la parte superior de su archivo:

import os

El código anterior te permitirá utilizar el método os.mkdir() para crear un nuevo directorio único.

El método os.mkdir() acepta un argumento: la ruta del directorio.

import os

# especificamos la ruta para el directorio - nos aseguramos de hacerlo entre comillas
ruta = './proyectos'

# creamos un nuevo directorio
os.mkdir(ruta)

El código anterior creará un directorio de proyectos en el directorio de trabajo actual.

Ten en cuenta que ./ representa el directorio de trabajo actual. Puedes omitir esta parte y escribir proyectos solo cuando especifique la ruta; ¡el resultado será el mismo!

Cómo manejar excepciones al usar el método os.mkdir en Python

Pero, ¿qué sucede cuando el directorio que estás intentando crear ya existe? Se genera una excepción FileExistsError:

Traceback (most recent call last):
  File "main.py", line 3, in <module>
    os.mkdir(ruta)
FileExistsError: [Errno 17] File exists: './proyectos'

Una forma de manejar esta excepción es verificar si el archivo ya existe usando un bloque if..else:

import os

ruta = './proyectos'

# verificamos si el directorio ya existe
if not os.path.exists(ruta):
  os.mkdir(ruta)
  print("Directorio %s creado!" % ruta)
else:
  print("Directorio %s ya existe" % ruta)

En el ejemplo anterior, primero verifica si el directorio ./proyectos ya existe usando el método os.path.exists().

Si es así, obtendré el siguiente resultado en lugar de un FileExistsError:

Directorio ./proyectos ya existe

Si el archivo no existe, se crea una nueva carpeta de proyectos en el directorio de trabajo actual y obtengo el siguiente resultado:

Directorio ./proyectos creado!

Alternativamente, puedes usar un bloque try/except para manejar excepciones:

import os

ruta = './proyectos'

try:
    os.mkdir(ruta)
    print("Directorio %s creado!" % ruta)
except FileExistsError:
    print("Directorio %s ya existe" % ruta)

Si ya existe una carpeta de proyectos en el directorio de trabajo actual, obtendrá el siguiente resultado en lugar de un mensaje de error:

Directorio ./proyectos ya existe.

Cómo crear un directorio con subdirectorios usando el método os.makedirs() en Python

El método os.mkdir() no te permite crear un subdirectorio. Este método te permite crear un directorio único.

Para crear una estructura de directorios anidados (como un directorio dentro de otro directorio), utiliza el método os.makedirs().

os.makedirs() acepta un argumento: la ruta completa de la carpeta que desea crear.

import os

# define el nombre del directorio con sus subdirectorios
ruta = './proyectos/juegos/juego01'

os.makedirs(ruta)

En el ejemplo anterior, creé un directorio de proyectos en el directorio de trabajo actual.

Dentro de proyectos, creé otro directorio, juegos. Y dentro de juegos, creé otro directorio más, juego01.

Conclusión

¡Y ahí lo tienes! Ahora sabe cómo crear un directorio único y un directorio con subdirectorios en Python.

Para obtener más información sobre Python, consulte el curso Python para principiantes de freeCodeCamp.

Gracias por leer y feliz codificación.

Un objeto JavaScript es una colección de pares clave-valor. Es un tipo de datos no primitivo que puede contener varios tipos de datos. Por ejemplo:

const usuario = {
  nombre: "John Doe",
  edad: 14,
  verificado: false
};

Cuando trabaja con objetos en JavaScript, es posible que en ocasiones desee cambiar el valor o agregar una nueva propiedad al objeto.

En algunos escenarios, antes de actualizar o agregar nuevas propiedades, querrá crear un nuevo objeto y copiar o clonar los valores del original.

Por ejemplo, si desea copiar el valor del objeto usuario y luego cambiar el nombre a algo diferente. En el sentido típico, querrás utilizar el operador de igualdad (=).

const nuevoUsuario = usuario;
console.log(nuevoUsuario); // {nombre: 'John Doe', edad: 14, verificado: false}

Todo parece estar bien, pero veamos qué pasa si editamos nuestro segundo objeto:

const nuevoUsuario = usuario;
nuevoUsuario.nombre = "Jane Doe";

console.log(nuevoUsuario); 
// {nombre: 'Jane Doe', edad: 14, verificado: false}

Todo está bien con el nuevo objeto, pero si intentas verificar los valores de tu objeto original, notarás que se ve afectado. ¿Por qué? ¿Cómo?

console.log(usuario); // {nombre: 'Jane Doe', edad: 14, verificado: false}

Este es el problema. El objeto original se ve afectado porque los valores de un objeto son pasados por referencia. Esto significa que cualquier valor que almacene en el clon o en el objeto original apunta al mismo objeto, a la misma dirección de memoria.

Esto no es lo que se busca. Se desea almacenar el valor de un objeto en un objeto nuevo y manipular el valor en el objeto nuevo sin afectar el objeto original.

En este artículo, aprenderá tres métodos que puede utilizar para hacer esto. También aprenderá qué significan los clones profundos y superficiales y cómo funcionan.

En caso de que tengas prisa, aquí tienes los tres métodos y un ejemplo de cómo funcionan.

// Usando el Operador de Propagación (Spread Operator)
let clon = { ...usuario }

// Usando Object.assign()
let clon = Object.assign({}, usuario)

// Usando JSON.parse()
let clon = JSON.parse(JSON.stringify(usuario))

Si no tienes prisa, comencemos.🚀

¿Cómo clonar un objeto en JavaScript usando el Operador de Propagación (Spread Operator)?

El operador de propagación se introdujo en ES6 y puede distribuir valores en un objeto con la sintaxis de tres puntos: ...

// declaramos un objeto
const usuario = {
  nombre: "John Doe",
  edad: 14,
  verificado: false
};

// clonamos el objeto usando el operador de propagación
let clonUsuario = { ...usuario };

console.log(clonUsuario); 
// {nombre: 'John Doe', edad: 14, verificado: false}

Ya no se hace referencia directa al objeto, lo que significa que cambiar el valor del objeto no afectará al objeto original.

// clonamos el objeto usando el operador de propagación
let clonUsuario = { ...usuario };

// cambiamos un valor de clonUsuario
clonUsuario.nombre = "Jane Doe"

console.log(clonUsuario.nombre); // 'Jane Doe'
console.log(clonUsuario); // {nombre: 'Jane Doe', edad: 14, verificado: false}

Cuando verifica el valor del nombre en el objeto original o en todo el objeto, notará que no se ve afectado.

console.log(usuario.nombre); // 'John Doe'
console.log(usuario); // {nombre: 'John Doe', edad: 14, verificado: false}

Nota: Solo puede utilizar la sintaxis del operador de propagación para hacer una copia superficial de un objeto, no funciona con propiedades de objetos más profundos. Lo entenderás cuando lleguemos a la última sección de este artículo.

¿Cómo clonar un objeto en JavaScript usando el Object.assing()?

Una alternativa al operador de propagación es el método Object.assing(). Utilice este método para copiar los valores y propiedades de uno o más objetos de origen a un objeto de destino.

// declaramos un objeto
const usuario = {
  nombre: "John Doe",
  edad: 14,
  verificado: false
};

// clonamos el objeto usando Object.assing()
let clonUsuario = Object.assign({}, usuario);

console.log(clonUsuario); 
// {nombre: 'John Doe', edad: 14, verificado: false}

Ya no se hace referencia al objeto, lo que significa que cambiar el valor del objeto no afectará al objeto original.

// clonamos el objeto usando Object.assing()
let clonUsuario = Object.assign({}, usuario);

// cambiamos un valor del objeto clonado
clonUsuario.nombre = "Jane Doe"

console.log(clonUsuario.nombre); // 'Jane Doe'
console.log(clonUsuario); // {nombre: 'Jane Doe', edad: 14, verificado: false}

Cuando verifica el valor del nombre en el objeto original o en todo el objeto, notará que no se ve afectado.

console.log(usuario.nombre); // 'John Doe'
console.log(usuario); // {nombre: 'John Doe', edad: 14, verificado: false}

Nota: Solo puede utilizar el método Object.assign() para hacer una copia superficial de un objeto, no funciona con propiedades de objetos más profundos. Lo entenderás cuando lleguemos a la última sección de este artículo.

¿Cómo clonar un objeto en JavaScript usando el JSON.parse()?

El método final es JSON.parse(). Utilizará este método junto con JSON.stringify(). Puedes usar esto para clonar profundamente, pero tiene algunas desventajas. Primero, veamos cómo funciona.

// declaramos un objeto
const usuario = {
  nombre: "John Doe",
  edad: 14,
  verificado: false
};

// clonamos el objeto usando JSON.parse()
let clonUsuario = JSON.parse(JSON.stringify(usuario));

console.log(clonUsuario); 
// {nombre: 'John Doe', edad: 14, verificado: false}

Además, al igual que los métodos anteriores, ya no se hace referencia al objeto original. Esto significa que puede cambiar un valor en el nuevo objeto sin afectar el objeto original.

// clonamos el objeto usando JSON.parse()
let clonUsuario = JSON.parse(JSON.stringify(usuario));

// cambiamos un valor del objeto clonUsuario
clonUsuario.nombre = "Jane Doe"

console.log(clonUsuario.nombre); // 'Jane Doe'
console.log(clonUsuario); // {nombre: 'Jane Doe', edad: 14, verificado: false}

Cuando verifica el valor del nombre en el objeto original o en todo el objeto, notará que no se ve afectado.

console.log(usuario.nombre); // 'John Doe'
console.log(usuario); // {nombre: 'John Doe', edad: 14, verifido: false}

Nota: Este método se puede utilizar para la clonación profunda, pero no será la mejor opción porque no funciona con propiedades de que almacenan funciones o símbolos.

Exploremos ahora la clonación superficial y profunda y cómo puede utilizar el método JSON.parse() para realizar una clonación profunda. También aprenderás por qué no es la mejor opción.

Clonación superficial vs. clonación profunda

Hasta ahora, el ejemplo utilizado en este artículo es un objeto básico con un solo nivel. Esto significa que sólo hemos realizado clones superficiales. Pero cuando un objeto tiene más de un nivel, se le pedirá que realice una clonación profunda.

// objeto superficial
const usuario = {
  nombre: "John Doe",
  edad: 14,
  verificado: false
};

// objeto profundo
const usuario = {
  nombre: "John Doe",
  edad: 14,
  estado: {
    verificado: false,
  }
};

Observe que el objeto profundo tiene más de un nivel porque hay otro objeto en el objeto usuario. Un objeto profundo puede tener tantos niveles como quieras.

Nota: Cuando utiliza el operador de propagación o el método Object.assign() para clonar un objeto profundo, se hará referencia a los objetos más profundos.

const usuario = {
  nombre: "John Doe",
  edad: 14,
  estado: {
    verificado: false,
  }
};

// clanamos el objeto usando el operador de propagación 
let clonUsuario = { ...usuario };

// cambiamos un valor de clonUsuario
clonUsuario.estado.verificado = true;

console.log(clonUsuario); 
// {nombre: 'John Doe', edad: 14, estado: {verificado: true}}
console.log(usuario); 
// {nombre: 'John Doe', edad: 14, estado: {verificado: true}}

Notarás que tanto el objeto original como el nuevo se ven afectados porque cuando usas el operador de propagación o el método Object.assign() para clonar un objeto profundo, se hará referencia a los objetos más profundos.

¿Cómo podemos solucionar este problema?

Puede utilizar el método JSON.parse() y todo funcionará bien.

const usuario = {
  nombre: "John Doe",
  edad: 14,
  estado: {
    verificado: false,
  }
};

// clonamos el objeto usando JSON.parse()
let clonUsuario = JSON.parse(JSON.stringify(usuario));

// cambiamos un valor de clonUsuario
clonUsuario.estado.verificado = true;

console.log(clonUsuario); 
// {nombre: 'John Doe', edad: 14, estado: {verificado: true}}
console.log(usuario); 
// {nombre: 'John Doe', edad: 14, estado: {verificado: false}}

Pero hay un problema con este método. El problema es que puedes perder tus datos. ¿Cómo?

JSON.stringify() funciona muy bien con tipos de datos primitivos como números, cadenas o booleanos, y eso es lo que has visto en nuestros ejemplos anteriores. Pero a veces, JSON.stringify() es impredecible si no se conoce algunos valores y cómo se los maneja.

Por ejemplo, no funciona con funciones, símbolos o valores undefined. También cambia otros valores como NaN e Infinity a null, rompiendo tu código. Cuando tenga una función, símbolo o valor undefined, devolverá un par clave-valor vacío y lo omitirá.

const usuario = {
  nombre: "John Doe",
  edad: 14,
  estado: {
    verificado: false,
    metodo: Symbol(),
    titulo: undefined
  }
};

// clonamos el objeto usando Object.parse()
let clonUsuario = JSON.parse(JSON.stringify(userDetails));

Todo parece funcionar bien, pero para el nuevo objeto, JSON.stringify() no devolverá ningún par clave-valor para los valores undefinedysymbol.

console.log(clonUsuario); 

// salida
{
  nombre: "John Doe",
  edad: 14,
  estado: {
    verificado: false
  }
};

Esto significa que debes tener cuidado. La mejor opción para implementar la clonación profunda será utilizar Lodash. Entonces puede estar seguro de que no se perderá ninguno de sus datos.

const usuario = {
  nombre: "John Doe",
  edad: 14,
  estado: {
    verificado: false,
    metodo: Symbol(),
    titulo: undefined
  }
};

console.log(_.cloneDeep(usuario));

Para finalizar...

Este artículo le ha enseñado cómo clonar un objeto en JavaScript utilizando tres métodos principales. Has visto cómo funcionan esos métodos y cuándo utilizar cada uno de ellos. También aprendiste sobre la clonación profunda.

Puede leer este artículo para comprender por qué JSON.parse(JSON.stringify()) es una mala práctica para clonar un objeto en JavaScript.

¡Feliz codificación!

Si estás trabajando en un proyecto de desarrollo web, establecer un color de fondo agradable puede darle al sitio web un aspecto más atractivo.

Para establecer un color de fondo para un div o elemento parecido en CSS, utiliza la propiedad background-color.

Al configurar la propiedad, background-colortu creatividad es el límite en cuanto hasta dónde quieres llegar.

Entonces, en este artículo, te mostraré cómo puedes configurar la propiedad background-color.

Cómo configurar background-color con nombres de color

Con los colores con nombre, puede establecer el color de fondo incorporando la propiedad background-color y asignándole un valor expresado en un nombre de color como red, green, blue, etc.

div {
   background: green;
}

Puede utilizar los siguientes estilos para que la página web se vea mejor. Simplemente, establezca un ancho y alto para el div, para que el background-color pueda tener efecto:

body {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
   background-color: #d3d3d3;
 }

div {
   background: green;
 }

Los navegadores modernos reconocen alrededor de 147 colores, por lo que todavía su uso es un poco limitado.

Cómo configurar background-color con colores hexadecimales

Con valores hexadecimales, puedes establecer un color de fondo para un div o cualquier otro elemento con un total de 6 caracteres.

Los colores hexadecimales comienzan con el signo de numeral (#), cualquier número del 0 al 9 y, finalmente, cualquier letra de la A a la F.

Los primeros 2 valores representan el rojo, los 2 siguientes representan el verde y los 2 últimos representan el azul.

Con valores hexadecimales, puedes sumergirte profundamente en el círculo cromático e incluso usar colores que nadie ha usado nunca.

div {
   background: #2ecc71;
}

Cómo configurar background-color con colores RGB

RGB significa Red (Rojo), Green (Verde) y Blue (Azul).

Para configurar el color de fondo con RGB, especifica la cantidad de rojo, verde y azul que desea con números entre 0 y 255.

div {
   background: rgb(220, 20, 60);
}

RGB también tiene una variación llamada RGBA. La última A significa alfa y te permite determinar qué tan opaco quieres que sea el color.

El alfa toma un valor de 0,0 a 1,0. 0,0 significa 0% de opacidad, 0,5 significa 50% de opacidad y 1,0 significa 100% de opacidad.

div {
    background: rgb(220, 20, 60, 0.6);
}

Cómo configurar background-color con colores HSL

HSL significa Hue (Tono), Saturation (Saturación) y Lightness (Luminosidad). Es la forma más dinámica dentro de las formas en que puedes especificar un color de fondo para un div u otros elementos.

• Hue (Tono) representa la rueda de colores en 360°. 0° es rojo, 120° es verde y 240° es azul.
• Saturation (Saturación) es la cantidad de gris en el color expresada en porcentajes. 0% es el tono de gris y 100% es el mismo color.
• Como su nombre lo indica, la lightness (luminosidad) es la cantidad de oscuridad y luminosidad del color expresada como porcentaje. 0% es negro y 100% es blanco.

div {
   background: hsl(16, 100%, 50%);
 }

Conclusión

Dado que puedes aplicar colores de 4 maneras diferentes, debes preguntarte cuál deberías usar.

Cuando usas colores con nombre, estás un poco limitado en cuanto a hasta dónde puedes llegar al aplicar diferentes tonos de colores.

Cada color, como rojo, verde, azul, amarillo o cualquier otro color, tiene muchas variaciones a las que no tendrás acceso con colores con nombre.

Sólo puedes acceder a unos 147 colores predefinidos reconocidos por los navegadores. Los colores hexadecimales, por otro lado, son muy dinámicos. Se utilizan principalmente entre desarrolladores y la creatividad es el límite. Estos colores hexadecimales te permiten utilizar diferentes tonos del mismo color.

Los colores RGB son tan dinámicos como los colores hexadecimales. Puede especificar la cantidad de rojo, verde y azul de 0 a 255, y también puede usar el valor alfa agregado para especificar la transparencia del color.

HSL es el más dinámico de todos ellos. Puede especificar exactamente el color de 0 a 360 grados en el círculo cromático, establecer la saturación y la oscuridad como porcentaje y establecer la opacidad en cualquier valor entre 0,0 y 1,0.

Por lo tanto, decidir cuál usar entre colores con nombre, hexadecimales, RGB y HSL depende de usted y de qué tan creativo quiera ser y cuáles sean las necesidades de su proyecto.

Gracias por leer.

Un diccionario en Python es un grupo de elementos desordenados, cada uno de los cuales tiene un conjunto único de claves y valores.

Se puede usar como clave cualquier tipo de dato inmutable, como una cadena, un número o una tupla. Sirve como identificador único de valor en el diccionario. El valor es repetible y aplicable a todo tipo de datos.

En Python, los diccionarios se indican con llaves { }, y cada par clave-valor está delimitado por dos puntos :. Una coma separa cada par clave-valor. A continuación se muestra un ejemplo de un diccionario básico:

mi_diccionario = {"piña": 12, "manzana": 30, "naranja": 5, "palta":7}

En este ejemplo, "piña", "manzana", "naranja" y "palta" son las claves y 12, 30, 5 y 7 son los valores correspondientes.

Veremos como podemos agregar un único par clave-valor a un diccionario usando el método update(), y finalmente aprenderemos a usar el constructor dict().

¿Cómo agregar un único par clave-valor a un diccionario?

Para agregar un único par clave-valor a un diccionario en Python, podemos usar el siguiente código como ejemplo:

my_diccionario = {'a': 1, 'b': 2}
my_diccionario['c'] = 3

El código anterior creará un diccionario my_diccionario con dos pares clave-valor. Luego agregamos un nuevo par clave-valor c:3 al diccionario simplemente asignando el valor 3 a la clave c. Después de ejecutar el código, el diccionario my_diccionario ahora contendrá el par clave-valor c:3.

Podemos verificar esto imprimiendo el diccionario:

print(my_diccionario)

Obtenemos como salida:

{'a': 1, 'b': 2, 'c': 3}

Si ya existe una clave c en el diccionario, el valor se actualizará a 3.

¿Cómo agregar múltiples pares clave-valor con el método update()?

Se pueden agregar de manera simultánea varios pares clave-valor a un diccionario usando método update(). Este método inserta nuevas entradas en el diccionario original desde otro diccionario o un iterable de pares clave-valor como entrada. El valor de una clave existente en el diccionario original se actualizará con el nuevo valor.

Ahora veamos un ejemplo usando el método update() para agregar múltiples entradas a un diccionario:

my_diccionario = {'a': 1, 'b': 2}
nuevos_datos = {'c': 3, 'd': 4}

my_diccionario.update(nuevos_datos)

print(my_diccionario)

Salida:

{'a': 1, 'b': 2, 'c': 3, 'd': 4}

Otra cosa divertida de este método es que podemos usarupdate() con un iterable de pares clave-valor, como una lista de tuplas. Veamos esto en acción:

my_diccionario = {'a': 1, 'b': 2}
nuevos_datos = [('c', 3), ('d', 4)]

my_diccionario.update(nuevos_datos)

print(my_diccionario)

La salida será la misma obtenida en el ejemplo anterior:

{'a': 1, 'b': 2, 'c': 3, 'd': 4}

¿Cómo actualizar un diccionario usando el constructor dict()?

En Python, un diccionario se puede actualizar o crear desde cero utilizando el constructor dict(). Al pasar un diccionario que contiene el nuevo par clave-valor como argumento al constructor dict(), podemos agregar un único par clave-valor a un diccionario existente.

Ejemplo:

my_diccionario = {'a': 1, 'b': 2, 'c': 3}
nuevo_diccionario = dict(my_diccionario, d=4)

print(nuevo_diccionario)

Salida:

{'a': 1, 'b': 2, 'c': 3, 'd': 4}	

En este ejemplo, contamos con el diccionario my_diccionario con 3 pares clave-valor. Luego creamos un nuevo diccionario llamado nuevo_diccionario usando el constructor dict() y agregamos el par clave-valor d:4.

Tenga en cuenta que también se puede crear un nuevo diccionario utilizando el constructor dict() a partir de una lista de pares clave-valor, donde cada par está representado por una tupla.

mi_lista = [('a', 1), ('b', 2), ('c', 3)]
mi_diccionario = dict(mi_lista)

print(mi_diccionario)

Salida:

{'a': 1, 'b': 2, 'c': 3}

Conclusión

En Python los diccionarios se usan con frecuencia para almacenar datos y proporcionar acceso rápido a ellos mediante una clave única. Resultan útiles cuando se trabajan con listas o tuplas donde necesitamos acceder a datos utilizando un identificador único en lugar de una secuencia.

Conecta conmigo en Twitter y/o Linkedln. Puedes suscribirte también a mi canal en YouTube.

¡Feliz codificación!

En JavaScript, es importante comprobar si una cadena está vacía o nula antes de realizar cualquier operación. Intentar operar con una cadena vacía o nula puede provocar errores, bugs y resultados inesperados.

En este tutorial, exploraremos las diferentes formas de verificar si una cadena está vacía o nula en JavaScript y algunas de las mejores prácticas para hacerlo.

¿Qué son las cadenas vacías y nulas en JavaScript?

Una cadena vacía es una cadena que no tiene caracteres, mientras que una cadena nula es una cadena que no tiene ningún valor asignado. Es importante diferenciar entre ambos, ya que no son lo mismo.

Por ejemplo, tiene un formulario donde un usuario puede ingresar su nombre. Si el usuario no ingresa nada, el valor del campo de entrada será una cadena vacía. Sin embargo, el valor será nulo si ni siquiera se crea el campo de entrada.

¿Cómo verificar si una cadena esta vacía o es nula?

JavaScript tiene varias formas de comprobar si una cadena está vacía o nula. Exploremos algunos de ellos.

Usando un condicional if y el operador typeof

Una forma de comprobar si hay una cadena vacía o nula es utilizar la instrucción if y el operador typeof. He aquí un ejemplo:

let cadena = "";

if (typeof cadena === "string" && cadena.length === 0) {
  console.log("La cadena esta vacía");
} else if (cadena === null) {
  console.log("La cadena es nula");
} else {
  console.log("La cadena no esta vacía o nula");
}

En este ejemplo, estamos comprobando si la variable cadena es de tipo string y si su longitud es cero. Si es así, entonces sabemos que es una cadena vacía. Si la variable cadena es nula, entonces sabemos que es una cadena nula. De lo contrario, sabemos que la cadena no está vacía ni es nula.

Usando la propiedad length

Otra forma de comprobar si hay una cadena vacía es utilizar la propiedad length. He aquí un ejemplo:

let cadena = "";

if (cadena.length === 0) {
  console.log("La cadena esta vacía");
} else {
  console.log("La cadena no esta vacía");
}

En este ejemplo, estamos comprobando si la longitud de la variable cadena es cero. Si es así, entonces sabemos que es una cadena vacía. De lo contrario, sabemos que la cadena no está vacía.

Usando el método trim()

A veces, una cadena puede contener espacios en blanco que hacen que parezca que no está vacía incluso cuando lo está. En tales casos, podemos utilizar el método trim() para eliminar los espacios en blanco iniciales o finales antes de comprobar si están vacíos. He aquí un ejemplo:

let cadena = "   ";

if (cadena.trim().length === 0) {
  console.log("La cadena esta vacía");
} else {
  console.log("La cadena no esta vacía");
}

En este ejemplo, primero usamos el método trim() para eliminar los espacios en blanco iniciales o finales de la variable cadena y luego verificamos si la cadena resultante tiene longitud cero. Si es así, entonces sabemos que la cadena está vacía. De lo contrario, sabemos que la cadena no está vacía.

Buenas prácticas para verificar si una cadena esta vacía o nula

A continuación se muestran algunas prácticas recomendadas a seguir al comprobar si hay cadenas vacías o nulas en JavaScript:

• Utilice siempre triple igual (===) al comparar una cadena con null. Esto garantiza que los tipos estén verificados y que no se compare accidentalmente una cadena con el número 0 o false.
• Utilice igualdad estricta (===) cuando busque una cadena vacía. Esto garantiza que no compare una cadena vacía con una cadena que contenga solo caracteres de espacio en blanco.
• Utilice el método trim() para eliminar los espacios en blanco iniciales y finales antes de buscar una cadena vacía. Esto garantiza que las cadenas con solo espacios en blanco también se consideren vacías.
• Utilice expresiones regulares para comprobaciones más complejas, como comprobar una cadena que solo contenga dígitos o comprobar una cadena que coincida con un patrón determinado.

Por ejemplo:

let cadena = "12345";
let digitosRegExp = /^\d+$/;

if (digitosRegExp.test(cadena)) {
  console.log("La cadena contiene solo dígitos");
} else {
  console.log("La cadena no contiene solo dígitos");
}

Conclusión

En este artículo, hemos aprendido cómo comprobar si una cadena está vacía o nula en JavaScript. Hemos explorado diferentes métodos para hacerlo, como usar la declaración if y typeof, la propiedad length y el método trim().

Si desea obtener más información sobre JavaScript y el desarrollo web, explore más de 200 artículos de expertos sobre desarrollo web escritos por mí y también consulte mi blog para obtener contenido más cautivador.

Feliz codificación.

Pero los archivos JSON no soportan comentarios oficialmente. Esto hace que proporcionar contexto o explicación adicional para estos datos sea un desafío.

Este artículo te mostrará cómo incluir comentarios en archivos JSON y por qué JSON no admite comentarios de forma nativa.

¿Por qué JSON no soporta comentarios?

Según la especificación JSON, un documento JSON sólo debe contener estructuras de datos como arreglos y objetos y no incluir comentarios. Esto se debe a que JSON pretende ser un formato de datos simple y fácilmente analizable que se pueda procesar de manera rápida y eficiente.

Los comentarios, si bien son útiles para proporcionar contexto o explicación adicional para los humanos, pueden agregar complejidad al proceso de análisis. Esto ralentiza el rendimiento y aumenta el riesgo de errores.

La razón principal por la que JSON no admite comentarios es que su creador, Douglas Crockford, los eliminó deliberadamente del formato para evitar el uso indebido y mantenerlo como un formato exclusivamente de datos.

Crockford observó que algunas personas usaban comentarios para almacenar directivas de análisis, lo que podría romper la compatibilidad entre diferentes sistemas. De ahí la decisión de eliminar los comentarios para mantener la simplicidad y coherencia del formato en varios lenguajes y entornos de programación.

Como resultado, la única opción para agregar comentarios a un archivo JSON es utilizar una solución alternativa, como utilizar elementos personalizados para almacenar comentarios.

¿Cómo agregar comentarios a un archivo JSON?

Cuando agregas comentarios en el formato //, # o /* */, que se utilizan en lenguajes de programación populares, notará el error Comments are not permitted in JSON ("No se permiten comentarios en JSON").

Entonces, ¿cómo puedo agregar comentarios a mi archivo JSON?

La única forma de hacerlo es incluir comentarios como pares de datos en un archivo JSON. No es una práctica comúnmente utilizada ni recomendada, pero técnicamente es la mejor manera de agregar comentarios a su archivo JSON.

Crea un elemento personalizado dentro de tu objeto JSON, como "_comentario", para distinguirlos del resto de los datos.

{
    "_comentario": "escribe acá tu comentario JSON"
    "nombre": "John Doe",
    "edad": 35,
    "ciudad": "New York",
    "esCasado": true,
    "ocupacion": "Ingeniero de Software",
}

Nota: No es obligatorio utilizar guiones bajos. Puedes decidir utilizar dos barras, como “//comentario” o cualquier otro carácter permitido. El objetivo es dejar claro que se trata de un comentario.

Es importante tener en cuenta que este enfoque puede hacer que el archivo JSON sea más complejo y más difícil de analizar. Pero si los comentarios se agregan como elementos personalizados, se recibirán y procesarán como cualquier otro dato en JSON en el lado del servidor.

Ahora sabes técnicamente cómo agregar comentarios a tu archivo JSON. Pero, ¿cómo se pueden agregar varios comentarios? Esto es posible, pero debes recordar que JSON no permite claves de objetos duplicadas. Debe incluir letras o números únicos en el elemento de comentario, asegurándose de que sea válido y distinguible de otros elementos en el archivo JSON.

{
    "_comentario1": "Estos son datos básicos",
    "nombre": "John Doe",
    "edad": 35,
    "ciudad": "New York",
    "_comentario2": "Información marital",
    "esCasado": true,
    "nombreEsposa": "Jane Doe"
}

Cuando tengas objetos JSON anidados, puedes utilizar claves de objetos similares:

{
    "_comentario": "Estos son datos básicos",
    "nombre": "John Doe",
    "edad": 35,
    "ciudad": "New York",
    "informacionMarital": {
        "_comentario": "Información Marital",
        "esCasado": true,
        "nombreEsposa": "Jane Doe"
    }
}

Conclusión

Ahora sabes cómo agregar comentarios a tu archivo JSON. Pero debido a que estos comentarios también se procesan y se puede acceder a ellos, debes tener cuidado al agregar comentarios a archivos JSON utilizando elementos personalizados.

Gracias por leer y feliz codificación.

Pero ¿por qué es eso relevante? JavaScript se volvió mucho más rápido con un nuevo entorno de ejecución de JavaScript llamado Bun, que ahora está listo para producción con su versión 1.0.

¿Cómo y por qué es más rápido que Node.js? Me vienen a la mente muchas preguntas.

Responderé algunas de esas preguntas en este artículo. Y lo haré rápidamente, ya que ahora soy más rápido, al igual que JavaScript, que se prepara con Bun 1.0.

Bun es un conjunto de herramientas rápidas todo en uno para ejecutar, crear, probar y depurar JavaScript y TypeScript, desde un único archivo hasta una aplicación full-stack.

A continuación algunas cosas que podemos hacer con Bun:

Ejecuta tu código más rápido con Bun

Ahora no necesitamos herramientas como npm, pnpm o yarn porque Bun es 17 veces mas rápido. Eche un vistazo a los datos mostrados a continuación:

Bun tarda solo 0,36 segundos en compilar su código, mientras que tarda unos 6,44 segundos en el caso de pnpm, 10,58 segundos con npm y 12,08 segundos con yarn.

Bun soporta hot reloading

Bun soporta hot reloading (recarga en caliente) desde el primer momento, por lo que no necesita herramientas como Nodemon. Actualizará automáticamente el servidor cuando se ejecute JavaScript o TypeScript.

Puede reemplazar el comando npm run con bun run para ahorrar más de 150 ms milisegundos cada vez que ejecuta un comando.

Aquí un gráfico completo:

Según el cuadro anterior, el uso de npm tarda unos 176 ms en ejecutarse, yarn tarda unos 131 ms. En el caso de pnpm, se necesitan 259 ms. Sin embargo, en el caso de Bun, se necesitan unos 7 ms. Eso es rápido, ¿no?

Bun es un empaquetador JavaScript

Bun también es un empaquetador de JavaScript con el mejor rendimiento de su clase y una API compatible con ESBuild, por lo que no necesitamos cosas como:

• ESBuild
• Webpack
• Parcel, .parcelrc
• Rollup, rollup.config.js

Bun ahora soporta Next.js, Remix, Nuxt, Astro, SvelteKit, Nest, SolidStart y Vite.

Bun es compatible con ESM y CommonJS

Otra gran característica de Bun es que podemos usar módulos ES6 y CommonJs juntos en el mismo archivo, lo que no era posible en Node.js.

Puedes usar import y require() en el mismo archivo:

import lodash from "lodash";
const _ = require("underscore");

Aparte de eso, Bun tiene soporte integrado para las API estándar web que están disponibles en los navegadores, como fetch, junto con la propia API de Bun como Bun.file() para leer un archivo de forma diferida y Bun.Write() para escribir un archivo al sistema de archivos local, que es mucho más simple que Node.js.

Ejemplo Bun.file()

const archivo = Bun.file("package.json");
const contenido = await archivo.text();

El código anterior leerá el contenido de un archivo package.json y transferirá su contenido a una nueva variable llamada contenido.

Ejemplo Bun.write()

await Bun.write("index.html", "<html/>");
await Bun.write("index.html", Buffer.from("<html/>"));
await Bun.write("index.html", Bun.file("home.html"));
await Bun.write("index.html", 
await fetch("https://ejemplo.com/"));

En el código anterior, Bun.write() escribirá la cadena "<html/>", o copiará el contenido del archivo home.html en el archivo index.html. Si tenemos que recuperar datos, obtendrá los resultados de una API web externa y escribirá el contenido en un archivo index.html.

¿Por que Bun es tan rápido?

Bun es rápido porque usa el motor JavaScriptCore, mientras que Node.js usa el motor JavaScript V8. El primero se ha optimizado para un tiempo de inicio más rápido.

Si deseas hacer las cosas más rápido, debería considerar reemplazar Node.js con Bun.

¿Cómo empezar a usar Bun?

Puedes instalar Bun en sistemas MacOS y Linux usando npm:

npm install -g bun

Ahora ya está todo listo. Para instalar un paquete npm, haz esto:

bun install <nombre-paquete>

Para iniciar una aplicación, haz esto:

bun run dev

Para todo lo que pueda necesitar solo reemplace npm con bun.

Sin embargo, Bun sólo está listo para producción en los sistemas operativos MacOS y Linux. La versión de Windows aún es experimental. Por el momento, solo se admite el entorno de ejecución de JavaScript para Windows, y no el administrador de paquetes, el empaquetador ni el entorno de pruebas. Puedes leer más al respecto aquí.

Conclusión

Este artículo muestra cómo puedes utilizar Bun como alternativa a Node.js y acelerar su tiempo de desarrollo.

También puedes ver mi vídeo sobre El asesino de Node.js está aquí — Primer vistazo a Bun 1.0 (en inglés).

Gracias por leer.

Explicaré la diferencia entre estos dos enfoques en este artículo.

Con la notación de punto y de corchetes puedes:

• Acceder al valor de una propiedad por su clave.
• Modificar el valor de una propiedad existente por su clave.
• Agregar una nueva propiedad a un objeto.

Pero estas dos formas acceden a las propiedades de manera diferente y existen diferentes escenarios en los que una es mejor que la otra.

Notación de punto

La notación de punto implica el uso de un punto . y una clave para acceder a una propiedad. Aquí esta la sintaxis:

objeto.clave

Tienes el punto y luego la clave de la propiedad a la que se desea acceder. Esta expresión devolverá el valor de la propiedad. Veamos un ejemplo:

const objeto = {
  nombre: "hola mundo",
  edad: 80,
  lenguaje: "javascript",
}

const resultado = objeto.nombre
// hola mundo

Al usar el punto y la clave nombre, .nombre obtenemos "hola mundo", que es el valor de la propiedad nombre.

También puede usar esta notación para modificar una propiedad existente:

const objeto = {
  nombre: "hola mundo",
  edad: 80,
  lenguaje: "javascript",
}

objeto.edad = 100

console.log(objeto)
// {
//   nombre: "hola mundo",
//   edad: 100,
//   lenguaje: "javascript"
// }

En este ejemplo modificamos la propiedad edad.

Además, es posible agregar una nueva propiedad siguiendo este enfoque:

const objeto = {
  nombre: "hola mundo",
  edad: 80,
  lenguaje: "javascript",
}

objeto.localizacion = "Mercurio"

console.log(objeto)
// {
//   nombre: "hola mundo",
//   edad: 80,
//   lenguaje: "javascript",
//   localizacion: "Mercurio"
// }

Aquí agregamos la propiedad localizacion.

Este enfoque tiene limitaciones que veremos pronto. A continuación, comprendamos como funciona el enfoque de notación entre corchetes.

Existe una versión en video (en inglés) sobre este tema si usted esta interesado.

Notación de Corchetes

El enfoque de notación de corchetes implica el uso de corchetes, en los que se tiene una expresión que se evalúa como un valor. Ese valor sirve como clave para acceder a la propiedad. La sintaxis es la siguiente:

objeto[expresion]

La expresión entre corchetes se evalúa como una clave para la propiedad a la que dese acceder y esta expresión devolverá el valor de la propiedad. Veamos un ejemplo:

const objeto = {
  nombre: "hola mundo",
  edad: 80,
  lenguaje: "javascript",
}

const resultado = objeto["nombre"]
// hola mundo

Al usar corchetes y la expresión de cadena "nombre", ["nombre"], obtenemos hola mundo que es el valor de la propiedad nombre.

También se puede usar este enfoque para modificar una propiedad existente:

const objeto = {
  nombre: "hola mundo",
  edad: 80,
  lenguaje: "javascript",
}

objeto["edad"] = 100

console.log(objeto)
// {
//   nombre: "hola mundo",
//   edad: 100,
//   lenguaje: "javascript"
// }

En este ejemplo modificamos la propiedad edad usando la expresión "edad" como cadena.

Es posible agregar una nueva propiedad usando corchetes de la siguiente manera:

const objeto = {
  nombre: "hola mundo",
  edad: 80,
  lenguaje: "javascript",
}

objeto["localizacion"] = "Mercurio"

console.log(objeto)
// {
//   nombre: "hola mundo",
//   edad: 80,
//   lenguaje: "javascript",
//   localizacion: "Mercurio"
// }

Acá agregamos una nueva propiedad al objeto llamada localizacion usando la expresión [localizacion] como cadena.

Diferencias entre la Notación de Punto y la Notación de Corchetes

La notación de punto solo permite claves estáticas, mientras que la notación de corchetes acepta claves dinámicas. La clave estática significa que la clave se escribe directamente, mientras que la clave dinámica significa que la clave se evalúa a partir de una expresión.

Veamos algunos ejemplos

Usando ambos enfoques para acceder a las propiedades

Empecemos por la notación de punto:

const objeto = {
  nombre: "hola mundo",
  edad: 80,
  lenguaje: "javascript",
}

const miClave = "lenguaje"

const resultado = objeto.miClave
// undefined

En este ejemplo asignamos el valor "lenguaje" a la variable miClave. Lo que se esperaría es que cuando usamos la notación de punto, como objeto.miClave, miClave se reemplace por lenguaje. Entonces se leería como objeto.lenguaje y devolvería javascript.

Pero eso no es lo que sucede. En cambio, el resultado es undefined.

La razón de esto es que la notación de punto solo acepta claves estáticas. Entonces, cuando hacemos objeto.miClave, JavaScript busca la propiedad con la clave miClave en la variable objeto. Pero esa propiedad no existe, por lo que devolvemos undefined.

La notación de corchetes, por otro lado, permite claves dinámicas. Como esta notación acepta expresiones, puede utilizar cualquier expresión que se evalúe como un valor. Podría ser:

• hola + Eyy evalúa a la clave holaEyy.
• returnClave() que se evalúa como clave.
• isVerdad ? "claveVerdad" : "claveFalso" evalúa como claveVerdad o como claveFalso para la clave.
• variable evalúa según el valor de la variable para la clave.

Por lo tanto usando el ejemplo anterior, podemos tener lo siguiente:

const objeto = {
  nombre: "hola mundo",
  edad: 80,
  lenguaje: "javascript",
}

const miClave = "lenguaje"

const resultado = objeto[miClave]
// javascript

La expresión que pasamos entre corchetes es miClave, que es una variable. Esta expresión se evalúa como lenguaje, que es el valor de la variable. Usando este valor, los corchetes pueden obtener el valor de la propiedad que es javascript.

Pero si pasa una expresión de cadena como miClave quedará como undefined:

const objeto = {
  nombre: "hola mundo",
  edad: 80,
  lenguaje: "javascript",
}

const miClave = "lenguaje"

const resultado = objeto["miClave"]
// undefined

Esto se debe a que la expresión de cadena miClave se evalúa como el valor miClave que sirve como clave para acceder a la propiedad. Como no hay una clave miClave en objeto, el valor devuelto será undefined.

Usando ambos enfoques para modificar propiedades

Empecemos con la notación de punto:

const objeto = {
  nombre: "hola mundo",
  edad: 80,
  lenguaje: "javascript",
}

const miClave = "edad"

objeto.miClave = 100

console.log(objeto)
// {
//   nombre: "hola mundo",
//   edad: 80,
//   lenguaje: "javascript",
//   miClave: 100
// }

Tenemos miClave con el valor "edad". Al intentar hacer objeto.miClave = 100 para modificar la propiedad edad, no funcionará. Esto se debe a que la notación de puntos acepta una clave estatática. Entonces objeto.miClave toma miClave como clave. Como miClave no existe en la declaración del objeto esta declaración se agrega. Entonces, objeto tiene una nueva clave, miClave con el valor de 100.

El comportamiento es diferente con la notación de corchetes:

const objeto = {
  nombre: "hola mundo",
  edad: 80,
  lenguaje: "javascript",
}

const miClave = "edad"

objeto[miClave] = 100

console.log(objeto)
// {
//   nombre: "hola mundo",
//   edad: 100,
//   lenguaje: "javascript"
// }

En lugar de agregar una nueva propiedad miClave a objeto, el enfoque entre corchetes modifica la propiedad edad. La razón es que pasamos miClave como expresión entre corchetes. Esta expresión como variable, se evalúa como edad que es el valor de la variable. Usando edad como clave, este enfoque modifica el valor de la propiedad edad a 100.

Y si quisiéramos agregar una nueva propiedad usando corchetes, entonces podemos pasar una expresión que devuelva una nueva clave que no existe, por ejemplo:

const objeto = {
  nombre: "hola mundo",
  edad: 80,
  lenguaje: "javascript",
}

const miClave = "localizacion"

objeto[miClave] = "Mercurio"

console.log(objeto)
// {
//   nombre: "hola mundo",
//   edad: 100,
//   lenguaje: "javascript",
//   localizacion: "Mercurio"
// }

La variable miClave contiene un nuevo valor: localizacion. Al pasar esto entre corchetes y asignar un valor de "Mercurio" ahora tenemos una nueva propiedad con par clave-valor localizacion y Mercurio.

¿Debería usar notación de punto o de corchetes?

Hasta ahora, hemos visto cómo funciona cada notación, usando diferentes ejemplos para acceder/modificar propiedades existentes y para agregar nuevas propiedades. Entonces, ¿cuál debería utilizar al escribir código JavaScript?

El principal factor que te ayudará a tomar una decisión es la clave de la propiedad a la que deseas acceder. Si es una clave estática, utilice la notación de punto. Pero si es una clave dinámica (evaluada a partir de una expresión durante el tiempo de ejecución), use la notación de corchetes.

La notación de punto es útil cuando conoce la propiedad de antemano. Simplemente haga objecto.clave para leer/modificar una propiedad existente o para agregar una nueva propiedad.

La notación de corchetes es útil cuando desea acceder dinámicamente a una propiedad. La clave de esta propiedad podría provenir de expresiones como obtenterClave(), "my" + "clave" o claveVariable.

Espero que hayas podido comprender el artículo.

Por favor comparte si te resultó útil.

Cuando se diseña un sitio web o se trabaja en un proyecto, es posible que desees utilizar texto en mayúsculas por varias razones. Tal vez quieras usar una abreviatura o un acrónimo, enfatizar cierto texto o usarlo como encabezado.

Hay varias maneras de poner texto en mayúsculas con HTML. La primera es escribir el texto en mayúsculas directo en el HTML:

<p>TEXTO EN MAYUSCULAS</p>

La segunda forma es utilizar el método de cadenas de JavaScript toUpperCase() y representarlo en el DOM:

const mayusculas = cedena.toUpperCase()

// aqui se muestra en pantalla

La tercera forma, que veremos en este artículo, es usar la propiedad de transformación de texto de CSS:

selector {
  text-transform: uppercase;
}

Esto aplica el estilo de mayúsculas en el elemento seleccionado.

Esta declaración no cambia el contenido del DOM. Por ejemplo, echa un vistazo a este código HTML:

<p class='parrafo'>
  Some text
</p>

Y a este estilo:

.parrafo {
  text-transform: uppercase;
}

En la UI, el texto tendrá un estilo como el siguiente:

Pero en el DOM, el texto sigue siendo el mismo:

Cuando copias el texto en el navegador, el texto original "Some text" se copia en algunos navegadores, pero en otros se copia la versión con estilo.

¿Deberías usar text-transform en CSS u otros métodos?

Si usas mayúsculas por razones de estilo te recomiendo que uses CSS. La razón es que puede haber inconsistencias en la forma en la que los diferentes navegadores y las herramientas del navegador manejan el texto en mayúsculas.

Una de las diferencias es la inconsistencia entre copiar y pegar el texto en diferentes navegadores.

Otra inconsistencia es que algunos lectores de pantalla interpretan el texto en mayúsculas como abreviaturas. Por lo tanto, un texto como "SOME TEXT" se leerá como "S.O.M.E. T.E.X.T.", lo que puede afectar la manera en la que el lector comprende el mensaje.

Sin embargo, vale la pena señalar que algunos lectores de pantalla también interpretan el texto en mayúsculas con CSS como abreviaturas.

Se recomienda mantener los estilos como estilos. Si deseas tener texto en mayúsculas solo por motivos de estilo, usa CSS y deja el texto original en HTML. Pero si usas mayúsculas para abreviaturas o tienes un motivo específico para tener texto en mayúsculas, puedes escribirlo en HTML.

Puedes consultar este tweet sobre mayúsculas sin CSS para ver las discusiones al respecto.