Syntax for destructuring arrays into function parameters in ES6

Question

There is plenty of documentation on how to destructure objects passed as function parameters in Javascript 2015 / ES6 / ECMAScript 2015, with a function like this:

function foo({a, b}) {
   console.log(`a: ${a}, b: ${b}`);
}

But how do you destructure an array parameter?

Honest question: Why is this downvoted? I had trouble finding a straight answer to this question either on SO or on the general internet, and I believe syntax questions are legitimate for SO. — JBCP
– JBCP, Commented May 1, 2016 at 15:31
The documentation on how to destructure object parameters will certainly also cover how to destructure array parameters. — user663031
– user663031, Commented May 1, 2016 at 15:38
@torazaburo then a link to that documentation would be a valid answer to the question — JBCP
– JBCP, Commented May 1, 2016 at 15:43
Ok, buried in two lines of that documentation (10.1.3 Where can destructuring be used?) there is an example of an array being destructured as a function parameter. I still think it is a legitimate question since although the syntax might be obvious, the documentation is not explicit, and having to read the language specification is not always reasonable. — JBCP
– JBCP, Commented May 3, 2016 at 21:27
I thought exactly the same thing. Endless examples of array assignment destructuring, but almost nothing on array parameter destructuring. — trusktr
– trusktr, Commented Mar 15, 2017 at 0:37

nCardot · Accepted Answer · 2021-11-04 05:14:59Z

51

The correct syntax to destructure an array parameter is:

function foo([a, b]) {
   console.log(`param1: ${a}, param2: ${b}`);
}

It can be called like this:

 foo(['first', 'second']);
 // Will output:
 // param1: first, param2: second

According to Exploring ES6, section 11.6, you can use this to destructure parameters within arrow functions as well:

const items = [ ['foo', 3], ['bar', 9] ];
items.forEach(([word, count]) => {
    console.log(word + ' ' + count);
});

edited Nov 4, 2021 at 5:14

nCardot

6,6218 gold badges58 silver badges100 bronze badges

answered Apr 30, 2016 at 22:48

JBCP

13.5k10 gold badges76 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ahmad Ferdous Over a year ago

If we want to capture the remaining parameters in the array, we can use rest operator:function foo([a, b, ...args])

RoboticRenaissance Over a year ago

Thank you. I had it right for my part, but I had other issues that were causing void to be passed into each element of my array. (map instead of tap in rxjs). So I thought I had it wrong.

nCardot Over a year ago

Note the second example will output: foo 3 and bar 9

Collectives™ on Stack Overflow

Syntax for destructuring arrays into function parameters in ES6

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related