JSFiddle - React, Tailwind, and code Playground

HTML

<div id="result1"></div>
<div id="result2"></div>

JavaScript

var arr = [
    { title: "one", attr1: "blah", attr2: "blah" }, // no id, so i want to filter this out
    { "id": 2, title: "two", attr1: "blah", attr2: "blah" },
    { "id": 3, title: "three", attr1: "blah", attr2: "blah" },
    { "id": 4, title: "four", attr1: "blah", attr2: "blah" },
];

    var myMap =  
    (arr.filter(function(e) {
        return e.hasOwnProperty("id")
    })).map(function(e) {
    return e.hasOwnProperty("id") ? e.id : null;
});
    
document.querySelector('#result1').innerHTML = myMap;
    
console.log(myMap); // [undefined, 2, 3, 4]
    
// why does myMap return 'undefined' as the first index?    
// I just want to return [2, 3, 4]
    
    
// I realize that I can use .map() and then .filter() to remove the 'undefined', but I'm working with a huge array, I'd rather only loop through it once.