Test your ES6 knowledge

Josh · March 8, 2019, 1:48am

Here’s a fun test of JavaScript knowledge: without running the code below, can you guess what it does or if it will even run at all?

(async x => {
    const { mystery: fun } = {
        [x]: (a = 3, { b = 3 } = {}) => value => [a * b],
    };
    [x] = await fun(2)('TEST');
    console.log(x);
})(`${'my'}stery`);

I saw it here.

(Is it still called ES6 or is it ES201*? I’ve lost track of the name.)

citUser88 · March 9, 2019, 1:01am

Hah, you lost me on that one. I think I’ll have to re-visit my FCC account and go from there, THEN. I will look at it again, I do believe I enjoy where this is headed.

Josh · March 9, 2019, 9:53pm

Hints:

Josh:

    (async x => { // 1, 2
        const { mystery: fun } = { // 3
            // 4, 5, 6, 7
            [x]: (a = 3, { b = 3 } = {}) => value => [a * b],
        };
        [x] = await fun(2)('TEST'); // 8
        console.log(x);
    })(`${'my'}stery`); // 9, 10

For anyone who gets stuck here is a reference on what JS features to research:

Click here for hints (spoilers)

async / await (the await is in the function body)
arrow functions
object destructuring
computed property names
default function parameters. See below.
currying
trailing comma
destructuring again, this time with an array
template strings
IIFE

I don’t know exactly what { b = 3 } = {} is doing, but it looks like it might be putting b = 3 into a block statement and then saying that the block is set to a default of an empty object? I don’t think it would ever use the empty object there, because it isn’t being assigned to a name.

function f(a = 3, { b = 3 } = {}) {
    console.log('a', a);
    console.log('b', b);
}

f();            // a = 3, b = 3
f(1, {});       // a = 1, b = 3
f(1, 7);        // a = 1, b = 3
f(1, { b: 1 }); // a = 1, b = 1

(If I’ve gotten anything wrong there, let me know. )