Space between .push array values in jQuery

Question

I've created days names 7 checkboxes and 1 input type hidden. If user click on days names which are checkboxes. Then their values print in the input.
Here is my code:

<div class="ml-4">
    <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="monday" name="days_names" value="Monday">
        <label class="custom-control-label" for="monday">Monday</label>
    </div>
    <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="tuesday" name="day_name_selector" value="Tuesday">
        <label class="custom-control-label" for="tuesday">Tuesday</label>
    </div>
    <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="wednesday" name="day_name_selector" value="Wednesday">
        <label class="custom-control-label" for="wednesday">Wednesday</label>
    </div>
    <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="thursday" name="day_name_selector" value="Thursday">
        <label class="custom-control-label" for="thursday">Thursday</label>
    </div>
    <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="friday" name="day_name_selector" value="Friday">
        <label class="custom-control-label" for="friday">Friday</label>
    </div>
    <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="saturday" name="day_name_selector" value="Saturday">
        <label class="custom-control-label" for="saturday">Saturday</label>
    </div>
    <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="sunday" name="day_name_selector" value="Sunday">
        <label class="custom-control-label" for="sunday">Sunday</label>
    </div>
</div>
<input type="" class="form-control selected_days_names" name="days_names" />

<script>
    $(document).ready(function() {
        $("input[name='day_name_selector']").change(function() {
            var final = new Array();
            $('input[name="day_name_selector"]:checked').each(function(){        
                var values = $(this).val();
                final.push(values);
            });
            $('.selected_days_names').val(final);
        });
    });
</script>

The problem is, I am getting values in input without spaces like this --> Sunday,Monday,Tuesday..... I want it to show the values in input like this --> Sunday, Monday, Tuesday with spaces between values. How can I get spaces between values? Please help me

Answer 1

final is an array, and when you call .val, the expression passed gets automatically converted into a string. When an array is converted to a string, it will, by default, join by just a comma, like .join(','). If you want to join by anything else (like a comma and a space), you have to do so explicitly:

$('.selected_days_names').val(final.join(', '));

Also consider declaring the array with [] instead of new Array():

var final = [];

You can also consider constructing the array all at once with .map:

  var final = $('input[name="day_name_selector"]:checked')
    .map(function(){
      return $(this).val();
    })
    .get();