Borislav Hadzhiev
Thu Mar 17 2022·3 min read
Photo by Edwin Andrade
The error "Initializer provides no value for this binding element and the binding element has no default value" occurs when we try to destructure a property from an object which doesn't contain it. To solve the error, provide a default value for the property.
Here are 2 examples of how the error occurs.
// ⛔️ Error: Initializer provides no value // for this binding element and the binding // element has no default value.ts(2525) function greet({ name: yourName } = {}) { return `Hello ${yourName}`; } // ⛔️ Error: Initializer provides no value // for this binding element and the binding // element has no default value.ts(2525) const { country } = {};
We can solve the error by providing a default value for the property.
function greet({ name: yourName } = { name: 'James Doe' }) { return `Hello ${yourName}`; } console.log(greet()); // 👉️ "Hello James Doe" console.log(greet({ name: 'Alice' })); // "Hello Alice" const { country } = { country: 'Germany', };
The example above provides a default value for the entire object with the specific property defined.
Note that we can now call the greet
function without passing it any
parameters, not even an empty object is needed.
Alternatively, you could provide a default value for the specific property.
function greet({ name: yourName = 'James Doe' }) { return `Hello ${yourName}`; } console.log(greet({})); // 👉️ "Hello James Doe" console.log(greet({ name: 'Alice' })); // "Hello Alice" const { country = 'Germany' } = {};
The greet
function has to be called with an empty object when we want to use
the default value for the name
property. This happens because we've set a
default value for the name
property, but we haven't set a default value for
the entire object.
// 👇️ default value for ALL properties and for object function greet({ name: yourName = 'James Doe' } = {}) { return `Hello ${yourName}`; } console.log(greet()); // 👉️ "Hello James Doe" console.log(greet({ name: 'Alice' })); // "Hello Alice" const { country = 'Germany' } = {};
If the object on the last line doesn't have a country
property, then the
country
variable gets assigned to Germany
.
On the other hand, if the property is defined on the object, it will get
assigned to the country
variable.
const { country = 'Germany' } = { country: 'Austria' }; console.log(country); // 👉️ "Austria"
The value of the country
property on the object overrides the default value of
Germany
in the example.
You can also use a question mark to mark a property of the object as optional.
function greet({ name: yourName }: { name?: string } = {}) { return `Hello ${yourName}`; } console.log(greet()); // 👉️ "Hello undefined" console.log(greet({ name: 'James' })); // "Hello James"
The name
property is marked as optional. This means that the property can
either be a string
or be undefined
.
We've also provided an empty object as a default value for the parameter, so the
greet
function can be invoked without any parameters.
If you want to make the entire object optional without setting any default values, make sure to set all of the object's properties to optional.