Javascript sort 질문

가나다 정렬 코드를 짜다가 질문이 생겼습니다

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

var allProducts = [...products]; // 모든 로드된 제품을 저장하는 배열
var btn_click = 0;

// 제품 HTML 템플릿 생성 함수
function generateTemplate(product) {
return `
 <div class="col-sm-4">< img src="https://via.placeholder.com/600" class="w-100">
 <h5>${product.title}</h5>
 <p>가격 : ${product.price}</p></div>`;
}

// 제품 목록 업데이트 함수
function updateProductList(products) {
 products.forEach((product) => {
var template = generateTemplate(product);
$('.row').append(template);
});
}

// 초기 제품 목록 업데이트
$(document).ready(function () {
$('.row').html('');
updateProductList(products);
// console.log(products)

$('#more').click(function () {
 btn_click += 1;
if (btn_click == 1) {
loadMoreProducts('https://codingapple1.github.io/js/more1.json');
} else if (btn_click == 2) {
$('#more').addClass('btn-hide');
loadMoreProducts('https://codingapple1.github.io/js/more2.json');
}
});

// 가격순 정렬
$('#sort_price').click(function () {
 allProducts.sort(function (a, b) {
 console.log(a, b)
return a.price - b.price;
});

$('.row').html('');
updateProductList(allProducts);
});

// 가나다 정렬   여기가 문제문제문제문제!!!!!!!!!
$('#sort_msg').click(function() {
 allProducts.sort(function(a, b) {
if ( a.title > b.title) {
return 1;
}
if (a.title < b.title) {
return -1;
}
})
// console.log(allProducts)
 
$('.row').html('');
updateProductList(allProducts);
})

});

// 더 많은 제품을 로드하는 함수
function loadMoreProducts(url) {
 $.get(url).done(function (data) {
 allProducts = allProducts.concat(data); // 새로운 데이터를 기존 데이터에 추가
updateProductList(data);
});
}

현재 코드는 저렇게 되어있지만 
강의에서 가나다 정렬은
var 어레이2 = ['다', '가', '나'];
어레이2.sort();
이렇게 했습니다.
하지만 코드상에서
allProducts.sort();
이렇게 하면 작동하지 않습니다.