What's the JavaScript syntax to cast and destructure a param?

Question

This seems like a stupid question. Say I have a function which accepts an object. How can I cast that object as props, but also destructure props.id to id (in the parameter declaration)?

function go ({ id }) {
  const props = arguments[0]; // how to do this with destructure?
  console.log('props', props, 'id', id);
}

go({id: 2});

You cannot. Keep `props` as an argument then `const { id } = props;` — zerkms, Mar 20 '19 at 23:39
Zerkms has the best answer, but if you don't care about code quality and you know the `go` function won't receive extra parameters, you can do `function go(props, {id}=props)` — Khauri, Mar 20 '19 at 23:45
@KhauriMcClain that's a dirty hack but I genuinely like it! :-) — zerkms, Mar 20 '19 at 23:56

score 6 · Accepted Answer · edited Mar 20 '19 at 23:47

6

You can't do it - just keep props as an argument as well to make this code simpler and easier to read:

function go (props) {
  const { id } = props;
  console.log('props', props, 'id', id);
}

go({id: 2});

edited Mar 20 '19 at 23:47

neaumusic

10,027
9
55
83

answered Mar 20 '19 at 23:44

Jack Bashford

43,180
11
50
79

score 3 · Answer 2 · answered Mar 20 '19 at 23:50

3

You can follow this approach which names a param as props and destructures that param to extract the value of Id.

The problem comes when you need to pass an additional param.

function go (props, {id} = props) {
  //const props = arguments[0]; // how to do this with destructure?
  console.log('props', props, 'id', id);
}

go({id: 2});

answered Mar 20 '19 at 23:50

Ele

33,468
7
37
75

1

even worse problem would come if a caller passes the second parameter accidentally – zerkms Mar 20 '19 at 23:57

What's the JavaScript syntax to cast and destructure a param?

2 Answers2