[JavaScript] Sort

이번에는 sort함수 사용 방법에 대해 알아보겠습니다.

sort 알아보기

sort함수로 내림차순 하는 방법을 먼저 알아보도록 하겠습니다.

var arr = ['가', '나', '다'];
arr.sort(function(a, b){
  return 여기 뭐써야함?
});

오름차순 정렬되어 있는 arr을 ['다', '나', '가']로 내림차순정렬해보겠습니다.

sort함수의 작동원리는

• a, b는 arary안에 있는 자료들임.
• return값이 양수면 a를 우측으로 보냄
• return값이 음수면 b를 우측으로 보냄
• array 안의 자료를 다 끌고와서 a, b에 계속 넣어봄.

이렇습니다.

위 코드에서 중요한건 return 우측에 뭘 집어넣냐인데

예를들어
(1) a, b가 '가', '다'일 경우 return 양수
(2) a, b가 '다', '나'일 경우 return 음수
(3) a, b가 '가', '나'일 경우 return 양수
이런식으로 들어가면 됩니다.

a < b일 경우 return 양수
a > b일 경우 return 음수 

var arr = ['가', '나', '다'];
arr.sort(function(a, b){
  if(a<b) {
    return 1;
  } else{
    return -1;
  }
});

console.log(arr);  //['다', '나', '가']

'가격순정렬' 버튼만들기

1) '가격순정렬' 버튼을 누르면
2) products 안에 있는 자료들을 가격을 기준으로 내림차순으로 정렬하고
3) 카드들을 싹 지웠다가 procudcts순으로 다시 만드려고 합니다.

<div class="container">
  <div class="row">

  </div>
</div> 

<div class="container my-3">
  <button class="btn btn-danger" id="sort1">내림차순정렬</button>
</div>

일단 클래스명이 row인 div박스를 만들고 안을 비워두겠습니다.

그리고 div박스 밑에 '내림차순정렬'버튼을 만들었습니다.

let products = let 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가 출력됩니다.

내림차순 정렬은 되었지만 기존에 있던 것들은 지워줘야 할 것 같습니다.

let products = 생략;

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

기존 html을 다 지우고
새로 products 순서대로 생성해달라고 코드를 짰습니다.

그럼 버튼 클릭 시 products가 가격 내림차순으로 정렬되어 보입니다.

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

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

'6만원이하'라는 버튼을 하나 생성하겠습니다.

let products = 생략;

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

'6만원이하'버튼을 클릭하면
6만원 이하인 상품만 newProduct라는 변수에 남아있습니다.

그럼 html을 비우고 newProduct갯수만큼 카드레이아웃을 생성하면 될 것 같습니다.

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

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

arrow function을 쓰면 이렇게 표현할 수 있겠습니다.

함수{}안에 retunr 한 줄밖에 없으므로 중괄호와 return을 동시에 생략가능합니다.