가격순

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

products.sort(function(a, b){
  return a - b 
}); 

이렇게 .sort 뒤에 붙이는건 맞는데
콜백함수 안의 식이 좀 달라져야할 것 같습니다.
왜냐면 products는 [ { }, { }, { } ] 이렇게 생겼습니다.

그래서 a, b는 지금 { }, { } 이건데 object 두개를 a - b 이렇게 빼봤자 음수나 양수가 나오지 않습니다.

{ } - { } 이렇게 빼지 말고
{ } 안에 있는 가격 - { } 안에 있는 가격
이렇게 빼보면 음수나 양수가 나오지 않을까요?
그럼 이제 양수가 나오거나 하면 a를 오른쪽으로 보내거나 그래줄듯

products.sort(function(a, b){
  return a.price - b.price 
});

console.log(products); 

그래서 object 안에 있는 가격끼리 빼보라고 했더니 정렬이 됩니다.

결론

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

$('#price').click(function(){

      products.sort(function(a, b){
        return a.price - b.price
      });

      $('.row').html('');

      products.forEach((a, i)=>{
        var 템플릿 = 
        `<div class="col-sm-4">
          <img src="https://via.placeholder.com/600" class="w-100">
          <h5>${products[i].title}</h5>
          <p>가격 : ${products[i].price}</p>
        </div>`;
        $('.row').append(템플릿)
      })
}); 

1. 그래서 id="price" 인 버튼 만들고
2. 누르면 products 자료 정렬하라고 했고
3. 상품목록 html 싹 비우고 새로 3개 넣으라고 했습니다. 데이터바인딩도 잘 했습니다.

이제 정렬버튼 누르면 상품3개가 잘 정렬됩니다.

문자순(다나가순)

위에 가격순은 숫자로 활용하는 방법이고, 문자로 역순을 해결하려면 숫자를 나열한 걸 활용하면 된다.

중요한건 return 우측에 뭘 집어넣냐는 건데

예를 들어서
(1) a, b가 '가', '다' 일 경우 return 우측에 양수가 들어가야 다나가순 정렬이 됩니다.
(2) a, b가 '다', '나' 일 경우 return 우측에 음수가 들어가야 다나가순 정렬이 됩니다.
(3) a, b가 '가', '나' 일 경우 return 우측에 양수가 들어가야 다나가순 정렬이 됩니다.
....

이렇게 대충 하나하나 대입해서 따져보면 규칙같은게 눈에 보이는군요.

a < b 일 경우 return 우측에 양수가 들어가면 되고
a > b 일 경우 return 우측에 음수가 들어가면 됩니다.

(자바스크립트는 문자끼리 부등호비교가 가능합니다. ㄱ보다 ㅎ 이게 더 큽니다.)

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

$('#sort1').click(function(){
  
  products.sort(function(a, b){
    if (a.title < b.title) {
      return 1
    } else {
      return -1
    }
  });
  
  console.log(products)
});

이렇게 짰더니 버튼누르면 정렬된 products가 출력되는군요.

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

$('#sort1').click(function(){
  
  products.sort(function(a, b){
    if (a.title < b.title) {
      return 1
    } else {
      return -1
    }
  });
  
  $('.row').html(''); //카드 다 없애주셈
  products.forEach((a, i)=>{
    var 템플릿 = `<div>상품명은 ${products[i].title}</div>`;
    $('.row').append(템플릿)
  })
});

카드3개 html 다 지우고
새로 products 순서대로 생성해달라고 코드짰습니다.
이제 #sort1를 가진 버튼누르면 products가 정렬되어보이는군요.

6만원이하 상품보기 버튼과 기능

<div class="container my-3">
  <button class="btn btn-danger" id="filter">6만원이하</button>
</div>

버튼 하나 위에 만들었습니다.

var products = 생략;

$('#filter').click(function(){
  
  var newProduct = products.filter(function(a){
    return a.price <= 60000
  });
  
  console.log(newProduct)
});

이렇게 짰더니 버튼누르면 6만원 이하인 상품만 newProduct라는 변수에 남아있습니다.
그 다음에 html 비우고 newProduct 갯수만큼 카드레이아웃 생성하라고 코드짜면 됩니다.
그것은 아까랑 비슷하니 생략합시다.

화살표 함수 변환하기

//일반함수
var newProduct = products.filter(function(a){
  return a.price <= 60000
}); 

//화살표함수
var newProduct = products.filter(a => a.price <= 60000);

가독성보다는 그냥 코드를 줄이고 싶으면 arrow function 써도 될듯
이 경우 함수에 파라미터가 1개면 소괄호 생략이 가능합니다.
함수 { } 안에 return 한 줄 밖에 없으면 중괄호와 return 동시에 생략가능합니다.

출처 : 코딩애플