Exporting and importing variables, functions, or classes between files is one of the most fundamental aspects of every programming language. Without export and import, there would be nothing. It allows us to modularize code, avoid repetition, and control everything from a single entry point.

Third-party packages can also be utilized through export and import. However, in JavaScript, export and import can be a bit tricky. In this article, let's explore the beauty of export and import in JavaScript.

1. Named Export and Import
2. Default Export and Import

This is the basic and simplest form of export and import in JavaScript. You just need to add "export something = 1" before your desired variable, class, or function, and you're good to go.

You can reuse these exports anywhere in your code by using "import {something} from filename.js" in your file. Since it is named export and import, you have to use the exact same name. Here's an example:

//Config.js file
export const name = 'shouts.dev';

//App.js File
import {name} from "./Config/Config"

If you have multiple entities to export and you don't want to explicitly mention "export" every time you export. You can use group export to simplify the process. Simply use "export {something, something}" at the end of your code.

Importing is basically the same as before, but if you're feeling too lazy to import everything by explicitly calling each name, you can use "import * as yourDesiredName from filename.js". Then, to use something from your imported file, you can call it as shown in the example below:

//Config.js file
const name = 'shouts.dev';
const type = 'blog';

export {name, type}

//App.js File
import {name, type} from "./Config/Config"

or 

//Config.js file
const name = 'shouts.dev';
const type = 'blog';

export {name, type}

//App.js File
import * as Config from "./Config/Config"

//you can use like that ->
console.log(Config.type) //consoles 'blog'

you can also use as  as shorthand, if your exporting filename is bigger like the below example here:

//Config.js file
const websiteName = 'shouts.dev';
const websiteType = "blog"

export {websiteName as name,  websiteType as type}

//App.js File
import {name, type} from "./Config/Config"

or you can shorthand when importing as your convenience. 

//Config.js file
const websiteName = 'shouts.dev';
const websiteType = "blog"

export {websiteName ,  websiteType }

//App.js File
import { websiteName as name, websiteType as type} from "./Config/Config"

When there's only a single entity(have to be function, class and expressions) to export, people tend to use "Default" before that entity. Then, we can easily import it by calling its name or our desired name without using "{}". Another advantage of default is that we can export an entity without giving it a name at all because there's only one entity to export.

However, this can create redundancy, as everyone can use their own name when importing, which can cause confusion when working as a team. 

// ApiConfig JS file
export default  function websiteInfo(name, type, domain) {
    console.log(
        `Website Name:   ${name}
         Website Type: ${type}  
         Website Type: ${domain}`)
}


//App.js file
import websiteInfo from "./ApiConfig/ApiConfig"

//App.js file
import website from "./ApiConfig/ApiConfig"

In conclusion, mastering the art of exporting and importing in JavaScript can significantly enhance your coding abilities, help you write modularized code, and enable you to use third-party packages with ease. By utilizing the different methods discussed in this article, you can make the most out of this feature in JavaScript.