Flag of Ukraine
SymfonyCasts stands united with the people of Ukraine
TRACK

JavaScript Fundamentals >

COURSE

JavaScript for PHP Geeks: ES6/ES2015 (New JavaScript)

Buy Access to Course

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
Previous Chapter

Next Chapter
Edit on GitHub

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:

216 lines web/assets/js/RepLogApp.js
... 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:

217 lines web/assets/js/RepLogApp.js
... 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:

217 lines web/assets/js/RepLogApp.js
... 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:

217 lines web/assets/js/RepLogApp.js
... 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!

Most Useful Newest Oldest
4
Login or Register to join the conversation
GDIBass Avatar
GDIBass Avatar GDIBass | posted 5 years ago

I've also seen this done at the function level:

> addRow({id, itemLabel, reps}) {

Reply
MolloKhan Avatar

Hey GDIBass

That's interesting, I haven't seen it before. How does it work?

Reply
GDIBass Avatar

Yup!.

File testjs.js -----

function testit({id, name}) {
console.log(id,name);
}

testit({id: 'wow', name: 'wowee', somethingelse: 'alsowow'});

Command -----
$ node testjs.js
wow wowee

(credit goes to Tyler McGinnis... I saw him do this in his react course)

1 Reply
MolloKhan Avatar

Nice, thanks for sharing it :)
Let's keep learning!

1 Reply
Cat in space

"Houston: no signs of life"
Start the conversation!

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

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
        "composer/package-versions-deprecated": "^1.11", // 1.11.99
        "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
    }
}
Edit on GitHub
Previous Chapter
Next Chapter
userVoice