Destructuring

Keep on Learning!

If you liked what you've learned so far, dive in!
Subscribe to get access to this tutorial plus
video, code and script downloads.

Start your All-Access Pass
Buy just this tutorial for $12.00

Next, we're going to talk about two kinda weird things. At first, neither or these will seem all that useful. But even if that were true, you're going to start to see them in use, even in PHP! So we need to understand them!

Destructuring

The first has a cool name: destructuring! In RepLogApp, find _addRow(). To start, just dump the repLog variable:

... lines 1 - 2
(function(window, $, Routing, swal) {
class RepLogApp {
... lines 5 - 166
_addRow(repLog) {
console.log(repLog);
... lines 169 - 176
}
}
... lines 179 - 214
})(window, jQuery, Routing, swal);

Now, refresh! This is called a bunch of times, and each repLog has the same keys: id, itemLabel, links, reps and totalWeightLifted. Destructuring allows us to do this weird thing: let {id, itemLabel, reps} = repLog. Below, log id, itemLabel and reps:

... lines 1 - 2
(function(window, $, Routing, swal) {
class RepLogApp {
... lines 5 - 166
_addRow(repLog) {
let {id, itemLabel, reps} = repLog;
console.log(id, itemLabel, reps);
... lines 170 - 177
}
}
... lines 180 - 215
})(window, jQuery, Routing, swal);

Yep, this weird line is actually going to create three new variables - id, itemLabel, and reps - set to the values of the id, itemLabel and reps keys in repLog.

Let's see it in action: refresh! Got it! This is called destructuring, and you can even do it with arrays, which looks even stranger. In that case, the variables are assigned by position, instead of by name. Oh, and side-note, PHP7 introduced destructuring - so this exists in PHP!

Destructuring & Default Values

What if we try to create a variable that does not match a key, like, I don't know, totallyMadeUpKey:

... lines 1 - 2
(function(window, $, Routing, swal) {
class RepLogApp {
... lines 5 - 166
_addRow(repLog) {
let {id, itemLabel, reps, totallyMadeUpKey} = repLog;
console.log(id, itemLabel, reps, totallyMadeUpKey);
... lines 170 - 177
}
}
... lines 180 - 215
})(window, jQuery, Routing, swal);

Try to print that. What do you think will happen?

It's not an error: it just prints as undefined. So destructuring is friendly: if something goes wrong, it doesn't kill your code: it just assigns undefined. If you think this might be possible, you can give that variable a default, like whatever:

... lines 1 - 2
(function(window, $, Routing, swal) {
class RepLogApp {
... lines 5 - 166
_addRow(repLog) {
let {id, itemLabel, reps, totallyMadeUpKey = 'whatever!'} = repLog;
console.log(id, itemLabel, reps, totallyMadeUpKey);
... lines 170 - 177
}
}
... lines 180 - 215
})(window, jQuery, Routing, swal);

Now, if the key doesn't exist, it'll get set to whatever.

So, this is destructuring. It may or may not be useful to you, but you will see it! Don't let it surprise you!

Leave a comment!

This tutorial uses Symfony 3. But, since this is a JavaScript tutorial, all the concepts work fine in newer versions of Symfony.

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": "^7.2.0",
        "symfony/symfony": "3.2.*", // v3.2.14
        "twig/twig": "2.10.*", // v2.10.0
        "doctrine/orm": "^2.5", // v2.7.1
        "doctrine/doctrine-bundle": "^1.6", // 1.10.3
        "doctrine/doctrine-cache-bundle": "^1.2", // 1.3.2
        "symfony/swiftmailer-bundle": "^2.3", // v2.4.2
        "symfony/monolog-bundle": "^2.8", // v2.12.1
        "symfony/polyfill-apcu": "^1.0", // v1.3.0
        "sensio/distribution-bundle": "^5.0", // v5.0.22
        "sensio/framework-extra-bundle": "^3.0.2", // v3.0.19
        "incenteev/composer-parameter-handler": "^2.0", // v2.1.2
        "friendsofsymfony/user-bundle": "~2.0@dev", // dev-master
        "doctrine/doctrine-fixtures-bundle": "~2.3", // v2.4.1
        "doctrine/doctrine-migrations-bundle": "^1.2", // v1.2.1
        "friendsofsymfony/jsrouting-bundle": "^1.6" // 1.6.0
    },
    "require-dev": {
        "sensio/generator-bundle": "^3.0", // v3.1.2
        "symfony/phpunit-bridge": "^3.0" // v3.2.2
    }
}