Can someone explain this code in javascript where a function has formal parameter as an object

Question

In a Vue component's methods I read this code where a function is defined this way

methods : {
   onEditorChange({ editor, html, text }) {
        console.log('editor change!', editor, html, text)
        this.content = html
   }
}

I checked the code and it is working. Can we declare formal parameters to a function like that ? You can find the code snippet in https://github.com/surmon-china/vue-quill-editor

Which part exactly are you unclear on, { editor, html, text }? — Liam
– Liam, Commented Nov 3, 2017 at 10:58

xate · Accepted Answer · 2017-11-03 11:00:21Z

5

This is known as Destructuring.

From: http://2ality.com/2015/01/es6-destructuring.html#parameter-handling

In ECMAScript 5, you’d implement selectEntries() as follows:

function selectEntries(options) {
    options = options || {};
    var start = options.start || 0;
    var end = options.end || getDbLength();
    var step = options.step || 1;
    ···
}

In ECMAScript 6, you can use destructuring, which looks like this:

function selectEntries({ start=0, end=-1, step=1 }) {
    ···
};

answered Nov 3, 2017 at 11:00

xate

6,3723 gold badges20 silver badges43 bronze badges

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

2 Comments

Bhargav Over a year ago

Understood the concept you were telling here

xate Over a year ago

@Bhargav Yeah that page looks like a good intro into the concept. Thanks for sharing :)

Collectives™ on Stack Overflow

Can someone explain this code in javascript where a function has formal parameter as an object

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related