1. Introduction

1.1 Tutorial Goal

This tutorial aims to provide a comprehensive understanding of the two types of exports in JavaScript: default and named. We will delve into the differences between them, discuss when to use each type, and demonstrate how to import them in your code.

1.2 Learning Outcomes

By the end of this tutorial, you will be able to:
- Understand the difference between default and named exports
- Use both default and named exports in your JavaScript code
- Import default and named exports into other JavaScript files

1.3 Prerequisites

This tutorial assumes that you have a basic understanding of JavaScript syntax and ES6 features.

2. Step-by-Step Guide

2.1 Default Exports

A default export is simply a way to export a single entity (be it a function, object, or variable) from a JavaScript module. Only one default export per module is allowed.

// myModule.js
export default function() {
  console.log("This is a default export");
}

To import a default export, you use the following syntax:

// main.js
import myDefaultFunction from './myModule.js';

myDefaultFunction();  // Outputs: "This is a default export"

2.2 Named Exports

Named exports, on the other hand, can be multiple per module and need to be imported using their original names.

// myModule.js
export const CONSTANT = 'constant value';
export function myFunction() {
  console.log("This is a named export");
}

To import named exports, you use the following syntax:

// main.js
import { CONSTANT, myFunction } from './myModule.js';

console.log(CONSTANT);  // Outputs: "constant value"
myFunction();  // Outputs: "This is a named export"

Note: You can rename named imports using the as keyword.

3. Code Examples

3.1 Default Exports

Consider a module that exports a function to calculate the area of a square.

// square.js
export default function(side) {
  return side * side;
}

To import this function into another module, you can do:

// main.js
import area from './square.js';

console.log(area(5));  // Outputs: 25

3.2 Named Exports

Consider a module that exports a function to calculate the area and the perimeter of a square.

// square.js
export const area = (side) => side * side;
export const perimeter = (side) => 4 * side;

To import these functions into another module, you can do:

// main.js
import { area, perimeter } from './square.js';

console.log(area(5));        // Outputs: 25
console.log(perimeter(5));   // Outputs: 20

4. Summary

In this tutorial, we covered the two types of exports in JavaScript: default and named. Default exports are used when a module only needs to export a single entity, while named exports can be used to export multiple entities. Both can be imported into other JavaScript modules using the import keyword.

5. Practice Exercises

5.1 Exercise 1

Create a module that exports a function to calculate the circumference of a circle (default export), and a constant for PI (named export).

5.2 Exercise 2

Create a module that exports a function to calculate the area of a rectangle (default export), and functions to calculate the perimeter and the diagonal of a rectangle (named exports).

5.3 Solutions

Solution to Exercise 1:

// circle.js
export default function(radius) {
  return 2 * PI * radius;
}

export const PI = 3.141592653589793;

Solution to Exercise 2:

// rectangle.js
export default function(length, width) {
  return length * width;
}

export const perimeter = (length, width) => 2 * (length + width);

export const diagonal = (length, width) => Math.sqrt(length * length + width * width);

Remember to keep practicing and experimenting with different scenarios to become more comfortable with using default and named exports. Happy coding!