values not being passed between functions

December 16, 2021

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??

>Solution :

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
    }
}