Please nominate your Qt Champions for 2021!

Object destructuring in QML?

  • According to the docs the QML engine implements the Standard ECMA-262. This standard includes Array and Object destructuring with the "rest" operator, like so:

    const obj1 = { a: 1, b: 2 }
    const obj2 = { ...obj1, c: 3, d: 4 }  // which returns { a: 1, b: 2, c: 3, d: 4 }

    However when I try to do this I get an error "Invalid token ..." in QtCreator. I does work with Arrays, though.

    I neither see any mention in the docs stating that restructuring objects is not implemented in QML, nor I found any mention about it.

    Anyone has some pointers about this issue?

    I'm using the latest QtCreator and QML versions.

  • "7th edition of the standard"

  • Hi and thanks for the quick reply.

    The thing is that the rest/spread operators are part of ES6, the sixth version of the standard. So ES7 already has them by default.

    I can use lambdas, "const", "let" and I can even use rest/spread with Array: [ ...arrayObj ]. They all work in my QML. But not the Object rest/spread operator: { ...plainObj }

    I mean, of course the docs may be wrong then, and perhaps that is the thing. But yet it doesn't make sense because there is not ECMA version where Array destructuring works but Object destructuring doesn't. Perhaps something is missing?

  • What version of Qt are you testing this? I wonder if the docs only match 5.15's version of ecma.

  • Mozilla says object spread was introduced in 2018:
    I don't think the the ecma script in qt is that new.

    7th edition 2016

  • I think Mozilla points to the ECMA entry page.

    The official spec definitely has it: (and are nicely explained here)

    I know this to be the case cause I've been using rest/spread since early 2017 when we migrated our NodeJS codebase at work, first with Babel transpiling and later natively when Node implemented the full ES6.

    And like I said, in QML I'm able to use rest/spread syntax but only with Arrays, not plain Objects.

  • From the wiki page I linked:

    9th Edition – ECMAScript 2018
    The 9th edition, officially known as ECMAScript 2018, was finalized in June 2018.[16] New features include rest/spread operators for object literals (three dots: ...identifier), asynchronous iteration, Promise.prototype.finally and additions to RegExp.[16]
    The spread operator allows for the easy copying of object properties, as shown below.
    let object = {a: 1, b: 2}
    let objectClone = Object.assign({}, object) // before ES9
    let objectClone = {...object} // ES9 syntax
    let otherObject = {c: 3, ...object}
    console.log(otherObject) // -> {c: 3, a: 1, b: 2}

    From the page you posted:

    Default + Rest + Spread

    Callee-evaluated default parameter values. Turn an array into consecutive arguments in a function call. Bind trailing parameters to an array. Rest replaces the need for arguments and addresses common cases more directly.

  • Forgot to mention, indeed I'm using Qt version 5.15. Pretty sure. Actually I was quite surprised when I read QML implemented ECMA version 7, cause it is quite recent in practice as many companies take some time to adopt these standards anyway.

  • I believe it is V8 under the hood. Just not the most recent version.

Log in to reply