JavaScript es un lenguaje de programación con una sintaxis muy amplia. Conocer el funcionamiento de esta sintaxis es fundamental para el desarrollo de cualquier proyecto web. En este post, te enseñaremos cómo funcionan las palabras clave import y export en JavaScript.
¿Cómo funciona import y export en JavaScript?
Cuando hablamos de import y export en JavaScript nos referimos a dos palabras clave para comunicar módulos en nuestros proyectos. Existen distintas maneras de utilizar las palabras clave import y export en JavaScript. Es decir, podemos ejecutar distintos tipos de importación y exportación en nuestros proyectos.
A la hora de exportar un elemento, podemos utilizar la palabra clave export de dos modos.
export default
Cuando insertamos export default antes de nuestro código, estamos exportando un único objeto. Es decir, se exportará todo el contenido como un solo bloque.
La sentencia export default lleva por detrás una expresión, que al final es algo que JavaScript puede interpretar. Entonces, al usar esta sentencia estamos exportando todo un objeto. Este es el caso del segmento de modelo que hemos descrito en nuestro post sobre identificar el patrón modelo vista controlador.
A continuación, te ponemos un ejemplo de un objeto exportado de esta manera:
export default {
getTweets ( ) {
},
},
Como puedes ver, este objeto por dentro tiene un método getTweets. Sin embargo, por el comportamiento del export default, también podríamos agregar otras funciones a este objeto e igual todas serían exportadas.
export default {
getTweets ( ) { },
createTweets ( ) { },
deleteTweets ( ) { },
};
Debido a que estamos exportando todo el objeto, luego podremos usar sus distintas funciones al acceder a ellas como propiedades del objeto. Es decir, primero importamos el objeto con el nombre que queramos:
import TweetService from ‘fileName’;
Luego, si quisiéramos usar específicamente la función getTweets podríamos acceder a ella de la siguiente manera.
TweetService.getTweets ( );
export
Un mismo módulo también puede exportar varias secciones de código en distintos puntos. Supongamos que creamos un nuevo archivo JavaScript que tiene dos funciones: una función a y una función b. Entonces, podríamos usar la palabra clave export para exportar cada una:
export function a ( ) { }
export function b ( ) { }
Luego, en el momento de la importación, podríamos llamar a ambas exportaciones desde una sola línea de código, pues ambas pertenecen al mismo archivo. Entonces, usaríamos la palabra clave import de la siguiente manera:
import {a, b} from ‘fileName.js’;
Como puedes notar, este tipo de import y export en JavaScript nos lleva a hacer una operación de destructuring. Esto significa definir variables a partir de las propiedades de un objeto.
En este sentido, cuando usamos la palabra export en cada una de nuestras funciones, finalmente lo que estamos haciendo es exportar un objeto con dos propiedades (en nuestro caso a y b). Por ello, cuando ejecutamos el destructuring estamos definiendo una variable a que llama a la función a del archivo que hemos creado. Por esta referencia, podríamos ejecutar la función directamente sin tener que importarla individualmente:
a ( )
De este modo, logramos usar las palabras clave import y export en JavaScript para comunicar piezas con nombre. Esto mismo hemos hecho en nuestro post sobre ejecutar el patrón modelo vista controlador, en donde hemos exportado una función de controlador de la siguiente manera.
Luego, por medio de una operación de destructuring, hemos definido una variable por el mismo nombre que hace referencia a la función exportada:
import {tweetListController from «./TweetListController.js»;
Esta referencia es la que luego hace posible el uso de la función de manera directa:
tweetListController ( );
Ten presente que la forma de interactuar con un elemento importado cambiará según el elemento. Es decir, si tenemos una constante en nuestro ejemplo con las funciones a y b, interactuaremos con ella de manera diferente. Supongamos entonces que tenemos la constante siguiente:
export const c = 5;
Luego, la importamos junto a las otras funciones de este archivo:
import {a, b, c}
Entonces, no podremos interactuar con c de la misma manera que con las funciones, pues es una constante y no una función. Es decir, no podremos insertar c ( ) por más que la hayamos importado. Lo que sí podríamos hacer con esta constante sería ejecutar un console.log para pintar su valor en pantalla.
Ahora que sabes exactamente qué es y cómo funcionan las palabras clave import y export en JavaScript, seguro que quieres seguir aprendiendo sobre este poderoso lenguaje de programación. Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva en el que aprenderás en profundidad sobre lenguajes como JavaScript, HTML, CSS y JSX. ¿Quieres seguir aprendiendo con nosotros? ¡No te lo pierdas y pide información para descubrir cómo destacar en el sector IT!
