'array에 자주 쓰는 sort, map, filter 함수' 숙제

var productList2 = [
    { id: 0, price: 70000, title: 'Blossom Dress' },
    { id: 1, price: 50000, title: 'Springfield Shirt' },
    { id: 2, price: 60000, title: 'Black Monastery' }
];

$('.row').html('')
productList2.forEach((product) => {
    var template = `<div class="col-sm-4">
    < img src="https://via.placeholder.com/600" class="w-100">
    <h5>${product.price}</h5>
    <p>가격 : ${product.title}</p>
</div>`
    $('.row').append(template)
})

sortObject = {
    priceSortbtn:function(a, b){return a.price - b.price},
    nameSortBtn: function(a, b) {
        if (a.title > b.title) return -1;
        return 1;

    },
    filterBtn: (a) => a.price < 60000,
    aa:5,
}

$('.btn').click(function () {
    var temp = productList2
    if (this.id == 'filterBtn') {
        temp = temp.filter(sortObject[this.id])
    }
    if (this.id == 'priceSortBtn') {
        temp.sort(sortObject[this.id])
        console.log(sortObject[this.id])
    }
    if (this.id == 'nameSortBtn') {
        temp.sort(sortObject[this.id])
    }
    // productList2.sort((a,b)=>{
    //     return a.price - b.price
    // })
    console.log(temp, sortObject[this.id])
    $('.row').html('')
    temp.forEach((product) => {
        var template = `<div class="col-sm-4">
    < img src="https://via.placeholder.com/600" class="w-100">
    <h5>${product.price}</h5>
    <p>가격 : ${product.title}</p>
</div>`
        $('.row').append(template)
    })
})

sort 관련 함수들이 value로 들어있는 경우 sortObject[this.id] 가 undefined로 뜨면서 정렬작업이 안되는데 이유가 뭘까요?

filter는 동작이 됩니다.