jQuery.map vs $(selector).map and grep

This demo shows their differences.

HTML

<form method="post" action="">
    <fieldset>
        <div>
            <label for="two">2</label>
            <input type="checkbox" value="2" id="two" name="number[]">
        </div>
        <div>
            <label for="four">4</label>
            <input type="checkbox" value="4" id="four" name="number[]">
        </div>
        <div>
            <label for="six">6</label>
            <input type="checkbox" value="6" id="six" checked="checked" name="number[]">
        </div>
        <div>
            <label for="eight">8</label>
            <input type="checkbox" value="8" id="eight" checked="checked" name="number[]">
        </div>
    </fieldset>
    <p></p>
</form>

JavaScript

$(function () {
    var a = [1, 4, 6, 12, 8, 0, 2, 54, 3];
    var b = $.grep(a, function (i, v) {
        return i > 3; //i is the value, v is the index.

    });

    console.log(b);
    
    var c = $.map(a, function(v, i){
        
        return i>3? i + ": " + v: null;
    });
    
    console.log(c);
    

    var ids = $(":checkbox").map(function () {
        return $(this).prop("checked") ? this.id : null;
    }).get();

    console.log(ids);

    var joined = ["test1","test 2"].join("-");


    $("p").html(joined);



});