EXPORT vs EXPORT DEFAULT – JavaScript interview questions

When working with JavaScript and specifically with the React framework, you may come across the terms EXPORT and EXPORT DEFAULT. These are used to export variables, functions, or objects from a module, but they have some differences that are important to understand.

EXPORT

The EXPORT keyword is used to export multiple variables, functions, or objects from a module. When using EXPORT, you can export multiple items from the same module by defining each item and then using the EXPORT keyword to make them available for import in other files.

	
	// In file module.js
	export const name = 'John';
	export function sayHello() {
		console.log('Hello!')
	}
	
	

EXPORT DEFAULT

The EXPORT DEFAULT keyword is used to export a single variable, function, or object from a module. When using EXPORT DEFAULT, you can only export one item from the module, and when importing it in another file, you can use any name to refer to it.

	
	// In file module.js
	const name = 'Jane';
	function sayHi() {
		console.log('Hi!')
	}
	export default name;
	
	

When to use each?

When you have multiple items to export from a module, you should use the EXPORT keyword. This allows you to explicitly define what is being exported, and when importing it in another file, you need to use the same names as defined in the EXPORT statements.

On the other hand, when you only have one thing to export from a module, using EXPORT DEFAULT can be more convenient. You can use any name when importing it in another file, as it will always refer to the single item that was exported.

Conclusion

Understanding the differences between EXPORT and EXPORT DEFAULT is important when working with JavaScript modules, especially in the context of frameworks like React. Knowing when to use each can help you write cleaner and more maintainable code.