Importing with import

Part of the Object Oriented Programming section of Coddy's JavaScript journey — lesson 9 of 56.

After exporting functionality from a module, we need to import it to use it in another file. The import statement allows us to bring in exported values from other modules.

Import a named export:

// Importing a specific function from a module
import { greet } from './greeting.js';

// Now we can use the greet function
greet('John'); // Outputs: Hello, John!

You can import multiple named exports at once:

// Importing multiple exports
import { greet, farewell } from './greeting.js';

greet('John');      // Outputs: Hello, John!
farewell('John');   // Outputs: Goodbye, John!

Import a default export:

// Importing a default export (no curly braces needed)
// Use this when the other file has: export default functionName
import Person from './person.js';

// Create a new Person
const john = new Person('John');

Challenge

Easy

You're building a signup form. You have a file validation-utils.js that contains useful email validation functions.

Your task:

Import the validateEmail function in main.js (It is the named export, not the default export)
Call the function and pass the user@example.com email address
Print the results using console.log

Cheat sheet

Use the import statement to bring in exported values from other modules.

Import a named export:

import { greet } from './greeting.js';

greet('John'); // Outputs: Hello, John!

Import multiple named exports:

import { greet, farewell } from './greeting.js';

greet('John');      // Outputs: Hello, John!
farewell('John');   // Outputs: Goodbye, John!

Import a default export (no curly braces needed):

import Person from './person.js';

const john = new Person('John');

Try it yourself

// TODO: Import the validateEmail function here (it is the named export)

// TODO: Call the function and pass user@example.com email address and print the results using console.log