destructuring in lambda function returns unexpected value

Question

Correct, expected value returned when function used with destructuring:
[{"k":"key1","v":"val1"},{"k":"key2","v":"val2"},{"k":"key3","v":"val3"}]

console.log(JSON.stringify([{
  k: 'key1',
  v: 'val1',
  z: 'z1'
}, {
  k: 'key2',
  v: 'val2',
  z: 'z2'
}, {
  k: 'key3',
  v: 'val3',
  z: 'z3'
}].map(function(x) {
  let {k, v} = x;
  return {k, v };
})));

However, when lambda function is used with destructuring, incorrect value returned:
[{"k":"key1","v":"val1","z":"z1"},{"k":"key2","v":"val2","z":"z2"},{"k":"key3","v":"val3","z":"z3"}]

    console.log(JSON.stringify([{
      k: 'key1',
      v: 'val1',
      z: 'z1'
    }, {
      k: 'key2',
      v: 'val2',
      z: 'z2'
    }, {
      k: 'key3',
      v: 'val3',
      z: 'z3'
    }].map(x => 
      ({k, v} = x) )));

How would I use destructuring inside lambdas function such that it returns the same as using explicit function() above?

score 5 · Accepted Answer · answered Jun 13 '17 at 20:50

5

You could use destructuring inside of the parameters of the callback of Array#map

let array = [{ k: 'key1', v: 'val1', z: 'z1' }, { k: 'key2', v: 'val2', z: 'z2' }, { k: 'key3', v: 'val3', z: 'z3' }];

console.log(array.map(({ k, v }) => ({ k, v })));

.as-console-wrapper { max-height: 100% !important; top: 0; }

answered Jun 13 '17 at 20:50

Nina Scholz

376,160
25
347
392

Nice! I tried to answer with this but couldn't work out the syntax. – Frank Modica Jun 13 '17 at 21:10

score 1 · Answer 2 · answered Jun 13 '17 at 21:02

1

This is caused beceause this code

{k, v} = x;

is not actually returning {k, v} but x. So you need to destruct object instead first of returning destructive assigment.

answered Jun 13 '17 at 21:02

pato

868
5
10

score 1 · Answer 3 · answered Jun 13 '17 at 21:22

1

The expression ({k, v} = x) assigns to the global k and v variables, and returns the right hand side value x. So you've essentially got an identity function x => x.

You should use destructuring in the parameters, and build an object literal as the return value:

[…].map( ({k, v}) => ({k, v}) );

answered Jun 13 '17 at 21:22

Bergi

630,263
148
957
1,375

1

I didn't even notice the global variable creation. Nice answer, not sure why it was downvoted. – Frank Modica Jun 13 '17 at 21:29

score 0 · Answer 4 · answered Jun 13 '17 at 20:50

0

This works for me:

console.log(JSON.stringify([{
  k: 'key1',
  v: 'val1',
  z: 'z1'
}, {
  k: 'key2',
  v: 'val2',
  z: 'z2'
}, {
  k: 'key3',
  v: 'val3',
  z: 'z3'
}].map(x => {
  let { k, v } = x;
  return { k, v };
})));

answered Jun 13 '17 at 20:50

Frank Modica

10,238
3
23
39

Look carefully at Frank's example. He is returning exactly what he wants, that is `return { k, v };`. In your question, you were essentially saying `return ({k, v} = x)` which is different. – Will Jun 13 '17 at 20:56

destructuring in lambda function returns unexpected value

4 Answers4

Linked