Zea Lith Zea Lith - 4 years ago 81
Javascript Question

default keyword in import export es6

I have two file, the first one is todoHelper.js

it has

export const addTodo = (list, item) => [...list, item]

later on I want to use
in another file, I simply do
import {addTodo} from './todoHelpers'

But I'm also seeing people doing export default instead of just export. What's the differences?

Answer Source

You can have only one export default per file and hence when you do export default like

export default AddTodo = (list, item) => [...list, item]

You can import it like

import MyAddTodo from './todoHelpers'

Since babel knows that you are trying to access the default component, you can access it in you file by any name

Now suppose you do

export const AddTodo = (list, item) => [...list, item]

You can have multiple such exports in you file like

export const AddTodo = (list, item) => [...list, item] export const DeleteTodo = (list, item) => [...list, item]

and when you import you will need to destructure them like

import {AddTodo, DeleteTodo}from './todoHelpers'

Now since you have multiple such exports thus babel wont know which component you are tyring to access if you access if by a different name like

import {MyAddTodo, MyDeleteTodo}from './todoHelpers'

If you want to do this you will have to import them as it is and them change thier name like

import {AddTodo as MyAddTodo, DeleteTodo as MyDeleteTodo}from './todoHelpers'

So as general practice you will default export the main component and the rest you can have as export normally or when you have only one component that you need to export from a file then you can choose whatever you want but a nice way will be to export it as default.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download