Which is better to do: export a const
arrow function, like so:
export const foo = () => 'bar'
or export a regular function, like so:
export function baz() { return 'bar'; }
They compile like so:
exports.baz = baz; function baz() { return 'bar'; } var foo = exports.foo = function foo() { return 'bar'; };
It looks like using the const/arrow function combination declares an extra variable (foo
), which seems to be an unnecessary extra step over the simple function declaration.
To export arrow functions in JavaScript, we can use export directly with arrow functions. const hello = () => console. log("hello"); export default hello; to export the hello function as a default export with export default .
You cannot name a default export.
Use named exports to export constants in JavaScript, e.g. export const A = 'a' and export const B = 'b' . The exported constants can be imported by using a named import as import {A, B} from './another-file. js' . You can have as many named exports as necessary in a file.
Exports without a default tag are Named exports. Exports with the default tag are Default exports. Using one over the other can have effects on your code readability, file structure, and component organization. Named and Default exports are not React-centric ideas.
The differences are minuscule. Both declare a variable.
const
variable is constant also within your module, while a function declaration theoretically could be overwritten from inside the modulethis
const
can get lost among other const
s.If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With