The Journey of #100DaysOfCode (@henna_dev)

About the Community The Treehouse
103

#Day83 of #100DaysOfCode

Today was a good day :orange_heart: I was going through a bad week and today I said to myself " Enough, Get Over It :wink: " Lol… I partly give credits to my husband :stuck_out_tongue: I realized I am a sensitive person, I get too attached to stuff, which leads to disappointments and drains my energy…

I visited Pet Store today in need of some dopamine and I got my dose :purple_heart: We decided to buy 2 dwarf bunnies, they are still young and will call us in a week… Can’t wait to have them home :orange_heart:

Husband seeing the Fishes: They are having a scrum meeting… :joy:

Pet House
Pet House1280×1280 312 KB

I continued on the modules in the ES6 section:

Renaming Imports to avoid Naming Collisions

what happens if two modules that are imported have the same function name like greet below

/* inside greeterEspanol.js */
const greet = () => {
  console.log('hola');
}
export { greet };
 
/* inside greeterFrancais.js */
const greet = () => {
  console.log('bonjour');
}
export { greet };

The following syntax will give an error that the identifier greet has already been defined.

import { greet } from 'greeterEspanol.js';
import { greet } from 'greeterFrancais.js';

There is a syntax for renaming imported resources by adding in the keyword as like:

import { exportedResource as newlyNamedResource } from '/path/to/module'

so two same greet functions can be renamed like below:

/* main.js */
import { greet as greetEspanol } from 'greeterEspanol.js';
import { greet as greetFrancais } from 'greeterFrancais.js';
 
greetEspanol(); // Prints: hola
greetFrancais(); // Prints: bonjour

Default Exports and Imports

Every module also has the option to export a single value to represent the entire module called the default export . Often, though not always, the default export value is an object containing the entire set of functions and/or data values of a module.

The syntax for exporting a default object looks like this:

const resources = { 
  valueA, 
  valueB 
}
export { resources as default };

With this syntax, the object containing the module’s resources is first declared and then exported.
It appears resources object is being exported as a named export, but the clause as default renames the exported object to default , a reserved identifier that can only be given to a single exported value.

The shorthand syntax for the same is:

const resources = {
  valueA,
  valueB
}
export default resources;

Importing default values

The syntax for importing default exports looks like this:

import importedResources from 'module.js';

It should be noted that if the default export is an object, the values inside cannot be extracted until after the object is imported, like so:

// This will work...
import resources from 'module.js'const { valueA, valueB } = resources; 

// This will not work...
import { valueA, valueB } from 'module.js'

Tomorrow will continue with a challenge …

Have a good Weekend… :tada:

3 Likes