I am trying to understand named and default exports. I have a seemingly basic requirement which I don't understand how to setup.
I want to be able to import both:
//app.js
import Mod from './my-module'
import { funcA, funcB } from './my-module'
console.log('A', Mod.funcA(), funcA()); // A a a
console.log('B', Mod.funcB(), funcB()); // A a a
When I try, the closest way of doing this I get to is the following:
//my-module.js
export function funcA() { return 'a'; };
export function funcB() { return 'b'; };
export default {funcA, funcB}
My trouble is that I don't want to reindex each functions in the default export. I just want to define my functions and then make sure they are exported so I can use them either way.
Suggestions? Or do I have to use import * as Mod from './my-module';?
You can omit the default export and use import as syntax:
//app.js
import * as Mod from './my-module'
import { funcA, funcB } from './my-module'
console.log('A', Mod.funcA(), funcA()); // A a a
console.log('B', Mod.funcB(), funcB()); // B b b
//my-module.js
export function funcA() { return 'a'; };
export function funcB() { return 'b'; };
Import entire module's contents once using * as name:
import * as Mod from './my-module';
Then assign them to separate constants using destructuring:
const { funcA, funcB } = Mod;
For export just use the named exports:
export function funcA() { return 'a'; };
export function funcB() { return 'b'; };
Related
Is it possible in JavaScript to do something like: export * from '*/**'?
Expect to export all modules from the entry point (index.js) like:
export * from '*/**.js'
Instead of:
export * from './thing.js'
export * from './something/something.js`
export const doSomething = () => {}
export const doSomethingElse = () => {}
or in an index.js file like
export * from './bar';
It's done like above and then you use the functions in bar like this:
import * as foo from '../foo/bar';
foo.doSomething();
If you only want doSomething() then this should work:
import { doSomething } from '../foo/bar';
I want to export default all functions inside export default, but every time I try to import them in another file, I get the error that the functions don't exists. Am I importing wrong?
export default () => {
// methods
const makeRequest = async () => {
async function useAllBenefits() {
...
return payload;
}
async function useTopBenefits() {
...
return payload;
}
// exposed
return {
useAllBenefits,
useTopBenefits,
makeRequest
};
};
}
myotherfile.js
import all from '../myFile'
console.log(all.useAllBenefits)
Don't put them inside another function
Use the export keyword
Such:
export const aFunction = () => {};
export const anOtherFunction = () => {};
const someDefaultExport = () => {};
export default someDefaultExport;
Then you can import them:
import theDefault, { aFunction, anOtherFunction } from "../myFile";
If you want to export multiple functions AS DEFAULT you can do it by exporting one object whose properties are functions.
export default {
function1: () => {},
function2: () => {},
function3: () => {}
}
Now in another file you can import them and use as bellow:
import all from '../myFile.js';
all.function1();
all.function2();
Method 1. export each functions
myFunction.js
export const sum = (a,b) {
return a + b;
}
export const multiply = (a,b) {
return a * b;
}
Method 2.
myFunction.js
const sum = (a,b) {
return a + b;
}
const multiply = (a,b) {
return a * b;
}
export default {sum, multiply}
Import section
file.js
import all from './myFunction.js'
all.sum(10, 11);
Or
file.js
import {sum, multiply} from './myFunction.js'
sum(10, 11);
import { utils } from 'shared'
const {
pick,
get,
isEmpty,
sortBy,
orderObjectsArray,
isString
} = utils.lodashAlternative
export { pick, get, isEmpty, sortBy, orderObjectsArray, isString }
Above you can see exports , imagine I don't want to desctructure all of those functions , how can I do it ? I've tried to make export utils.lodashAlternative , but it will not work , also :
const {...data} = utils.lodashAlternative
export {...data}
Also will not work, it there any way to export it without discructuring ?
A simple way to export everything under utils.lodashAlternative is creating an alias and exporting that one instead.
There's no need to create an object and spread lodashAlternative inside.
You can't declare and export afterwards (unless you use as)!
Way 1: using default
import { utils } from 'shared'
const lodashAlternative = utils.lodashAlternative;
export default lodashAlternative;
Way 2: exporting directly
import { utils } from 'shared'
export const lodashAlternative = utils.lodashAlternative;
Way 3: export each one separately, to be able to import them separately
import {utils} from "shared";
const { foo, bar } = utils.lodashAlternative;
export { foo, bar };
import then:
// WITH WAY 1
import lodashAlternative from "lodash-alternative";
// WITH WAY 2
import {lodashAlternative} from "lodash-alternative";
// WITH WAY 3
import {foo, bar} from "lodash-alternative";
Blitz here
If we have a module like:
const ourModule = (() => {
const add = (a,b) a+b
const sub = (a,b) return a-b
return { add, sub }
})();
export default ourModule;
So we import like:
import ourModule from 'path'
And call the functions like:
ourModule.add(1,2)
But how we can import it to use it directly?
like just add(1,2) instead of ourModule.add(1,2)
Use named exports instead:
export const add = (a,b) => a+b;
export const sub = (a,b) => a-b;
Then they can be imported like:
import { add } from './your/module';
You're looking for destructuring imports:
function add() {
}
function sub() {
}
module.exports = { add, sub };
Then you can do:
import { add, sub } from "./MyModule"
My react native project skeleton here
-app
--component
--LoginScreen.js
--container
--styles.js
-index.ios.js
-index.android.js
and styles.js....
...
export const colors = {
'green' : '#######'
....
}
export const test = () => {
console.log(arguments);
}
...
and LoginScreen.js
import { test } from '../styles';
export default class LoginScreen {
....
constructor () {
test();
}
....
}
so watch chrome debug console...
Arguments[5]
0:DedicatedWorkerGlobalScope
1:_require(moduleId)
2:Object
3:Object
4:null
callee:(global, require, module, exports)
length:5
Symbol(Symbol.iterator):values()
__proto__:Object
what is this?
imported function always return arguments[5]
I don't know why return that arguments.
I think that this related import? function.
Let me know please
Arrow functions do not bind their arguments. If you want to use variable number of arguments in React Native, you can use rest parameter syntax ... to get an array of arguments.
export const test = (...args) => {
console.log(args);
}
The arguments object should work with named function expressions:
export function test() {
console.log(arguments);
}