What is the use of Salesforce lightning dualbox in sfdc?

A lightning:dualListbox component represents two side-by-side listboxes. Select one or more options in the list on the left. Move selected options to the list on the right. The order of the selected options is maintained and you can reorder options.

I am sharing an example of lightning dualbox :-

<aura:application extends=”force:slds”>
    <!– search term –>
    <aura:attribute name=”term” type=”String” />
    <!– currently displayed items –>
    <aura:attribute name=”options” type=”List” default=”[]” />
    <!– all items –>
    <aura:attribute name=”allOptions” type=”List” default=”[]” />
    <!– selected values –>
    <aura:attribute name=”selected” type=”List” default=”[]” />

    <!– load data from somewhere –>
    <aura:handler name=”init” value=”{!this}” action=”{!c.init}” />
    <!– update list when term changes –>
    <aura:handler name=”change” value=”{!v.term}” action=”{!c.search}” />

    <lightning:input type=”text” value=”{!v.term}” label=”Filter” />
    <lightning:dualListbox value=”{!v.selected}” options=”{!v.options}” label=”Items”
sourceLabel=”Available” selectedLabel=”Selected” />
</aura:application>

({
    init: function(component, event, helper) {
    // Load data
    helper.init(component);
},
search: function(component, event, helper) {
    // Filter list
    helper.search(component);
    }
})

({
    init: function(component) {
        // Load some default values.
        component.set(“v.allOptions”, [
        { value: “Hello”, label: “Hello” },
        { value: “World”, label: “World” },
        { value: “Test”, label: “Test” }
    ]);
    // Initialize the options list
    this.search(component);
},
search: function(component) {
    // Search term
    var term = component.get(“v.term”);
    // Show all when no filter, or when filter matches label or value
    component.set(“v.options”,
    component.get(“v.allOptions”)
    .filter(
    item => !term ||
    item.value.match(term) ||
    item.label.match(term)));
}
})