I'm trying to create a custom logger which just wraps a console.log but always adds something to the start which makes it absolutely clear that the log is ing from my plugin.

I have e up with the following code:

var log = function(param1, param2) {
    if (typeof param3 !== 'undefined') {
        console.log('[MyPlugin]', param1, param2, param3);
    } else if (typeof param2 !== 'undefined') {
        console.log('[MyPlugin]', param1, param2);
    }
};

This allows the developer to run the following:

log('foo', 'bar');
// Outputs '[MyPlugin] foo bar'

log('foo');
// Outputs '[MyPlugin] foo'

But I hope that this can be improved upon.

The issues with this implementation are:

1. The logging function only allows two parameters. It would be better if it could accept many.
2. There's lots of repetition (multiple console.log calls).

What I have tried.

I thought maybe the ES6 spread-operator would work:

var log = function(...params) {
    console.log('[MyPlugin]', params);
};

Which allows the developer to run:

log('foo', 'bar');
// Outputs '[MyPlugin] Array [ "foo", "bar" ]'

log('foo');
// Outputs '[MyPlugin] Array [ "foo" ]'

You can see that the output is not the same as in the original function.

Is there a better solution?

I'm trying to create a custom logger which just wraps a console.log but always adds something to the start which makes it absolutely clear that the log is ing from my plugin.

I have e up with the following code:

var log = function(param1, param2) {
    if (typeof param3 !== 'undefined') {
        console.log('[MyPlugin]', param1, param2, param3);
    } else if (typeof param2 !== 'undefined') {
        console.log('[MyPlugin]', param1, param2);
    }
};

This allows the developer to run the following:

log('foo', 'bar');
// Outputs '[MyPlugin] foo bar'

log('foo');
// Outputs '[MyPlugin] foo'

But I hope that this can be improved upon.

The issues with this implementation are:

1. The logging function only allows two parameters. It would be better if it could accept many.
2. There's lots of repetition (multiple console.log calls).

What I have tried.

I thought maybe the ES6 spread-operator would work:

var log = function(...params) {
    console.log('[MyPlugin]', params);
};

Which allows the developer to run:

log('foo', 'bar');
// Outputs '[MyPlugin] Array [ "foo", "bar" ]'

log('foo');
// Outputs '[MyPlugin] Array [ "foo" ]'

You can see that the output is not the same as in the original function.

Is there a better solution?

• javascript
• ecmascript-6

1 Answer 1

Spread notation (it's not an operator) would indeed do it, if you were using it. You're using rest notation (to gather arguments into an array parameter), but not spread notation (to spread them out when passing them to console.log). Here's how you'd use spread:

var log = function(...params) {
// Rest -----------^^^
    console.log('[MyPlugin]', ...params);
    // Spread ----------------^^^
};

Example:

var log = function(...params) {
// Rest -----------^^^
    console.log('[MyPlugin]', ...params);
    // Spread ---------------^^^
};

log("testing", 1, 2, 3);

If you need to support pre-ES2015 environments without transpiling, you can do the same thing with arguments and Function#apply:

var log = function() {
    var args = Array.prototype.slice.call(arguments);
    args.unshift('[MyPlugin]');
    console.log.apply(console, args);
};

Live Example:

var log = function() {
    var args = Array.prototype.slice.call(arguments);
    args.unshift('[MyPlugin]');
    console.log.apply(console, args);
};

log("testing", 1, 2, 3);