Importing values in Javascript

Introduction

Importing values lets you use code or data from other files. This helps keep your code organized and reusable.

You want to use a function written in another file.

You need to share constants or settings across different parts of your app.

You want to keep your code clean by splitting it into smaller files.

You are using a library or module someone else made.

You want to reuse code without copying it.

Syntax

Javascript

import { valueName } from './fileName.js';

// or for default export
import valueName from './fileName.js';

Use curly braces {} to import named exports.

Use no braces to import the default export.

Examples

This imports a named export called greet from the file greetings.js.

Javascript

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

This imports the default export from messages.js and names it message.

Javascript

import message from './messages.js';

This imports two named exports, pi and e, from constants.js.

Javascript

import { pi, e } from './constants.js';

Sample Program

We define a function greet in greetings.js and export it. Then in main.js, we import greet and use it to say hello to Alice.

Javascript

// greetings.js
export function greet(name) {
  return `Hello, ${name}!`;
}

// main.js
import { greet } from './greetings.js';

console.log(greet('Alice'));

Important Notes

File paths in import statements usually start with ./ for the same folder or ../ for parent folders.

Make sure your environment supports ES modules or use a bundler like Webpack.

Import statements must be at the top level, not inside functions or blocks.

Summary

Importing lets you use code from other files easily.

Use curly braces for named imports, no braces for default imports.

Keep your code organized by splitting it into modules.