Diferencia entre Import y Require en JavaScript

En JavaScript, la importación y la solicitud son dos formas de hacer que un módulo, una función o una variable esté disponible en un archivo JS. Ambos son importantes, pero se utilizan de manera diferente. Este artículo explicará la diferencia entre import y require en JavaScript y cuándo es mejor usar cada uno.

📋 Aquí podrás encontrar✍

Import vs Require
Ejemplos de Código
Conclusión
Preguntas frecuentes
Ejemplo de código de uso en Require con el patrón gulp
Ejemplo de código de uso en Import con módulos nombrados

Import vs Require

Sintaxis

La sintaxis entre ambas es diferente. En la sintaxis de require, la variable del módulo requerido se asigna a una variable local. Por ejemplo, `const express = require('express');`. La sintaxis para import es un poco diferente, con una sintaxis más de declaración y puede ser anónima o nombrada. Por ejemplo, `import express from 'express';` o `import { express } from 'express';`.

Compatibilidad con el navegador

Otra diferencia importante entre ambas es que require es comúnmente utilizado en entornos de servidor, mientras que import es compatible con los navegadores modernos. Es importante considerar si el código JS debe ser compatible con navegadores antiguos o sólo se está ejecutando en los servidores.

Ejecución en Tiempo de Carga

La forma en que se cargan los archivos JS también es diferente. require carga la dependencia de forma síncrona en el momento en que el código se está ejecutando, mientras que import carga el módulo de forma asíncrona en el momento en que se lo requiere. Eso puede generar una pequeña diferencia de rendimiento.

Ejemplos de Código

Para demostrar la diferencia, estos son dos ejemplos de import y require en Node.js:

Con Require:
```
const http = require('http');

http.createServer((req, res) => {
res.write('Hello World!');
res.end();
}).listen(8080);
```

Con Import:
```
import http from 'http';

http.createServer((req, res) => {
res.write('Hello World!');
res.end();
}).listen(8080);
```

Note cómo import comienza con la declaración import http from 'http';. Esto significa que se está importando el módulo http de forma asíncrona.

Conclusión

Require es utilizado comúnmente en entornos de servidor, mientras que import es compatible con navegadores modernos y ejecuta de forma asíncrona. Ambos tienen diferentes sintaxis y se pueden utilizar para hacer que un módulo, una función o una variable esté disponible en un archivo JS.

Preguntas frecuentes

¿Puedo usar import en Node.js?

Sí, pero debe utilizar una versión de Node que admita importaciones. Para hacer eso, debe agregar la bandera --experimental-modules al ejecutar su script.

¿Puedo usar require en un archivo HTML?

No, require es una función de Node.js y no está disponible en el lado del cliente en un archivo HTML.

¿Cuál es el mejor para usar?

Eso depende del entorno y del objetivo del código JS. Si se está ejecutando código en un servidor o en una versión antigua de Node, use require. Si quiere compatibilidad en navegadores y se está ejecutando en una versión moderna de Node, use import.

¿Cualquier variación con estos métodos?

Sí, con require puede utilizar el patrón gulp y con import puedes usar módulos con nombre.

Ejemplo de código de uso en Require con el patrón gulp

```
const gulp = require('gulp');
const babel = require('gulp-babel');
const rename = require('gulp-rename');

gulp.task('dist', () =>
gulp.src('index.js')
.pipe(babel({ presets: ['@babel/env'] }))
.pipe(rename('index.min.js'))
.pipe(gulp.dest('dist'))
);
```

Ejemplo de código de uso en Import con módulos nombrados

```
// maths.js

export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
```
```
// index.js

import { add, subtract } from './maths.js';

console.log(add(2, 3)); // 5
console.log(subtract(5, 2)); // 3
```

Con import, tenga en cuenta que debe especificar el nombre del módulo que se va a importar. En este ejemplo se importa el módulo que se exporta desde maths.js.

¡Ahora estás listo para empezar a utilizar import y require en tus aplicaciones de JavaScript!