Importing values in Javascript - Deep Dive

Overview - Importing values

What is it?

Importing values means bringing variables, functions, or objects from one file into another so you can use them there. In JavaScript, this helps split code into smaller parts, making it easier to manage and reuse. You use the 'import' keyword to get these values from files that export them. This way, you avoid repeating code and keep your project organized.

Why it matters

Without importing values, you would have to write all your code in one big file or copy-paste the same code everywhere. This makes projects messy, hard to fix, and slow to build. Importing lets you share code easily, update it in one place, and build bigger programs step-by-step. It’s like having a toolbox where you pick only the tools you need instead of carrying everything all the time.

Where it fits

Before learning importing, you should understand how to write variables and functions in JavaScript. After this, you can learn about exporting values, modules, and how to organize bigger projects. Later, you will explore advanced module systems and bundlers that help manage imports in large applications.

Mental Model

Core Idea

Importing values is like borrowing tools from another workshop so you can use them without building them again.

Think of it like...

Imagine you have a kitchen where you cook meals. Instead of buying new knives every time, you borrow knives from your neighbor’s kitchen when you need them. Importing values is like borrowing those knives to cook efficiently without owning duplicates.

┌───────────────┐       import       ┌───────────────┐
│  fileA.js     │ ───────────────▶ │  fileB.js     │
│  export value │                  │  use value    │
└───────────────┘                  └───────────────┘

Build-Up - 7 Steps

1

Foundation

Understanding JavaScript variables

Concept: Learn what variables are and how to create them in JavaScript.

Variables store data like numbers or text. You create them using keywords like const or let. Example: const greeting = 'Hello'; let count = 5;

Result

You can save and use data in your program by naming it with variables.

Knowing variables is essential because importing values means bringing these named pieces of data from other files.

2

Foundation

What is exporting in JavaScript?

Concept: Exporting means making variables or functions available to other files.

You use the export keyword to share values. Example: export const pi = 3.14; export function greet() { return 'Hi'; }

Result

Other files can now import and use pi and greet.

Exporting is the first step to sharing code; without it, importing cannot happen.

3

Intermediate

Basic import syntax and usage

🤔Before reading on: do you think you can import multiple values at once or only one at a time? Commit to your answer.

Concept: Learn how to import one or more exported values using the import statement.

To import values, use curly braces for named exports. Example: import { pi, greet } from './math.js'; console.log(pi); // 3.14 console.log(greet()); // 'Hi'

Result

You can use pi and greet in your file after importing.

Understanding import syntax lets you pick exactly what you need from other files, avoiding unnecessary code.

4

Intermediate

Default exports and imports

🤔Before reading on: do you think default exports require curly braces when importing? Commit to your answer.

Concept: Learn about default exports, which allow exporting a single main value without a name.

A file can export one default value: Example: export default function() { return 'Hello'; } Import it without braces: import greet from './greet.js'; console.log(greet()); // 'Hello'

Result

You can import the main exported value directly with any name you choose.

Knowing default exports simplifies importing the main thing a file offers, making code cleaner.

5

Intermediate

Renaming imports for clarity

🤔Before reading on: do you think you can rename an imported value to a different name? Commit to your answer.

Concept: You can rename imported values to avoid name conflicts or improve clarity.

Use 'as' to rename: import { pi as circleRatio } from './math.js'; console.log(circleRatio); // 3.14

Result

You use a different name locally while still importing the original value.

Renaming imports helps manage naming conflicts and makes code easier to read.

6

Advanced

Dynamic imports with import() function

🤔Before reading on: do you think dynamic imports load modules immediately or only when needed? Commit to your answer.

Concept: Dynamic imports let you load modules only when you want, not at the start.

Use import() as a function that returns a promise: Example: import('./math.js').then(module => { console.log(module.pi); });

Result

Modules load on demand, which can speed up your app startup.

Dynamic imports improve performance by loading code only when necessary, useful in big apps.

7

Expert

How import paths resolve in JavaScript

🤔Before reading on: do you think import paths always need file extensions or can they be omitted? Commit to your answer.

Concept: Understand how JavaScript finds the file you import based on the path you write.

Relative paths start with './' or '../'. Node.js and browsers resolve extensions automatically in some cases, but sometimes you must add '.js'. Example: import { pi } from './math.js'; If you write './math', the system tries to find './math.js' or './math/index.js'.

Result

Knowing path rules prevents errors like 'module not found'.

Understanding path resolution avoids frustrating bugs and helps organize files correctly.

Under the Hood

When you write an import statement, JavaScript’s module system looks up the specified file, loads its code, and runs it once. It then collects the exported values and makes them available in the importing file as references. This means imported values are live bindings, reflecting changes if the original value updates. The system caches modules so repeated imports don’t reload the code again, improving efficiency.

Why designed this way?

Modules were designed to keep code organized and avoid duplication. Live bindings allow consistent data sharing across files. Caching prevents performance hits from loading the same code multiple times. The syntax balances clarity and flexibility, letting developers pick named exports or default exports depending on their needs.

┌───────────────┐       ┌───────────────┐       ┌───────────────┐
│  Importing    │──────▶│ Module Loader │──────▶│  Exported      │
│  fileB.js     │       │  finds fileA  │       │  values from   │
└───────────────┘       └───────────────┘       │  fileA.js     │
                                                └───────────────┘
                                                      ▲
                                                      │
                                                ┌───────────────┐
                                                │  fileA.js     │
                                                │  exports data │
                                                └───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does importing a value copy it or link to the original? Commit to your answer.

Common Belief: Importing copies the value, so changes in the original file don’t affect the import.

Reality: Imports are live references, so if the original value changes, the import sees the update.

Why it matters: Assuming imports are copies can cause bugs when you expect updated data but see old values.

Quick: Can you import a value without it being exported? Commit to yes or no.

Common Belief: You can import any variable from another file, even if it’s not exported.

Reality: Only exported values can be imported; private variables stay hidden.

Why it matters: Trying to import non-exported values causes errors and confusion about code visibility.

Quick: Does default export mean you can only export one value per file? Commit to yes or no.

Common Belief: Default export limits you to exporting only one value per file.

Reality: You can have one default export plus many named exports in the same file.

Why it matters: Misunderstanding this limits how you organize and share code, missing flexibility.

Quick: Do import paths always require file extensions? Commit to yes or no.

Common Belief: You must always write the full file name with extension when importing.

Reality: Some environments allow omitting extensions and resolve them automatically.

Why it matters: Wrong paths cause module not found errors and slow development.

Expert Zone

1

Imported bindings are live, but reassigning an imported variable locally is not allowed; you can only read or call it.

2

Circular dependencies between modules can cause unexpected undefined values if not carefully structured.

3

Static import statements are hoisted and run before the rest of the code, but dynamic imports run at runtime, affecting load order.

When NOT to use

Avoid static imports for rarely used or large modules that slow startup; use dynamic imports instead. For legacy environments without module support, use bundlers or older script loading methods.

Production Patterns

In real projects, imports are organized to separate core logic, utilities, and UI components. Dynamic imports enable code splitting for faster page loads. Renaming imports helps avoid conflicts in large codebases. Tools like Webpack or Vite optimize imports for performance.

Connections

Dependency Injection

Both involve providing needed components from outside rather than creating them inside.

Understanding importing helps grasp dependency injection, which also manages how parts get access to what they need.

Library Linking in Compiled Languages

Importing in JavaScript is similar to linking libraries in languages like C, where external code is connected at build or run time.

Knowing this shows how different languages solve the problem of code reuse and modularity.

Supply Chain Management

Importing values is like sourcing parts from suppliers to build a product efficiently.

This cross-domain link reveals how modular design in software mirrors real-world logistics and resource management.

Common Pitfalls

#1 Trying to import a variable that was never exported.

Wrong approach:

import { secret } from './config.js'; // but secret is not exported

Correct approach:

export const secret = '123'; // in config.js
import { secret } from './config.js';

Root cause:

Not understanding that only exported values can be imported causes this error.

#2 Using curly braces to import a default export.

Wrong approach:

import { greet } from './greet.js'; // greet is default export

Correct approach:

import greet from './greet.js';

Root cause:

Confusing default and named import syntax leads to import errors.

#3 Omitting the relative path prefix './' or '../' in import statements for local files.

Wrong approach:

import { pi } from 'math.js';

Correct approach:

import { pi } from './math.js';

Root cause:

Not knowing that local files require relative paths causes module not found errors.

Key Takeaways

Importing values lets you reuse code by bringing variables or functions from other files into your current file.

You must export values before you can import them; imports are live references, not copies.

There are two main import types: named imports with curly braces and default imports without them.

Dynamic imports load modules only when needed, improving performance in large applications.

Understanding import paths and syntax prevents common errors and helps organize code cleanly.