En este tutorial, aprenderemos cómo instalar la interfaz de línea de comandos de Angular (Angular CLI) en el sistema operativo Windows y usarla para crear un nuevo proyecto Angular.

¿Qué es la interfaz de línea de comandos de Angular (Angular CLI)?

La Angular CLI es la herramienta oficial para inicializar y trabajar con proyectos de Angular. Te libra de las molestas configuraciones y herramientas de compilación de TypeScript, Webpack y demás.

Después de instalar la Angular CLI, necesitará ejecutar un comando para generar un proyecto y otro para correrlo usando un servidor local de desarrollo, con el fin de jugar con tu aplicación.

Como la mayoría de herramientas modernas para el frontend en la actualidad, la Angular CLI está construida sobre Node.js.

Node.js es una tecnología del lado del servidor que le permite a los desarrolladores ejecutar código JavaScript en el servidor y compilar aplicaciones web del lado del servidor. Sin embargo, Angular es una tecnología del frontend, por lo que incluso si necesita instalar Node.js en tu máquina de desarrollo, solo es para correr la interfaz de línea de comandos.

Una vez que compile tu aplicación para producción no necesitará Node.js, ya que el empaquetado final solo son HTML, CSS y JavaScript estáticos que pueden ser servidos por cualquier servidor web o un CDN (Content Delivery Network).

Dicho esto, si está construyendo una aplicación web full-stack con Angular, podría necesitar Node.js para crear la parte del backend en el caso de que desee usar JavaScript para el frontend y el backend.

Revise la MEAN Stack - es una arquitectura que incluye Mongo DB, Express (un servidor web y plataforma para API REST construida sobre Node.js) y Angular. Puede leer artículos en internet si quisiera un tutorial paso a paso para empezar con este stack.

En este caso, Node.js es usado para compilar el backend de tu aplicación y puede ser reemplazado por cualquier tecnología del lado del servidor que desee, como PHP, Ruby o Python. Pero Angular no depende de Node.js excepto por tu interfaz de línea de comandos (CLI) y para la instalación de paquetes con npm.

NPM se describe por Node Package Manager (Gestor de Paquetes para Node). Es un registro que hospeda los paquetes para Node y en los años recientes también ha sido usado para publicar paquetes y librerías para en frontend tales como Angular, React, vue.js e inclusive Bootstrap.

Instalar Angular CLI en Windows

Primero, necesita tener instalado Node.js y npm en tu máquina de desarrollo.

Hay varias maneras de hacerlo tales como:

• Usar NVM (Node Version Manager) para instalar y trabajar con múltiples versiones de node en tu sistema.
• Usar el manejador de paquetes oficial de tu sistema operativo.
• Instalarlo desde la página web oficial.

Para hacerlo sencillo usemos el sitio web oficial. Simplemente, visite la página de descargas y descargue los binarios para Windows, luego siga las instrucciones del asistente de instalación.

Puede asegurarse de que Node se encuentra instalado en tu sistema ejecutando el siguiente comando en la interfaz de línea de comandos o terminal, la cual debería mostrar la versión de Node instalada:

$ node -v

Continuando, ejecute el siguiente comando para instalar la Angular CLI:

$ npm install @angular/cli

Después de que el comando termine de ejecutarse exitosamente, debería tener la Angular CLI instalada.

Una Guía Rápida sobre la Angular CLI

Después de instalar la Angular CLI, puede ejecutar muchos comandos. Empecemos por chequear la versión de la CLI instalada:

$ ng version

Un segundo comando que podría necesitar ejecutar es el comando help para obtener una guía de ayuda completa:

$ ng help

La CLI provee los siguientes comandos:

add: Agrega soporte para una librería externa en tu proyecto.

build (b): Compila una aplicación de Angular en un directorio de salida llamado  dist/ en la ruta dada. Debe ser ejecutado dentro del un directorio que contenga un espacio de trabajo.

config: Retorna o establece valores de configuración para Angular.

doc (d): Abre la documentación oficial en el navegador (angular.io) y busca por un término dado.

e2e (e): Compila y sirve una aplicación Angular, luego ejecuta pruebas end-to-end usando Protractor.

generate (g): Genera y/o modifica archivos basándose en un esquema.

help: Lista los comandos disponibles y una descripción corta sobre ellos.

lint (l): Corre las herramientas de formato de código en la aplicación de Angular en una carpeta definida.

new (n): Crea un nuevo espacio de trabajo e inicializa una nueva aplicación Angular.

run: Ejecuta un comando personalizado definido en tu proyecto.

serve (s): Compila y sirve la aplicación, recompilando cuando hay cambios en archivos.

test (t): Ejecuta las pruebas unitarias en un proyecto.

update: Actualiza tu aplicación y sus dependencias. Vea https://update.angular.io/ para más referencias.

version (v): Muestra la versión de la interfaz de línea de comandos de Angular.

xi18n: Extrae los mensajes de localización (i18n) del código fuente.

Generar un Proyecto.

Puede usar la Angular CLI para generar rápidamente un nuevo proyecto Angular mediante la ejecución del siguiente comando:

$ ng new frontend

Nota: frontend es el nombre del proyecto. Puede, por supuesto, escoger cualquier nombre válido para tu proyecto. Como crearemos una aplicación full-stack estoy usando frontend como nombre para la aplicación frontend.

Como mencioné antes, la CLI preguntará si desea añadir enrutamiento a la aplicación, para lo cual puede responder y (Yes- Sí) o n (No) que es la opción por defecto. También se le preguntará acerca del formato de hoja de estilos que quiere usar (como CSS). Escoge tu opción preferida y presione Enter para continuar.

Después lo realizado tendrá tu proyecto creado con una estructura de directorios y un conjunto de configuraciones y archivos de código. Estos serán la mayoría en formato TypeScript y JSON. Veamos el papel de cada archivo:

• /e2e/: contiene los test end-to-end (simulan el comportamiento de un usuario) para el sitio web
• /node_modules/: todas las librerías de terceros son instaladas en esta carpeta usando el comando npm install
• /src/: contiene el código fuente de la aplicación. La mayoría del trabajo se realiza aquí
• /app/: contiene módulos y componentes
• /assets/: contiene recursos estáticos como imágenes, íconos y estilos
• /environments/: contiene configuraciones específicas de ambiente (como producción y/o desarrollo)
• browserslist: necesario para el soporte CSS para el autoprefixer
• favicon.ico: el archivo para el favicon
• index.html: el archivo HTML principal
• karma.conf.js: archivo de configuración de Karma (herramienta de prueba)
• main.ts: el archivo de inicio principal desde donde se carga el AppModule
• polyfills.ts: polyfills (fragmento de código que se utiliza para proporcionar una funcionalidad moderna en navegadores antiguos que no lo admiten de forma nativa) requeridos por Angular
• styles.css: la hoja de estilos global para el proyecto
• test.ts: es un archivo de configuración para Karma
• tsconfig.*.json: archivos de configuración para TypeScript
• angular.json: contiene las configuraciones para la línea de comandos de Angular
• package.json: contiene la información básica del proyecto (nombre, descripción y dependencias)
• README.md: un archivo markdown que contiene una descripción del proyecto
• tsconfig.json: archivo de configuración para TypeScript
• tslint.json: archivos de configuración para TSlint (una herramienta de análisis estático de código)

Sirviendo el Proyecto

La línea de comandos de Angular provee una cadena de herramientas de desarrollo completa para aplicaciones front-end en tu máquina local. Como tal, no necesita instalar un servidor web local para servir tu proyecto, únicamente ejecutar el comando ng serve desde tu terminal para servir tu proyecto localmente.

Primero, navegue a la carpeta de tu proyecto en la terminal ejecutando los comandos:

$ cd frontend
$ ng serve

Ahora puede navegar a la dirección http://localhost:4200/ para comenzar a jugar con tu aplicación front-end. La página se actualizará en vivo automáticamente cada vez que usted haga cambios en el código.

Generar Artefactos de una App Angular

La línea de comandos angular provee el comando, ng generate el cual ayuda a los desarrolladores a generar artefactos básicos de Angular tales como módulos, componentes, directivas, pipes, y servicios:

$ ng generate component mi-componente

mi-componente es el nombre del componente a crear. La Angular LCI automáticamente añadirá una referencia a components, directives ypipes en el archivo src/app.module.ts.

Si quiere añadir tu componente, directiva or pipe a otro módulo (otro diferente al módulo de aplicación principal, app.module.ts), simplemente puede agregar el prefijo con el nombre del módulo y un slash:

$ ng g component mi-modulo/mi-componente

mi-modulo es el nombre de un módulo existente.

Conclusión

En este tutorial, hemos visto cómo instalar la interfaz de línea de comandos (CLI) de Angular en tu máquina Windows, la cual hemos usado para inicializar un nuevo proyecto Angular desde cero.

También hemos visto varios comandos que puede usar a través del desarrollo de tu proyecto para generar artefactos, tales como módulos, componentes y servicios.

Se puede usar la etiqueta HTML span como contenedor para agrupar elementos en la misma línea y así poder darles estilos o manipularlos con JavaScript.

En este artículo, Le mostraré como usar esta etiqueta para hacer que una cierta parte del contenido sea distinta del resto. Luego usted podrá comenzar a usarlo en sus proyectos de codificación.

¿Para qué se usa la etiqueta span?

Esta etiqueta se comporta igual que un div, el cual es usado para agrupar contenido similar, así puede darles estilos a todo junto.

Pero span se diferencia en que es un elemento en línea, en contraposición a div, que es un elemento de bloque.

Además, tenga en cuenta que span en sí misma no tiene ningún efecto en su contenido, a menos que tú le des estilos.

Hay dos usos principales de la etiqueta span: dar estilo y manipular un texto en particular con JavaScript.

Cómo dar estilos al texto con la etiqueta span

Si deseas que un texto en particular o algún otro contenido sea diferente del resto, puedes envolver este contenido en un span, darle un atributo de clase y entonces seleccionarlo con el valor del atributo para darle estilos.

En los siguientes ejemplos, se puede cambiar el color, background-color y font-style de algún texto encerrándolo en una etiqueta span.

Cómo cambiar el color del texto

<p>Este es un <span class="texto-carmesi">texto carmesí</span> dentro de otros.</p>

.texto-carmesi {
      color: crimson;
}

He añadido un poco de CSS básico para centrar todo en la página:

body {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        height: 100vh;
      }

Cómo cambiar el color del fondo

<p>
      Un <span class="fondo-verde">color de fondo verde</span> recuerda perfectamente la belleza de la naturaleza.
</p>

 .fondo-verde {
        background-color: #2ecc71;
      }

Cómo cambiar el estilo de la fuente

<p>
   Un estilo de fuente <span class="estilo-fuente">en cursiva</span> puede ser usado para dar énfasis a un texto.
</p>

.estilo-fuente {
     font-style: italic;
   }

Cómo manipular la etiqueta span con JavaScript

Al igual que es posible dar estilo al contenido envolviéndolo en una etiqueta span, también puedes manipular su contenido de la misma manera. Debes darle un atributo id y seleccionarlo por su id con JavaScript de tal forma que pueda ser manipulado.

En el ejemplo siguiente, he cambiado un texto dentro de otro a mayúsculas con JavaScript:

<p>
   El texto <span id="mayusculas"> freecodecamp</span>, fue cambiado a mayúsculas con JavaScript
</p>

const mayusculas = document.querySelector("#mayusculas");

mayusculas.style.textTransform = "uppercase";

Conclusión

En este tutorial, has aprendido cómo manipular una pieza particular de texto con CSS y JavaScript, envolviéndolo en una etiqueta span y dándole un atributo class o id único.

Debes notar que en casos como este, debes usar clases para el estilo e identificadores (id) para la manipulación con JavaScript con el objetivo de evitar confusiones.

Gracias por leer y sigue programando.

La asignación mediante desestructuración en JavaScript provee una forma ordenada y limpia de extraer valores de nuestros arreglos y objetos.

Este artículo pretende mostrar, exactamente, cómo funciona en JavaScript la asignación mediante desestructuración de arreglos y objetos.

Así que sin más preámbulos, comencemos con la desestructuración de arreglos.

¿Qué es la desestructuración de arreglos?

La desestructuración de arreglos es una técnica única que permite extraer limpiamente valores de un arreglo y asignarlos a nuevas variables.

Por ejemplo, sin usar la técnica de asignación mediante desestructuración, se podría copiar un valor de un arreglo en una nueva variable de la siguiente manera:

const perfil = ["Oluwatobi", "Sofela", "codesweetly.com"];

const nombre = perfil[0];
const apellido = perfil[1];
const sitioWeb = perfil[2];

console.log(nombre); // "Oluwatobi"
console.log(apellido); // "Sofela"
console.log(sitioWeb); // "codesweetly.com"

Probarlo en StackBlitz

Se debe notar que el fragmento de abajo tiene bastante código repetido que no cumple con el principio de programación DRY (Don’t Repeat Yourself - No Te Repitas).

Veamos ahora cómo la desestructuración de arreglos hace todo más limpio y adherido al principio DRY.

const perfil = ["Oluwatobi", "Sofela", "codesweetly.com"];

const [nombre, apellido, sitioWeb] = perfil;

console.log(nombre); // "Oluwatobi"
console.log(apellido); // "Sofela"
console.log(sitioWeb); // "codesweetly.com"

Probarlo en StackBlitz

Se puede ver, como por arte de magia, se ha limpiado el código colocando las tres nuevas variables (es decir, nombre, apellidoy sitioWeb) en un arreglo ([...]). Y a continuación, se asignaron los valores del arreglo perfil.

En otras palabras, se instruyó a la computadora para que extraiga los valores del arreglo perfil y los asigne en las variables al lado izquierdo del operador de asignación.

Por lo tanto, JavaScript analizará el arreglo perfil y copiará su primer valor ("Oluwatobi") el la primera variable (nombre) del arreglo de desestructuración.

Así mismo, la computadora extraerá el segundo valor del arreglo perfil y lo asignará a la segunda variable (apellido) del arreglo de desestructuración.

Por último, JavaScript copiará el tercer valor del arreglo perfil y lo asignará a la tercera variable (sitioWeb) del arreglo de desestructuración.

Observa que el fragmento de código de arriba ha desestructurado el arreglo perfil referenciándolo. Sin embargo, también es posible hacerlo directamente desestructurándolo de un arreglo. Veamos cómo.

Cómo hacer desestructuración directa de un arreglo

JavaScript permite desestructurar un arreglo directamente de la siguiente forma:

const [nombre, apellido, sitioWeb] = [
  "Oluwatobi", 
  "Sofela", 
  "codesweetly.com"
];

console.log(nombre); // "Oluwatobi"
console.log(apellido); // "Sofela"
console.log(sitioWeb); // "codesweetly.com"

Probarlo en StackBlitz

Supon que prefieres separar las declaraciones de variables de sus asignaciones. En ese caso, JavaScript lo tiene cubierto. Veamos cómo.

Cómo usar desestructuración de arreglos mientras separa la declaración de las variables de su asignación

Siempre que uses desestructuración de arreglos, JavaScript permite separa la declaración de las variables de su asignación.

Aquí un ejemplo:

let nombre, apellido, sitioWeb;

[nombre, apellido, sitioWeb] = ["Oluwatobi", "Sofela", "codesweetly.com"];

console.log(nombre); // "Oluwatobi"
console.log(apellido); // "Sofela"
console.log(sitioWeb); // "codesweetly.com"

Probarlo en StackBlitz

¿Qué tal si quisieras que "Oluwatobi" sea asignado a la variable nombre y el resto de los elementos del arreglo a otra variable? ¿Cómo lo haría? Averigüémoslo a continuación.

Cómo usar desestructuración de arreglos para asignar el resto de un arreglo a una variable

JavaScript permite usar el operador rest dentro de un arreglo de desestructuración para asignar el resto de un arreglo normal a una variable.

Aquí un ejemplo:

const [nombre, ...otraInformacion] = ["Oluwatobi", "Sofela", "codesweetly.com"];

console.log(nombre); // "Oluwatobi"
console.log(otraInformacion); // ["Sofela", "codesweetly.com"]

Probarlo en StackBlitz

Nota: Siempre usa el operador rest como el último elemento del arreglo de desestructuración para evitar un error de sintaxis (SyntaxError).

Ahora, ¿Si sólo quisiera extraer "codesweetly.com" ? Discutamos la técnica a usar a continuación.

Cómo usar desestructuración de arreglos para extraer valores a cualquier índice

Aquí se muestra cómo puede usar desestructuración de arreglos para extraer valores en cualquier índice de un arreglo normal:

const [, , sitioWeb] = ["Oluwatobi", "Sofela", "codesweetly.com"];

console.log(sitioWeb); // "codesweetly.com"

Probarlo en StackBlitz

En el fragmento de código de arriba, se usaron comas para omiti las variables en la primera y segunda posición del arreglo de desestructuración.

Al hacer esto, es posible enlazar la variable sitioWeb a el tercer índice del arreglo normal al lado derecho del operador de asignación (es decir, "codesweetly.com").

Sin embargo, a veces el valor que se desea extraer de un arreglo es undefined. En ese caso, JavaScript provee una forma de establecer valores por defecto en el arreglo de desestructuración. Veamos más acerca de ello a continuación.

Cómo funcionan los valores por defecto en una asignación mediante desestructuración de arreglos

Establecer un valor por defecto puede ser útil cuando el valor que se desea extraer de un arreglo no existe (o está como undefined).

Aquí se muestra cómo se puede establecer un valor por defecto en un arreglo de desestructuración:

const [nombre = "Tobi", sitioWeb = "CodeSweetly"] = ["Oluwatobi"];

console.log(nombre); // "Oluwatobi"
console.log(sitioWeb); // "CodeSweetly"

Probarlo en StackBlitz

En el ejemplo de arriba, se estableció "Tobi" y "CodeSweetly" como los valores por defecto de las variables nombre y sitioWeb.

Por lo tanto, en el intento de extracción del primer valor del indice del arreglo del lado derecho, la computadora tomó el valor por defecto "CodeSweetly" debido a que en el arreglo ["Oluwatobi"] sólo existe un valor de índice cero.

Entonces, ¿si quisieras intercambiar el valor de nombre  por el de sitioWeb? De nuevo, es posible usar desestructuración de arreglos para hacer el trabajo. Veamos cómo.

Cómo usar desestructuración de arreglos para intercambiar valores entre variables

Puedes usar la asignación mediante desestructuración de arreglos para intercambiar valores de dos o más variables diferentes.

Un ejemplo a continuación:

let nombre = "Oluwatobi";
let sitioWeb = "CodeSweetly";

[nombrenombre, sitioWeb] = [sitioWeb, nombre];

console.log(nombre); // "CodeSweetly"
console.log(sitioWeb); // "Oluwatobi"

Probarlo en StackBlitz

En el ejemplo de arriba,, se usó desestructuración de arreglos directa para reasignar las variables nombre y sitioWeb por los valores del arreglo del lado derecho del operador de asignación.

Debido a ello, el valor de nombre cambiará de "Oluwatobi" a "CodeSweetly". Mientras que el contenido de sitioWeb cambiará de "CodeSweetly" a "Oluwatobi".

Ten en cuenta que también puede usar ésta técnica para extraer valores de un arreglo normal a parámetros de funciones. Hablemos de ello más abajo.

Cómo usar desestructuración de arreglos para extraer valores de un arreglo como parámetros de una función

Aquí se muestra como se puede usar la desestructuración para extraer un valor de un arreglo como parámetro de una función.‌

// Definir un arreglo con dos elementos:
const perfil = ["Oluwatobi", "Sofela"];

// Definir una función con un arreglo desestructurado conteniendo dos parámetros:
function obtenerInfoUsuario([nombre, apellido]) {
  return `Mi nombre es ${nombre} ${apellido}.`;
}

// Invocar el método obtenerInfoUsuario mientras se le pasa el arreglo perfil como argumento:
obtenerInfoUsuario(perfil);

// La invocación anterior retornará lo siguiente:
"Mi nombre es Oluwatobi Sofela."

Probarlo en StackBlitz

En el fragmento de código anterior, se usa un arreglo de desestructuración como parámetro para extraer los valores del arreglo perfil y pasar los parámetros nombre y apellido a la función obtenerInfoUsuario.

Nota: Un arreglo de desestructuración como parámetro normalmente se conoce como parámetro de desestructuración.

A continuación otro ejemplo:

// Definir un arreglo con dos valores string y un arreglo anidado:
const perfil = ["codesweetly.com", "Male", ["Oluwatobi", "Sofela"]];

// Definir una función con dos arreglos de desestructuración conteniendo un parámetro cada uno:
function obtenerInfoUsuario([sitioWeb, , [nombreUsuario]]) {
  return `${nombreUsuario} maneja ${sitioWeb}`;
}

// Invoke getUserBio while passing the profile array as an argument:
obtenerInfoUsuario(perfil);

// The invocation above will return:
"Oluwatobi maneja codesweetly.com"

Probarlo en StackBlitz

En el fragmento de código anterior, se usan dos arreglos de desestructuración como parámetros para extraer el valor del arreglo perfil y pasar los parámetros sitioWeb y nombreUsuario a la función obtenerInfoUsuario.

Puede haber ocasiones en que se podría necesitar invocar una función que contiene un parámetro de desestructuración sin pasarle ningún argumento. En ese caso, se necesita usar una técnica que prevenga que el navegador lance un TypeError.

Veamos acerca de ésta técnica a continuación:

Cómo invocar funciones que contienen parámetros de desestructuración sin pasarles algún argumento

Considera la siguiente función:

function obtenerInfoUsuario([nombre]) {
  console.log(
    "Hacer algo que no requiere un parámetro de desestructuración."
  );
  return `Mi nombre es ${nombre}.`;
}

Ahora, se invoca la función obtenerInfoUsuario  sin pasar ningún argumento a su parámetro de desestructuración:

obtenerInfoUsuario();

Probarlo en CodeSandBox

Después de invocar la función arriba, el navegador lanzará un error similar a TypeError: undefined is not iterable.

Este mensaje se lanza porque las funciones que contienen un parámetro de desestructuración esperan que les sea pasado al menos un argumento.

Por lo tanto, se puede evitar estos mensajes de error mediante la asignación de un parámetro por defecto al parámetro de desestructuración.

Aquí un ejemplo:

function obtenerInfoUsuario([nombre] = []) {
  console.log(
    "Hacer algo que no requiere un parámetro de desestructuración."
  );
  return `Mi nombres es ${nombre}.`;
}

Se debe notar en el fragmento de código anterior que se asignó un arreglo vacío como parámetro de desestructuración por defecto.

Ahora, si se invoca la función sin pasarle argumentos:

obtenerInfoUsuario();

La función mostrará como salida:

"Hacer algo que no requiere un parámetro de desestructuración."
"Mi nombre es undefined."

Probarlo en CodeSandBox

Ten en cuenta que no se tiene que usar un arreglo vacío como parámetro de desestructuración por defecto, Puedes usar cualquier otro valor que no sea null o undefined.

Entonces, ahora que sabemos cómo funcionan los arreglos de desestructuración, veamos la desestructuración de objetos para poder ver cuáles son las diferencias.

¿Qué es la desestructuración de objetos en JavaScript?

La desestructuración de objetos es una técnica que permite extraer limpiamente valores de un objeto hacia nuevas variables.

Por ejemplo, sin usar esta técnica, se puede extraer un valor de un objeto en una nueva variable como se muestra aquí:

const perfil = {
  nombre: "Oluwatobi", 
  apellido: "Sofela", 
  sitioWeb: "codesweetly.com"
};

const nombre = profile.firstName;
const apellido = profile.lastName;
const sitioWeb = profile.website;

console.log(nombre); // "Oluwatobi"
console.log(apellido); // "Sofela"
console.log(sitioWeb); // "codesweetly.com"

Probarlo en StackBlitz

Se debe notar que el fragmento de código anterior tiene mucho código repetido que no cumple con el principio de codificación DRY (Don’t Repeat Yourself - No Te Repitas).

Veamos cómo la desestructuración hace todo más limpio y DRY.

const perfil = {
  nombre: "Oluwatobi", 
  apellido: "Sofela", 
  sitioWeb: "codesweetly.com"
};

const { nombre: nombre, apellido: apellido, sitioWeb: sitioWeb } = perfil;

console.log(nombre); // "Oluwatobi"
console.log(apellido); // "Sofela"
console.log(sitioWeb); // "codesweetly.com"

Probarlo en StackBlitz

Como se puede ver, como por arte de magia, se ha limpiado el código trasladando las tres nuevas variables a propiedades de objeto ({...}) y asignándolas a los valores del objeto perfil.

En otras palabras, se ha instruido a la computadora para que extraiga los valores del objeto perfil  a las variables en el lado izquierdo del operador de asignación.

Por lo tanto, JavaScript analizará el objeto perfil  y copiará el primer valor ("Oluwatobi") en la primera variable del objeto de desestructuración (firstName).

De la misma forma, la computadora extraerá el segundo valor ("Sofela") del objeto perfil en la segunda variable del objeto de desestructuración (lastName).

Por último, JavaScript copiará el tercer valor ("codesweetly.com")  del objeto perfil en la tercera variable del objeto de desestructuración (website).

Se debe tener en cuenta que en { nombre: nombre, apellido: apellido, sitioWeb: sitioWeb}, las claves son referencias a las propiedades del objeto perfil, mientras que los valores de las claves representan las nuevas variables.

Alternativamente, se puede usar una sintaxis abreviada para hacer el código más legible.

He aquí un ejemplo:

const perfil = {
  nombre: "Oluwatobi", 
  apellido: "Sofela", 
  sitioWeb: "codesweetly.com"
};

const { nombre, apellido, sitioWeb } = perfil;

console.log(nombre); // "Oluwatobi"
console.log(apellido); // "Sofela"
console.log(sitioWeb); // "codesweetly.com"

Probarlo en StackBlitz

En el fragmento de código anterior, se ha acortado { nombre: nombre, apellido: apellido, sitioWeb: sitioWeb} a { nombre, apellido, sitioWeb}.

Observa que el ejemplo anterior ilustra como asignar un valor de un objeto a una variable cuando la propiedad del objeto y la variable tienen el mismo nombre.

Sin embargo, siempre se puede asignar un valor de una propiedad a una variable con nombre diferente, veamos cómo.

Cómo usar desestructuración de objetos cuando el nombre de la propiedad es diferente del nombre de la variable

JavaScript permite usar desestructuración de objetos para extraer el valor de una propiedad a una variable, incluso cuando los valores de cada uno (propiedad y variable) son diferentes.

Aquí un ejemplo:

const perfil = {
  nombre: "Oluwatobi", 
  apellido: "Sofela", 
  sitioWeb: "codesweetly.com"
};

const { nombre: primerNombre, apellido: nombreFamiliar, sitioWeb: paginaWeb } = perfil;

console.log(primerNombre); // "Oluwatobi"
console.log(nombreFamiliar); // "Sofela"
console.log(paginaWeb); // "codesweetly.com"
console.log(sitioWeb); // "ReferenceError: website is not defined"

Probarlo en CodeSandBox

En el ejemplo anterior, la computadora extrajo con éxito los valores del objeto perfil y los asignó a las variables nombradas primerNombre, nombreFamiliar y paginaWeb aunque los nombres de las propiedades y variables son diferentes.

Nota: const { nombre: primerNombre } = perfil es equivalente a const primerNombre = perfil.nombre.

Otro ejemplo a continuación:

const perfil = {
  apellido: { nombreFamiliar: "Sofela" }
};

const { apellido: { nombreFamiliar: nombreDeFamilia } } = perfil;

console.log(nombreDeFamilia); // "Sofela"

Probarlo en StackBlitz

En el ejemplo anterior, la computadora extrajo con éxito los valores del objeto perfil y los asignó a las variables nombradas, nombreDeFamilia aunque los nombres de las propiedades y variables son diferentes.

Nota: const { apellido: { nombreFamiliar: nombreDeFamilia } } = perfil is equivalent to const snombreDeFamilia = profile.apellido.nombreFamiliar.

Es de notar que hasta ahora se ha desestructurado el objeto profile mediante su referenciación. Sin embargo también se puede hacer la desestructuración de forma directa. Veamos cómo.

Cómo hacer desestructuración directa de objetos

JavaScript permite hacer desestructuración directa de las propiedades de unos objetos de la siguiente forma:

const { nombre, apellido, sitioWeb } = {
  nombre: "Oluwatobi", 
  apellido: "Sofela", 
  sitioWeb: "codesweetly.com"
};

console.log(nombre); // "Oluwatobi"
console.log(apellido); // "Sofela"
console.log(sitioWeb); // "codesweetly.com"

Probarlo en StackBlitz

Supon que prefieres separar la declaración de la variable de sus asignaciones, en tal caso; JavaScript también lo permite. Veamos cómo.

Cómo usar desestructuración de objetos mientras se para la declaración de variables de sus asignaciones

Siempre que se use desestructuración de objetos, JavaScript permite separar las declaraciones de variables de sus asignaciones.

Un ejemplo a continuación:

// Declare three variables:
let nombre, apellido, sitioWeb;

// Extract values to the three variables above:
({ nombre, apellido, sitioWeb } = {
  nombre: "Oluwatobi", 
  apellido: "Sofela", 
  sitioWeb: "codesweetly.com"
});

// Invoke the three variables:
console.log(nombre); // "Oluwatobi"
console.log(lastName); // "Sofela"
console.log(sitioWeb); // "codesweetly.com"

Probarlo en StackBlitz

Nota:

• Hay que asegurarse de encajar la asignación de la desestructuración del objeto en paréntesis. Mediante esto, la máquina sabrá que el objeto desestructurado es un objeto literal en vez de un bloque.
• Pon punto y coma (;) después del paréntesis de una asignación por desestructuración de objeto. Así, se previene que la computadora interprete el paréntesis como un invocador de una función que puede estar en la línea anterior.

¿Y si se quisiera asignar "Oluwatobi" a la variable nombre y el resto de objetos a otra variable? ¿Cómo se puede hacer esto? Averigüemos cómo.

Como usar desestructuración de objetos para asignar el resto de un objeto a una variable.

JavaScript permite usar el operador rest dentro de un objeto de desestructuración para asignar el resto de un objeto literal a una variable.

Aquí un ejemplo:

const { firstName, ...otherInfo } = {
  firstName: "Oluwatobi",
  lastName: "Sofela",
  website: "codesweetly.com"
};

console.log(firstName); // "Oluwatobi"
console.log(otherInfo); // {lastName: "Sofela", website: "codesweetly.com"}

Probarlo en StackBlitz

Nota: Siempre use el operador rest como el último elemento de su objeto de desestructuración para evitar un error de sintaxis SyntaxError.

A veces, el valor que se desea extraer de una propiedad de un objeto es undefined. En este caso, JavaScript provee una vía para establecer un valor por defecto en el objeto de desestructuración. Aprendamos más acerca de esto más abajo.

Como funcionan los valores por defecto en una asignación por desestructuración de objetos.

Estableciendo un valor por defecto puede ser útil cuando el valor que se desea extraer de un objeto que no existe (o está establecido como undefined).

Aquí se muestra como establecer uno dentro de las propiedades de un objeto de desestructuración:

const { nombre = "Tobi", sitioWeb = "CodeSweetly" } = {
  nombre: "Oluwatobi"
};

console.log(nombre); // "Oluwatobi"
console.log(sitioWeb); // "CodeSweetly"

Probarlo en StackBlitz

En el ejemplo de arriba. se establece "Tobi" y"CodeSweetly" como los valores por defecto de las variables nombre y sitioWeb.

Por lo tanto, en un intento de extraer el segundo valor de la propiedad del lado derecho del objeto, la computadora retornó el valor por defecto "CodeSweetly" porque sólo existe una única propiedad en {nombre: "Oluwatobi"}.

Entonces, si se requiere intercambiar el valor de nombre con sitioWeb? Nuevamente, es posible usar la desestructuración para lograrlo, Observemos cómo.

Como usar la desestructuración para intercambiar valores

Se puede usar la asignación por desestructuración de objetos para intercambiar los valores de dos o más diferentes variables.

Por ejemplo:

let nombre = "Oluwatobi";
let sitioWeb = "CodeSweetly";

({ nombre, sitioWeb } = {nombre: sitioWeb, sitioWeb: nombre});

console.log(nombre); // "CodeSweetly"
console.log(sitioWeb); // "Oluwatobi"

Probarlo en StackBlitz

El ejemplo anterior usó la desestructuración para reasignar las variables nombre y sitioWeb con los valores del objeto literal a la derecha del operador de asignación.

Como tal, el valor de nombre cambiará de "Oluwatobi" a "CodeSweetly". Mientras el contenido de sitioWeb cambiará de "CodeSweetly" a "Oluwatobi".

Ten en cuenta que puedes usar la desestructuración de objetos para extraer valores de los parámetros de función. Vamos a ver cómo hacerlo.

Como usar desestructuración de objetos para extraer valores de las propiedades de los parámetros de una función

A continuación se muestra como usar desestructuración para copiar los valores de una propiedad a un parámetro de función:

// Define an object with two properties:
const perfil = {
  nombre: "Oluwatobi",
  apellido: "Sofela",
};

// Define a function with one destructuring object containing two parameters:
function obtenerInfoUsuario({ nombre, apellido }) {
  return `Mi nombre es ${nombre} ${apellido}.`;
}

// Invoke getUserBio while passing the profile object as an argument:
obtenerInfoUsuario(profile);

// The invocation above will return:
"Mi nombre es Oluwatobi Sofela."

Probarlo en StackBlitz

En el ejemplo anterior, se usa un parámetro como objeto de desestructuración para copiar los valores de obtenerInfoUsuario, nombre y apellido.

Nota: Un parámetro de desestructuración de objeto es típicamente llamado un parámetro de desestructuración.

Ahora otro ejemplo:

// Define an object with three-parent properties:
const perfil = {
  sitioWeb: "codesweetly.com",
  genero: "Male",
  nombreCompleto: {
    nombre: "Oluwatobi",
    apellido: "Sofela"
  }
};

// Define a function with two destructuring objects containing a parameter each:
function obtenerInfoUsuario({ sitioWeb, nombreCompleto: { nombre: nombreUsuario } }) {
  return `${nombreUsuario} runs ${sitioWeb}`;
}

// Invoke getUserBio while passing the profile object as an argument:
obtenerInfoUsuario(perfil);

// The invocation above will return:
"Oluwatobi runs codesweetly.com"

Probarlo en StackBlitz

En el fragmento de código anterior, se usó dos parámetros de desestructuración para copiar los valores del objeto perfil en los parámetros sitioWeb and nombreUsuario de la función obtenerInfoUsuario.

Hay ocasiones en las que se podría requerir invocar una función conteniendo un parámetro de desestructuración sin pasarle ningún argumento. En ese caso, es posible que se necesite una técnica que prevenga que el navegador lance un error TypeError.

Veamos cómo se hace a continuación.

Cómo invocar una función que contiene parámetros de desestructuración sin proveerle ningún argumento

Considera la siguiente función:

function obtenerInfoUsuario({ nombre }) {
  console.log(
    "Haga algo que no necesite el parámetro de desestructuración."
  );
  return `Mi nombre es ${firstName}.`;
}

Ahora, invoquemos la función sin pasarle ningún argumento a su parámetro:

obtenerInfoUsuario();

Probarlo en CodeSandBox

Después de invocar la función obtenerInfoUsuario de arriba, el navegador lanzará un error similar a TypeError: (destructured parameter) is undefined.

El mensaje de error sucede por que las funciones que contienen un parámetro de desestructuración esperan que les sean proveídos al menos un argumento.

Por esto, se puede evitar éste tipo de errores asignando un parámetro por defecto al parámetro de desestructuración.

function obtenerInfoUsuario({ nombre } = {}) {
  console.log(
    "Haga algo que no necesite el parámetro de desestructuración."
  );
  return `Mi nombre es ${nombre}.`;
}

Nota que en el ejemplo anterior, se asignó un objeto vacío como argumento por defecto del parámetro.

Ahora, se invoca la función sin pasar ningún argumento al parámetro de desestructuración:

obtenerInfoUsuario();

La función retornará:

"Hacer algo más que no requiera el parámetro de desestructuración."
"Mi nombres es undefined."

Probarlo en CodeSandBox

Hay que tener en cuenta que no se tiene que usar objeto vacío como el argumento de un parámetro de desestructuración por defecto. Puede usarse cualquier otro valor que no sea null o undefined.

Conclusión

La desestructuración de arreglos y objetos funcionan de similar manera. La principal diferencia entre las dos asignaciones de desestructuración es esta:

• La desestructuración de arreglos extrae valores de un arreglo. Pero la desestructuración de objetos extrae valores de un objeto de JavaScript.

En resumen

Este artículo discute como funciona la desestructuración de arreglos y objetos en JavaScript. También se abordó la principal diferencia entre las dos asignaciones de desestructuración.

Muchas gracias por leer!

‌             ‌