javascript - What is the difference between importing a function expression or a function declaration from a ES6 module? -

as understand (see section 16.3.2.1), es6 allows different syntaxes function / class export operands. difference refers whether exported function needs interpreted @ import function declaration, in case write: export default function () {} // (a) or function expression: export default (function () {}); // (b).

as possible related sidenote: read imports hoisted, i'm not sure means in context.

taking case of example:

import foo 'my_module'; // (c)

as understand it, above statement save exported function in foo variable. variable hoisted, or is, , when?

most importantly, difference (in terms of setting foo) when my_module exports function using (a) , when exports using (b)?

your question bit convoluted i'll try best explain everything.

let's first establish how modules work in general. module has set of exported names, each of refer local variable in module. name of export not need same of local binding. 1 of exported names can default, there special syntax (both in exporting , importing) dedicated case module exports single thing.

i read imports hoisted, i'm not sure means in context:

import { foo } 'my_module'; 

yes, import declarations hoisted. var or function (and every other declaration) identifier foo available right beginning, before statements in module executed. in fact binding created before of declared variables.

the difference how initialised:

• vars initialised undefined
• functions , function*s initialised function object
• let, const , classes left uninitialised
• imported bindings not initialised, created pointer local variable exported name refers in imported module
• imported modules (import * …) initialised module object (whose properties such pointers well)

when foo set refer exported function?

the short answer: before else.

the long answer: it's not set. it's reference local variable in imported module expect hold function. local variable might change when it's not const - don't expect of course. , contain function already, because the imported module evaluated before module(s) import are. if fear there's problem var functionname = function() {} vs function functionname() {} may relieved - there not.

now title question:

what difference between exporting function expression , function declaration in es6 module?

nothing special, 2 aspects don't have each other:

• export declarations link export name local variable in module scope
• all variables in module scope hoisted, usual
• function declarations initialised differently variable declarations assignment of function expression, as usual

of course, there still no reasons not use more declarative function declarations everywhere; not different in es6 modules before. if @ all, there might less reasons use function expressions, covered declarations:

/* named exports */ export function foo() {…}  // or function foo() {…} export {foo foo} 

/* default exports */ export default function foo() {…}  // or function foo() {…} export {foo default}  // or function foo() {…} export default foo;  // or export default function() {…} 

ok, last 2 default export declarations bit different first two. local identifier linked exported name default not foo, *default* - cannot reassigned. makes sense in last case (where there no name foo), in second-to-last case should notice foo local alias, not exported variable itself. recommend against using pattern.

oh, , before ask: yes, last default export function declaration well, not expression. anonymous function declaration. that's new es6 :-)

so difference between export default function () {} , export default (function () {});

they pretty same every purpose. they're anonymous functions, .name property "default", held special *default* binding to exported name default points anonymous export values.
difference hoisting - declaration function instantiated @ top of module, expression evaluated once execution of module code reaches statement. however, given there no variable accessible name them, behavior not observable except 1 odd special case: module imports itself. um, yeah.

import def "myself"; def(); // works , logs message export default function() {     console.log("i did it!"); } 

import def "myself"; def(); // throws typeerror `def` not being function export default (function() {     console.log("i tried!"); }); 

you shouldn't either of these things anyway. if want use exported function in module, give name in declaration.

in case, why have both syntaxes?

happens. it's allowed spec because doesn't make exceptions prohibit nonsensical things. not intended used. in case spec explicitly disallows function , class expressions in export default statements , treats them declarations instead. using grouping operator, found loophole. done. don't abuse it.