销毁散布的javascript参数

Question

This code

const foo = {props: {a: 'b'}};

const bar = (props) => {console.log({new: 'object', props})}

bar(foo)

results in the same exact output if i change (props) => to ({...props}) =>

What exactly is happening here?

The reason i am asking is because i am doing something similar in React with a pure component.

 export default ({ ...props }) => (
  <BaseLayout {...props} theme={defaultTheme} />
);

If i remove the spread operator in the parameter the component no longer renders.

I would appreciate if someone could explain exactly what is going on in both examples and if there is any difference between the JSX code and regular javascript, thanks.

Answer 1

It creates a shallow clone of an object like Object.assign() did but in a cleaner way.

You can look at many use cases here: https://dmitripavlutin.com/object-rest-spread-properties-javascript/