Question 293797 in Javascript Question posted in
A very good W3school tutorial can be found here.

Differences between Javascript "export default" styles

Looking at JS (and particularly React) examples, I often see things like:

function MyComponent () {
  //stuff
}

export default MyComponent;

Or with an arrow function:

const MyComponent = () => {
  //stuff
}

export default MyComponent;

But I don’t often see:

export default function MyComponent() {
  //stuff
}

I know that the const version can’t be reassigned, though I don’t know that this is a meaningful concern or if it opens up optimizations.

I know that using arrow function syntax has some interesting differences from normal function syntax like not having a prototype, but I also know that decent JS implementations won’t bother allocating the prototype unless something tries to use it.

So, is there a technical reason for one style over another here, or is it just a style issue?

Tags:

3

Answers


  1. 0

    In JavaScript, export default is used to export a single value or object as the default export from a module. This feature is commonly used in ECMAScript 6 (ES6) modules.

    There are two main styles of using export default in JavaScript:

    1.Named Export with Default Export:
    In this style, you can have both named exports (e.g., add and subtract) and a default export (multiply) in the same module. When importing, you can choose to import the default export or specific named exports.
    2.Default Export Only:
    In this style, the module only exports a default export, and there are no named exports. When importing, you can directly import the default export without using curly braces.

    Both styles are commonly used, and the choice between them depends on the requirements and preferences of the developer or the project’s coding style. The first style (named export with default export) is often used when you want to export a main functionality (default) along with additional helper functions (named). The second style (default export only) is used when a module represents a single, standalone functionality.

    Login or Signup to reply.
  2. 0

    As far as i know there aren’t any performance difference between any of those and it’s simply dependent on the coding style being enforced. some people like to declare all functions in one section of the code and exports in a seperate section to make it more organized.

    although there is a difference between ES6 arrow functions () => {} and normal functions function name() {}
    the this keyword context changes in both of them

    in arrow function this refers to the object where it is defined and in normal functions it refers to the caller of the function.

    one more advantage of using first and second style is that you can easily use named exports as well as default exports like this

    function myfunc() {};
const a = () => {};
const b = 12;

export default myfunc;
export { myfunc, a, b };

    edit:

    Also one more advantage between normal functions and arrow functions is that normal functions are hoisted, which means the function can be accessed anywhere within the file irrespective of where the function body is defined, however in arrow functions you cannot access it before initialization.

    example:

    // works fine
export default a;

function a() {
    console.log("a");
}

    export default a;

// will throw error
const a = () => {
    console.log("a");
}
    Login or Signup to reply.
  3. 0

    An additional option is to co-locate your default export and other named exports all in a single statement at the end of the module. This can ease future refactoring so that modifications happen in one place in the module (instead of searching through the source code to find all instances of the export keyword):

    const foo = "hello";

const bar = Math.ceil(Math.random() * 10);

function logUpperCase(str) {
  console.log(str.toUpperCase());
}

export {
  bar,
  foo,
  logUpperCase,
  logUpperCase as default,
};

    Here’s a runnable example snippet:

    You can read more about Data URLs here

    <script type="module">
// The following specifier is the code above, base64-encoded as a data URL:
import shout, { bar, foo } from "data:text/javascript;base64,Y29uc3QgZm9vID0gImhlbGxvIjsKCmNvbnN0IGJhciA9IE1hdGguY2VpbChNYXRoLnJhbmRvbSgpICogMTApOwoKZnVuY3Rpb24gbG9nVXBwZXJDYXNlKHN0cikgewogIGNvbnNvbGUubG9nKHN0ci50b1VwcGVyQ2FzZSgpKTsKfQoKZXhwb3J0IHsKICBiYXIsCiAgZm9vLAogIGxvZ1VwcGVyQ2FzZSwKICBsb2dVcHBlckNhc2UgYXMgZGVmYXVsdCwKfTs=";

shout(foo); // logs "HELLO"
console.log(bar); // logs a random integer between 1 and 10 inclusive

</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search