Javascript: exportando e importando código (módulos).

En esta sección veremos como exportar e importar elementos de módulos o código de archivos Javascript. La sintaxis de importación y exportación de los elementos de módulos o código que veremos enseguida corresponde a la versión ES6 de Javascript.

Exportar código a archivos Javascript.

Hay dos formas de exportar código de archivos Javascript. Veamos el primer ejemplo usando la sintaxis “export default”.

/*
Código de un archivo llamado imprime.js
*/

const function imprimeAlgo() {
	console.log('Algo');
}
export default imprimeAlgo;

/*
Código alternativo válido de archivo imprime.js
*/

export default const function imprimeAlgo() {
	console.log('Algo');
}

El código anterior muestra dos alternativas de escribir el código javascript de un archivo llamado “imprime.js” usando la instrucción “export default”. En ambos casos la instrucción indica que exportará la función “imprimeAlgo” por defecto. La instrucción “export default” se usa principalmente cuando se quiere exportar une elemento por defecto, en éste caso una función, pero el elemento exportado puede ser un objeto, una constante o una función. Más adelante veremos la sintaxis de como se importará el código con este tipo de export.

Cuando se quieren exportar más elementos de un código se utiliza la siguiente sintaxis:

/*
Código que exporta varios elementos llamado rutinas_varias.js
*/

export const function1 = () => {
	...
}

export const funcion2 = () => {
	...
}

export const iva = 0.16;

El código anterior no está completo, sólo se pone para ejemplificar y esta escrito en un sólo archivo js. Este exporta el código de “rutina1”, “rutina2” e “iva” poniendo antes de cada función, objeto o variable constante la palabra “export”. Otra alternativa de escribir el mismo código es el siguiente:

/*
Código alternativo que exporta varios elementos llamado rutinas_varias.js
*/

const funcion1 = () => {
	...
}

const funcion2 = () => {
	...
}

const iva = 0.16;

export { funcion1, funcion2, iva };

En ésta forma de sintaxis alternativa de escribir la instrucción “export” se coloca entre llaves la lista de nombre de los elementos a exportar separados por comas. Los elementos a exportar, ya sean funciones, objetos o constantes deben estar previamente definidos.

Importar código de archivos Javascript.

Si tenemos archivos javascript que exportan código, como los ejemplos que vimos anteriormente, podemos importar ese código en nuestros archivos javascript como veremos en los ejemplos de código siguientes:

/*
Código para importar elementos del archivo javascript imprime.js
*/
import imprimeAlgo from './imprime.js'
import imprime from './imprime.js'

imprimeAlgo();
imprime();

En el ejemplo estamos importando dos veces el elemento exportado por defecto de un archivo llamado “imprime.js” que se encuentra en el mismo directorio o carpeta de nuestro código que ejemplificamos en la sección “Exportar código a archivos Javascript” más arriba. La sintaxis de la instrucción “import” del ejemplo anterior se emplea cuando los elementos son exportados con la instrucción “export default”. El nombre que le demos al elemento en el código donde importamos puede ser cualquier nombre válido, no necesariamente el mismo nombre del elemento en el archivo que la exporta como se muestra en el segunda línea “import”, donde le asignamos el nombre “imprime” a la función importada.

Cuando el archivo a importar contiene varios elementos exportamos, entonces usamos las siguientes sintaxis de la instrucción “import”:

/*
Código que importa código de un archivo que exporta varios elementos
que ejemplificamos en el archivo rutinas_varias.js
*/

import { funcion1 } from './rutinas_varias'
import { funcion1, funcion2, iva } from './rutinas_varias'
import { funcion1 as funcionuno } from './rutinas_varias'
import * as modulo from './rutinas_varias'

El primer “import” importa sólo la “funcion1” del archivo “rutinas_varias” que se encuentra en la misma carpeta o directorio del código o archivo que las importa. El nombre del elemento importado debe ser el mismo nombre como aparece en el archivo que la exporta y debe ponerse entre llaves.

Si queremos importar varios elementos exportados de un mismo archivo, se especifican sus nombres en una lista separada por comas dentro de llaves como en el segundo “import”. Los nombres de los elementos deben ser los mismos que se encuentran en el archivo exportado.

Podemos asignarle un nombre distinto al elemento exportado utilizando la palabra reservada “as” como se muestra en el tercer import. En este caso para llamar al elemento usaremos “funcionuno” en lugar de “funcion1”.

Si el archivo contiene una gran cantidad de elementos exportados y se quieren exportar todos ellos podemos utilizar la sintaxis del cuarto “import”. Utilizando el asterisco se importarán todos los elementos export del archivo javascript especificado y se podrá acceder a ellos a través de nombre alias que aparece después de la palabra reservada “as” en este caso a través del nombre “modulo”. Por ejemplo, para acceder a las funciones “funcion1” y “funcion2” las llamaríamos de la siguiente forma:

/*
Código llamando a los elementos exportados por el archivo "rutinas_varias"
utilizando el asterisco (*) al importar
*/
import * as modulo from './rutinas_varias'

modulo.funcion1();
modulo.funcion2();

Espero y esta entrada les sea útil. Cualquier observación favor de dejar tu comentario. ¡Hasta la próxima!

Javascript: función arrow.

La función arrow fue introducida en la versión ES6 de Javascript. Enseguida veremos con códigos de ejemplo cómo se definía una función antiguamente y las distintas formas de definir funciones arrow.

/*
Definición y ejecución de una función javascript antes
de las funciones arrow.
*/
function miFuncion() {
  console.log('Hola');
}

miFuncion(); // "Hola"

Ahora veremos la misma función pero definida como función arrow. Observe que esta función no recibe parámetro alguno. En este caso no se pueden omitir los paréntesis y deben ir vacíos.

/*
Definición y ejecución de una función arrow javascript sin
parámetros.
*/
const miFuncion = () => {
  console.log('Hola');
}

miFuncion(); // "Hola"

Si la función arrow sólo recibe un parámetro, se pueden omitir los paréntesis como se muestra en la segunda función del código siguiente:

/*
Distintas definiciones válidas de una función arrow cuando 
la función recibe sólo un parámetro.
*/

const imprimeNombre = (nombre) => {
	console.log(nombre);
}	

const imprimeNombre2 = nombre => {
	console.log(nombre);
}

imprimeNombre('Miguel'); // Miguel
imprimeNombre2('Luis'); // Luis

Cuando una función arrow recibe más de un parámetro los paréntesis son obligatorios.

/*
Cuando una función arrow recibe más de un parámetro
los paréntesis son obligatorios, no se pueden omitir.
*/
const imprimeEdadYNombre = (edad, nombre) => {
	console.log(edad, nombre);
}

imprimeEdadYNombre(28, 'Armando'); // 28 "Armando"

Si la función regresa un valor (return) y no tiene más líneas de código puede ser escrita como se muestra en el siguiente código:

/*
Función que regresa un valor y no contiene más código.
*/
const doblaNumero = (numero) => {
	return numero * 2;
}

console.log(doblaNumero(2)); // 4

/*
La función anterior puede escribirse de la siguiente
forma:
*/

const doblaNumero2 = (numero) => numero * 2;

console.log(doblaNumero2(2)); // 4

El último ejemplo es la forma más corta de escribir una función arrow.

Espero les sea útil esta entrada. Espero sus observaciones y comentarios.

¡Hasta pronto!

Javascript: instrucciones let y const.

Las instrucciones “let” y “const” son usadas en el lenguaje javascript para definir o declarar variables en un programa, pero se comportan de manera diferente. El código puede ser ejecutado en línea en algún sitio que lo permita como puede ser jsbin.

Instrucción let.

La instrucción “let” fue introducida en la version ES6 de Javascript. Sirve para declarar variables. Tiene las siguientes características:

  • Una variable declarada con “let” no puede ser vuelta a declarar en un mismo bloque.
  • Si una variable se define con “let”, debe ser declarada antes de usarse.
  • Las variables definidas con “let” tienen alcance de bloque.

Veamos algunos ejemplos de uso de “let”. El texto después de los dos diagonales (//) en el código muestra la respuesta que nos mostraría la consola:

/* Definición de variables con let */
let numero = 10;
let letra = 'a', letra2 = 'b';

console.log(numero); // 10
console.log(letra); // "a"
console.log(letra2); // "b"
/*
Variable declarada con let no puede ser vuelta a declarar con let
en un mismo bloque
*/
let precio = 10.00;
let precio = 20.00; //Error

/*
La segunda definición de la variable "precio" arrojaría el siguiente error:
"SyntaxError: Identifier 'precio' has already been declared"
*/
/*
Variable declarada con let si puede ser vuelta a declarar con let
en otro bloque y cada una conservará su valor.
*/
let precio = 10.00;
{
	let precio = 20.00; 
	console.log(precio); // 20
}
console.log(precio); // 10
/*
No se puede usar la variable antes de ser declarada con let.
*/
precio = 10.00; // Error
let precio = 15.00;

/*
La primera definición de precio sin let arrojaría el siguiente error:
"ReferenceError: Cannot access 'precio' before initialization"
*/
/*
Variable definida con let, sólo es válida en su bloque o
subbloques.
*/
let externo = 'externo';
{
  let interno = 'interno';
  {
    let interno2 = 'interno2';
    console.log(externo); // "externo"
    console.log(interno); // "interno"
    console.log(interno2); // "interno2"
  }
  console.log(externo); // "externo"
  console.log(interno); // "interno"
  console.log(interno2); // Error
}

/*
Al querer mostrar la variable "interno2" fuera del bloque del que se 
definió marcaría el siguiente error de variable no definida:
"ReferenceError: interno2 is not defined"
*/

Instrucción const.

La instrucción “const”, al igual que “let”, fue introducida en la versión ES6 de Javascript. Sirve para declarar o definir una variable cuyo valor no queremos que cambie. Tiene las siguientes características:

  • Variables definidas con “const” no pueden ser redeclaradas en un mismo bloque.
  • La variable declarada con “const” no puede ser reasignada.
  • El alcance de una variable definida con “const” es de bloque.

Enseguida veremos códigos de ejemplo de su uso:

/*
Variables declaradas con const no puedes ser redeclaradas en 
un mismo bloque.
*/

const numero = 10;
const numero = 30; // Error

/*
La última linea marcaría error. Marcaría que la variable 
numero ya fue definida o declarada:
"SyntaxError: Identifier 'numero' has already been declared"
*/
/*
Variables declaradas con const pueden ser redeclaradas en 
bloques distintos.
*/
const numero = 10;
{
  const numero = 20;
  console.log(numero); // 20
}
console.log(numero); // 10
/*
Variables declaradas con const no pueden ser reasignadas, 
es decir volverles a asignar un valor.
*/

const numero = 10;
numero = numero + 1; // Error

/*
Al queres asignarle un valor a la variable declarada con 
const marcaría que no s epuede asignar valor a una 
variable constante:
"TypeError: Assignment to constant variable." 
*/	
/*
Variable definida con const, sólo es válida en su bloque o
subbloques.
*/
const externo = 'externo';
{
  const interno = 'interno';
  {
    const interno2 = 'interno2';
    console.log(externo); // "externo"
    console.log(interno); // "interno"
    console.log(interno2); // "interno2"
  }
  console.log(externo); // "externo"
  console.log(interno); // "interno"
  console.log(interno2); // Error
}

/*
La última linea del código marcaría que la constante interno2 
no está definida porque está fuera del bloque en que se definió:
"ReferenceError: interno2 is not defined" 
*/	

Cuando una variable tipo objeto o arreglo (array) es definido con “const”, no puede ser reasignada, sin embargo los valores de los elementos que contiene el arreglo o las propiedades del objeto si pueden ser cambiados.

/*
Cuando una variable tipo arreglo es definida con const no puede ser
reasignada, sin embargo su contenido puede ser cambiado.
*/

const numeros = [1, 2, 3];
console.log(numeros);
numeros[0] = 5;
console.log(numeros);

/*
Cuando una variable tipo objeto es definida con const no puede ser
reasignada, sin embargo sus propiedades pueden ser cambiadas.
*/

const carro = {marca: 'Kia', color: 'gris', modelo: 2021};
console.log(carro);
carro.color = 'rojo'
console.log(carro);

/*
El código anterior arrojaría los siguientes resultados:

[1, 2, 3]
[5, 2, 3]
[object Object] {
  color: "gris",
  marca: "Kia",
  modelo: 2021
}
[object Object] {
  color: "rojo",
  marca: "Kia",
  modelo: 2021
}

*/

Se sugiere utilizar const cuando se definen funciones, objetos, arreglos y expresiones regulares.

Espero y esta entrada les sea útil. Cualquier observación o duda, déjalo en los comentarios. ¡Hasta pronto!