Similar Posts

Subscribe
Notify of
3 Answers
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Sören Stabenow
1 year ago

Hello,

the first function takes a simple variable as a parameter, can be anything in this case.

The second function defines the parameter “value” which is destructured from an object which has an attribute “value”.

Example:

function xyz(value) {
    console.log(value);
}

function xyz2({ value }) {
    console.log(value);
}

xyz(1); // Loggt: 1
xyz({ value: 1 }); // Loggt: { value: 1 }

xyz2(1); // Loggt undefined, da kein Objekt mit dem Attribut value übergeben wird
xyz2({ value: 1 }); // Loggt 1, da in dem Objekt, welches übergeben wird, ein Attribut value mit dem Wert 1 enthalten ist

More information see Destructuring engagement – JavaScript | MDN (mozilla.org)

Lezurex
1 year ago

You have to call the above example:

xyz("Wert");

The lower example:

xyz({value: "Wert"});

So, above, the function receives its parameters directly, below it gets them via an object. The lower variant has, for example, the advantage that the arguments can be arranged arbitrarily and they must always be addressed with their name.

daCypher
1 year ago

In the first variant, the function takes the argument directly as it is and in the second variant the function gets an object, which contains a key called “value”, which can then be addressed within the function as a variable “value”.