How do these 2 notations differ in meaning in React.js?

Question

Came across these 2 notations recently. While both appear to be doing similar things, one of them uses an assignment operator while another one appears to be an object. Are they doing anything different?

const { value = "" } = this.props;

and

let { value: newValue } = newProps;

Answer 1

It has nothing to do with React library actually. They are ES6 destructuring assignments.

The first example will create a constant variable called value and will assign whatever is this.props.value (Object, Array, Number). If this.props.value is undefined though it will use default value = "" - empty string.

const { value = "" } = this.props;

In a second example, newValue variable will be created and it will equal to newProps.value (even if it is undefined).

let { value: newValue } = newProps;