I've been using javascript for years and am expanding my knowledge but dont understand the behaviour in the following code (simplified for brevity):

page.html

$(document).ready(function() {
        Modal.show('full', 'Hello World!');
});

Modal.js

class Modal {
     show({ type, title = '' }) {
        var builtModal = this.build(type, title)
        // do something
    }

    build({ type, title }) {
       // do something
    }
}

In Modal.show, type == 'full' & title is correct but in Modal.build (called from Modal.show) type == undefined & title == "". I'm expecting the values to be set as per the calling function... Any ideas??

CodePudding user response：

Since you're using destructuring in the parameter lists, you need to pass objects to be destructured:

$(document).ready(function() {
    Modal.show({type: 'full', title: 'Hello World!');
});

class Modal {
    show({ type, title = '' }) {
        var builtModal = this.build({type, title})
        // do something
    }

    build({ type, title }) {
       // do something
    }
}

CodePudding user response：

In the function call you use two separate arguments. Try changing it to:

Modal.show({ type: 'full', title: 'Hello World!'});