DEV Community

Sualeh Muhammad
Sualeh Muhammad

Posted on

Difference Between Import Something From Package VS Import { Something } From Package

The difference between import something and import {something} from package is justify by the two export declaration forms.

  1. Name Export
  2. Default Export

Name Export

Name exports are useful to export several values. During the import, it is mandatory to use the same name of the corresponding object.

//app.js

export let language = 'Javascript'
Enter fullscreen mode Exit fullscreen mode

//admin.js

import language from 'app.js'
Enter fullscreen mode Exit fullscreen mode

the above code example of import wouldn't work because app.js not contains any default export , instead it contains name export so will write {language} instead of language while importing in admin.js .

import {language} from 'app.js'
Enter fullscreen mode Exit fullscreen mode

above line of code is the correct syntax while importing name exports , remember that in this case the name you assign matters while importing because you are importing specific thing by it's export name.

Default Export

Default exports are useful to export only a single object, function, variable. During the import, we can use any name to import.

//app.js

let language = 'Javascript'
export default language;
Enter fullscreen mode Exit fullscreen mode

//admin.js

import language from 'app.js'
Enter fullscreen mode Exit fullscreen mode

or

import anything from 'app.js'
Enter fullscreen mode Exit fullscreen mode

The above code is the example of importing the default exports. In default export case assign value while importing will not enclosed in curly brackets { }. Otherwise it wouldn't work.
In this matter no matter what you name assign while importing because it will always resolve to whatever is something default export of app.js

A module can only have one something default export, but as many named exports as you like. You can import them together

Top comments (0)