I have this object

const config = {
    js: {
        files: [
            {
                src: './js/app.js',
                name: 'script.js',
                dest: 'public_html/js/'
            },
            {
                src: './js/admin.js',
                name: 'script.js',
                dest: 'public_html/js/'
            }
        ]
    }
};

and I want to get this (getting all the sources):

sources = ['./js/app.js', './js/admin.js']

// or, at least
sources = [{'./js/app.js'}]

I know how to do it with a loop, but can I do it with ES6 deconstructing?

Something like:

{sources = [{src}]} = config.js;

OR

{[{src}] : sources} = config.js;

I have this object

const config = {
    js: {
        files: [
            {
                src: './js/app.js',
                name: 'script.js',
                dest: 'public_html/js/'
            },
            {
                src: './js/admin.js',
                name: 'script.js',
                dest: 'public_html/js/'
            }
        ]
    }
};

and I want to get this (getting all the sources):

sources = ['./js/app.js', './js/admin.js']

// or, at least
sources = [{'./js/app.js'}]

I know how to do it with a loop, but can I do it with ES6 deconstructing?

Something like:

{sources = [{src}]} = config.js;

OR

{[{src}] : sources} = config.js;

• javascript
• arrays
• object
• ecmascript-6

• 3 Is there a particular reason you want to use destructuring over a loop? Or even, a simple map? – chazsolo Commented Mar 4, 2017 at 17:19
• 1 Just use a loop. Don't try to force the wrong tool for the job. – Carcigenicate Commented Mar 4, 2017 at 17:22
• 3 var sources = config.js.files.map(e => e.src) – Nenad Vracar Commented Mar 4, 2017 at 17:22
• 1 Just wanted to see how far I can push destructure. – Claudiu Commented Mar 6, 2017 at 12:17

4 Answers 4

Destructuring is not meant for a case such as this. Simply using map() will easily get the job done.

const config = {
    js: {
        files: [
            {
                src: './js/app.js',
                name: 'script.js',
                dest: 'public_html/js/'
            },
            {
                src: './js/admin.js',
                name: 'script.js',
                dest: 'public_html/js/'
            }
        ]
    }
};

console.log(config.js.files.map(x => x.src));

You could use destructuring with an iterator like Array#entries and a for ... of statement and a temporary variable index.

var config = { js: { files: [{ src: './js/app.js', name: 'script.js', dest: 'public_html/js/' }, { src: './js/admin.js', name: 'script.js', dest: 'public_html/js/' }] } },
    index,
    result = [];

for ({ 0: index, 1: { src: result[index] } } of config.js.files.entries());

console.log(result)

It's not possible to destructure something like this without a loop or map due to the array.

You can use destructuring in a for-of loop to iterate through the files:

let srcs = [];
for (let {src} of config.js.files) {
  srcs.push(src);
}

But a better approach would be to use array methods:

// using map
let srcs = config.js.files.map(file => file.src);

// or by using reduce
let srcs = config.js.files.reduce((result, file) => result.concat(file.src), []);

Use JavaScript Array.map() method.

DEMO

const config = {
    js: {
        files: [
            {
                src: './js/app.js',
                name: 'script.js',
                dest: 'public_html/js/'
            },
            {
                src: './js/admin.js',
                name: 'script.js',
                dest: 'public_html/js/'
            }
        ]
    }
};

var res = config.js.files.map(function(item) {
  return item.src;
});

console.log(res);