How to export & import custom helpers in JS/React?

Question

Task :

So, I'd rather not type console each time I want to use it.
I want to import some shorthand, eg--

log('hi') same as console.log('hi')

Tried Case :

Here is my work so far.
I'd like to use shorthand of log, warn, error, info to corresponding console functions.
I hope this doesn't seem totally bad practice, but I'm willing to listen.

Problem :

I'm puzzled how to export and import these in order to use the desired notation.

Open to all suggestions.
Please suggest.
Thank you.

log = (arg, ...argv) => console.log(arg, ...argv)
err = (arg, ...argv) => console.error(arg, ...argv)
error = (arg, ...argv) => console.error(arg, ...argv)
info = (arg, ...argv) => console.info(arg, ...argv)
warn = (arg, ...argv) => console.warn(arg, ...argv)

// how to export? should this be a class?

You could have just use destructuring: let { log, err, info, warn } = console — MinusFour
– MinusFour, Commented Aug 24, 2018 at 3:24
Oh that's awesome. Can you export those from a file? I will mark correct answer for above at any rate. — listenlight
– listenlight, Commented Aug 24, 2018 at 3:31
You could, but you'd end up with the exact same code. So just use that code and forget about making it a module. — MinusFour
– MinusFour, Commented Aug 24, 2018 at 3:37

Amruth · Accepted Answer · 2018-08-24 04:41:22Z

3

yes you can shorthand.

Create a file ex : log.js with below functions.

export const log = (arg, ...argv) => {
    console.log(arg, ...argv)
}
export const err  = (arg, ...argv) => {
  console.error(arg, ...argv)
} 
export const error   = (arg, ...argv) => {
   console.error(arg, ...argv)
}

export const info   = (arg, ...argv) => {
  console.info(arg, ...argv)
}

export const warn   = (arg, ...argv) => {
   console.warn(arg, ...argv)
}

Later you just import these functions in other component where you want to use.

import {log, err, error, info, warn} from './log'; //path may be different

Then just call functions wherever you want.

log('hi', [1,2,3]);
err('hi', [1,2,3]);
error('hi', [1,2,3]);
info('hi', [1,2,3]);
warn('hi', [1,2,3]);

edited Aug 24, 2018 at 4:41

answered Aug 24, 2018 at 4:36

Amruth

5,9122 gold badges30 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

listenlight Over a year ago

is there a way to get these functions with a simpler import './helpers/console' statement?

Amruth Over a year ago

yeah you can do with import * as util from './log'; but again you have to call functions like util.log('hi', [1,2,3]);, again its like calling console.log('hi', [1,2,3]);

listenlight Over a year ago

I thought there might be a way to import them without casting/destructuring-- all at once.

Amruth Over a year ago

i don't think which supports other than the above way which i mentioned in comment, yeah you can refer here for different ways of importing -> developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Amruth Over a year ago

@tidelake got any best answers ?

|

KARTHIKEYAN.A · Accepted Answer · 2018-08-24 06:44:36Z

1

General keyword to export function in ES6 is export (custom export function file)

export const functionName = (arg, ...argv) => {
   console.log(arg, ...argv)
}

General keyword to import function in ES6 is import (custom import function file)

import { functionName } from './export_function_file';

answered Aug 24, 2018 at 6:44

KARTHIKEYAN.A

20.5k11 gold badges139 silver badges151 bronze badges

Collectives™ on Stack Overflow

How to export & import custom helpers in JS/React?

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related