176

The export statement below gives a syntax error 

export default const hello = () => console.log("say hello")

why ?

I'm only able to export named functions

export function hello() {
  console.log("hello")
}

What is the reason?

jozzy
  • 2,863
  • 3
  • 15
  • 12
  • 4
    What does the error actually say? – Andy Apr 06 '16 at 17:58
  • 2
    Works fine here: http://astexplorer.net/#/0fv5UXttsP . – Felix Kling Apr 06 '16 at 18:00
  • Read here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export – John Apr 06 '16 at 18:03
  • The answer to your literal question is: *yes*. `export` doesn't care *at all* about the value you want to export. – Felix Kling Apr 06 '16 at 18:06
  • I missed the default keyword. The error occurs if its the default export – jozzy Apr 06 '16 at 18:07
  • you can only have one if you use default (per script) – omarjmh Apr 06 '16 at 18:10
  • I only have one but that stmt gives syntax error. The below works though export default hello = () => { console.log("why the downvote")} – jozzy Apr 06 '16 at 18:11
  • 1
    what is the syntax error? – omarjmh Apr 06 '16 at 18:15
  • ERROR in ./src/redux/utils/ReducerUtils.js Module build failed: SyntaxError: ReducerUtils.js: Unexpected token (14:15) > 14 | export default const hello = ()=> {} – jozzy Apr 06 '16 at 18:20
  • 3
    You cannot name a default export. – Felix Kling Apr 06 '16 at 18:25
  • Naming a default export is allowed for old style functions like export default function name1(…) { … } explained here https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export Also splitting into two lines is valid: const hello = () => console.log("say hello"); export default hello; Why would a one liner not be possible to export named arrow functions? I think for debugging this makes sense to trace back the responsible arrow function when these are named. – Bob Siefkes Oct 16 '17 at 09:12

3 Answers3

272

Is it possible to export Arrow functions in ES6/7?

Yes. export doesn't care about the value you want to export.

The export statement below gives a syntax error ... why?

You cannot have a default export and give it a name ("default" is already the name of the export).

Either do

export default () => console.log("say hello");

or

const hello = () => console.log("say hello");
export default hello;
Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
  • 4
    How does the below work then export default hello = () => { console.log("why the downvote")} – jozzy Apr 06 '16 at 18:29
  • 4
    `x = y` is an assignment expression which resolves to the value of `y`. It's not a variable declaration. You can put `x = y` anywhere you can put an expression. **Note:** This will throw in strict mode if `x` is not defined beforehand. – Felix Kling Apr 06 '16 at 18:30
  • 3
    what about regular exports ? is it possible to do something like: `export () => {/*body*/} as getUsers;` ? or do I have to first define it and then export it? – Tomasz Mularczyk Mar 24 '17 at 11:16
  • 52
    @Tomasz: `export const getUser = () => {...};` – Felix Kling Mar 24 '17 at 13:00
  • 3
    @Burrich: It shouldn't matter how a function was created as long as it can be used in the way it is supposed to be. – Felix Kling Oct 17 '17 at 16:50
  • "You cannot have a default export and give it a name ("default" is already the name of the export)." Not true, possible with: export default function cool() { return 'cool' } – Björn Apr 02 '20 at 15:26
  • @Hans: I didn't mean to imply that functions need to be anonymous. I was referring to exports ("it" referring to the export). `export default var foo...` looks like a mixture of `export default ...` and `export var foo..`. The first creates a default export, the second a *named export*. – Felix Kling Apr 02 '20 at 15:30
  • @FelixKling ah yes, I misunderstood. – Björn Apr 02 '20 at 15:39
  • for the second example, i like to do `export { hello };` that way you can import typed – Javier Aviles Apr 07 '20 at 11:43
50

If you don't want a default export, you can simply export a named function with this syntax:

export const yourFunctionName = () => console.log("say hello");
Raphael Pinel
  • 2,352
  • 24
  • 26
  • So you replace `export function yourFunctionName () {` with `export const yourFunctionName = () => `. The characters length is the same, but there's a high chance to make a typo within this section `= () =>`. Honestly, to me it feels less readable and more work :) –  Feb 25 '20 at 19:15
  • Arrow functions differ with normal functions in how they asign `this` value. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions – Eneko Nov 15 '21 at 10:06
  • why do we need const here? – rahul Kushwaha Feb 25 '22 at 08:18
  • @rahulKushwaha `const` is used to declare the variable, just like `let`, but in a way that you cannot change it afterwards. It used to be `var` in older JS. And `export` makes it available outside the file – Raphael Pinel Feb 25 '22 at 13:05
  • so, export can only work with cont variable? – rahul Kushwaha Feb 25 '22 at 13:09
  • @rahulKushwaha it should work also with `let` but it is very rarely used. But `export` only without any keyword for variable declaration like `const` or `let` will not work – Raphael Pinel Feb 25 '22 at 13:42
1

Try this

export default () => console.log("say hello");

or

export const hello = () => console.log("say hello")

Raghuraj Balasubramaniam
  • 217
  • 3
  • 8