Initializer provides no value for this binding element and the binding element has no default value

Initializer provides no value for this binding element and the binding element has no default value #

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.

Copied!
// ⛔️ 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.

Copied!
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.

Copied!
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.

Copied!
// 👇️ 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.

Copied!
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.

Copied!
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.