JavaScript import statement

The JavaScript import statement is used to import functions, objects, or values from other modules in JavaScript. It is part of the ECMAScript modules system, allowing for organized and reusable code.

The basic syntax for importing a module is as follows:

import { identifier1, identifier2 } from 'module';

Here, identifier1 and identifier2 are the names of specific functions, objects, or values that you want to import from the module. The module is typically a separate JavaScript file that exports certain identifiers for use in other files.

You can also use the import statement to import everything exported by a module into a single object. In that case, you would use the * (wildcard) character like this:

import * as myModule from 'module';

Now, you can access the exported identifiers from the module using the myModule object.

There’s also a default export, which allows you to export a single value or function as the default export from a module.

import myDefault from 'module';

Here, myDefault can be any valid variable name, and it represents the default export from the module.

JavaScript import statement example

Simple example code of how you can use the import statement in JavaScript:

Let’s say you have two JavaScript files, math.js and main.js. The math.js file exports a couple of mathematical functions, and the main.js file imports and uses those functions.

math.js:

// Exporting functions
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

main.js:

// Importing functions from math.js
import { add, subtract } from './math.js';

// Using the imported functions
console.log(add(5, 3));      
console.log(subtract(10, 4));

Output:

ES modules are supported natively in modern browsers and can be used in various JavaScript frameworks and libraries that support module-based development.

Here are some popular JavaScript frameworks and libraries that utilize the import statement and ES modules:

1. React: React is a widely used JavaScript library for building user interfaces. Starting from React version 17, React supports ES modules and the import statement by default.
2. Angular: Angular is a comprehensive framework for building web applications. Angular has its own module system, and starting from Angular version 9, it fully supports ES modules and the import statement.
3. Vue.js: Vue.js is a progressive JavaScript framework for building user interfaces. Vue.js supports ES modules and the import statement out of the box, making it easy to organize and import components, directives, and other resources.
4. Node.js: Node.js is a runtime environment for server-side JavaScript development. With the release of Node.js version 12, it provides built-in support for ES modules and the import statement. Prior to that, you could use the --experimental-modules flag to enable experimental ES module support.
5. webpack: webpack is a powerful module bundler commonly used in JavaScript projects. It can handle module dependencies, including ES modules, and can transform and bundle them for use in the browser. webpack allows you to leverage the import statement to import modules and build optimized bundles.

Do comment if you have any doubts or suggestions on this Js basic topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version