Array destructuring in function parameters

Question

I have something here related to array destructuring that I don't fully understand.

In the following example:

function foo( [a, b, c] ) {
    console.log(a, b, c)
}

foo( 1, 2, 3 );

When I run this I get the following error:

Uncaught TypeError: undefined is not a function

Now, I am not questioning the fact that this doesn't output 1, 2, 3 as one might expect since only the first value 1 actually get destructured (a = 1[0], b = 1[1], c = 1[2]).

But here's the thing:

I can perfectly write 1[0], 1[1], 1[2] and I get undefined for each of those.

Then why the foo function I wrote above throws an exception instead of simply returning 3 times undefined as I'd expect.

Indeed, if I write bar as following, I am getting 3 undefined as should happen.

function bar() {
    console.log( 1[0], 1[1], 1[2] )
}

bar();
// undefined undefined undefined

Can someone tell me what JS does in the first foo() and why the output it's not undefined undefined undefined?

I've not seen destructuring done in this way; are you able to point to some documentation on how this kind of destructuring works? — OliverRadini
– OliverRadini, Commented Jul 13, 2018 at 13:41
@tommyO No. The syntax should be correct. Indeed, by passing foo( [1, 2, 3] ). It gets properly deconstructed and properly assigned. — leonardofed
– leonardofed, Commented Jul 13, 2018 at 13:46
@OliverRadini I couldn't find on MDN. Have a look at: 2ality.com/2015/01/es6-destructuring.html — leonardofed
– leonardofed, Commented Jul 13, 2018 at 13:47
The problem is that Number.prototype[Symbol.iterator] is undefined. Not that I recommend it but If you do Number.prototype[Symbol.iterator] = function*(){} it will work. — Yury Tarabanko
– Yury Tarabanko, Commented Jul 13, 2018 at 13:49

trincot · Accepted Answer · 2018-07-13 14:26:09Z

5

Destructuring with an array pattern uses iteration in the background, i.e. the value being destructured must be iterable.

In fact, in Firefox, the error message seems more indicative:

TypeError: (destructured parameter) is not iterable

That is where the comparison you make with evaluating 1[0], 1[1], 1[2] goes wrong: that does not need 1 to be iterable.

A more correct comparison would be to do this:

console.log([...1]);
// or:
const [a, b, c] = 1;

...and that code will fail.

edited Jul 13, 2018 at 14:26

answered Jul 13, 2018 at 14:00

trincot

357k38 gold badges282 silver badges338 bronze badges

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

Comments

Yury Tarabanko · Accepted Answer · 2018-07-13 14:20:07Z

5

Array destructuring is actually Iterator Destructuring that works with anything implementing Symbol.iterator method.

For example

function foo([a, b, c]) {
  console.log([a, b, c])
}

foo({
  * [Symbol.iterator]() {
    yield 1;
    yield 2;
    yield 3;
  }
})

Number doesn't implement iterator protocol

console.log(1[Symbol.iterator])

That's why you get the error.

But if you implement it (NOT RECOMMENDED)

Number.prototype[Symbol.iterator] = function*() {
  yield * this.toString(2); // just an example
}

function foo([a, b,c]) {
  console.log(a, b, c);
}

foo(6)

edited Jul 13, 2018 at 14:20

answered Jul 13, 2018 at 13:59

Yury Tarabanko

45.1k10 gold badges88 silver badges99 bronze badges

3 Comments

trincot Over a year ago

I think you somehow destructured the second word in your answer :-P

Yury Tarabanko Over a year ago

@trincot LOL :)

leonardofed Over a year ago

Thanks, @YuryTarabanko. (Now) Totally makes sense. :)

Niladri Basu · Accepted Answer · 2018-07-13 14:26:39Z

1

This happens because the function foo() can only accept iterables. See the below given example:

function foo( [a, b, c] ) {
    console.log(a, b, c)
}

foo( [4, 5, 6] );  // works okay

foo( 3,4,5 ); // undefined is not a function

IMHO, spread operator is used as a gatherer in these type of scenarios like this:

function foo( ...[a, b, c] ) {
    console.log(a, b, c)
}

foo( ...[4, 5, 'v'] );  //works fine

foo(1,3,4); // also works fine

Why foo() throws an exception?

That's because of incompatible parameters (b/w caller & calee) which has nothing to do with the fact that in JavaScript 1[0] is undefined.

edited Jul 13, 2018 at 14:26

answered Jul 13, 2018 at 13:58

Niladri Basu

10.7k7 gold badges59 silver badges65 bronze badges

2 Comments

leonardofed Over a year ago

"This happens because the function foo() can only accept array or destructured array" This is actually not true.

Niladri Basu Over a year ago

@leonardofed can it accept other values than array? (Updated my answer)

Ankit Agarwal · Accepted Answer · 2018-07-13 13:49:24Z

0

The function foo() is completely different with bar() due to the fact that 1 is a valid number in javascript and trying to access 1[0] is undefined as it looks for the index 0 of value 1 which is surely undefined. That is why you get three undefined for 1[0], 1[1], 1[2]

Now, the single undefined from foo() is not from console.log() but it is from the error

Uncaught TypeError: undefined is not a function

As your function signature is incorrect. To use it in proper way you can use spread syntax:

function foo(...arg) {
    console.log(arg[0], arg[1], arg[2]);
}

foo( 1, 2, 3 );

edited Jul 13, 2018 at 13:49

answered Jul 13, 2018 at 13:37

Ankit Agarwal

30.8k5 gold badges41 silver badges63 bronze badges

1 Comment

leonardofed Over a year ago

You didn't answer my question. The question is not, why does bar() output undefined, but why does foo() throw an exception. Please read carefully.

I am L · Accepted Answer · 2018-07-13 14:12:04Z

0

It's because function foo is expecting an array/string so he can destruct it.

Since you're not passing anything it causes the destruction to fail, this is like doing

var arrayVariable = undefined
var [a, b, c] = arrayVariable // this will throw an error
var d = arrayVariable['a'] // this will throw an error

So to avoid throwing an error, provide an array argument

foo('') // undefined, undefined, undefined
foo('123') // 1, 2, 3
foo([]); // undefined, undefined, undefined
foo([1, 2, 3]) // 1, 2, 3

edited Jul 13, 2018 at 14:12

answered Jul 13, 2018 at 14:03

I am L

4,6806 gold badges38 silver badges55 bronze badges

6 Comments

Yury Tarabanko Over a year ago

" function foo is expecting an array " nope. Try foo('abc')

Yury Tarabanko Over a year ago

"It's because function foo is expecting an array/string (something that you can access with prop[value])" yet again nope. Try foo({})

I am L Over a year ago

Yeah, my bad. What I meant was something that you can access with property[value]

Yury Tarabanko Over a year ago

Yes but you obviosly can access empty object's props. :)

trincot Over a year ago

"It's because function foo is expecting an array/string so he can destruct it.": it does not necessarily have to be an array or string.

|

Collectives™ on Stack Overflow

Array destructuring in function parameters

5 Answers 5

Comments

3 Comments

2 Comments

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

3 Comments

2 Comments

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related