What do curly braces around a variable in a function parameter mean

Question

I saw this code on a package:

const SortableList = SortableContainer(({items}) => {
 return (
     <ul>
        {items.map((value, index) =>
            <SortableItem key={`item-${index}`} index={index} value={value} />
        )}
    </ul>
 );
});

What is happening to items by putting curly braces around it in the function parameters?

Answer 1

This is destructuring assignment syntax.

As another example, the following two lines of code are equal:

const { items } = args

const items = args.items

Simply put, it is a simplified way of accessing specific field of a given variable for further use in that scope.

In your original example, it is declaring a variable items for use in the function body that is the items field of that first argument.

const SortableList = SortableContainer(({items}) => {
    // do stuff with items here

is equal to

const SortableList = SortableContainer((input) => {
    const items = input.items
    // do stuff with items here

Answer 2

This question is likely a repost: What do {curly braces} around javascript variable name mean

But as an answer, it's destructuring assignment. If your object being passed in mirrors the variable being referenced, you can retrieve that specific field during assignment.