JS - sort, map, filter 함수

상품 가격순 정렬버튼과 기능 만들어보기!
1. products라는 변수 안에 있던걸 가격순으로 정렬하고
2. 클릭 시 카드를 싹 지운 후 products 변수에 있던 순서대로 카드를 다시 생성하면 완성이 된다
그렇다면 array 정렬하는 방법은??

array정렬하는 법

array자료는 순서개념이 있어 정렬도 가능하다
그냥 가나다 순으로 정렬하려면 .sort()를 붙이면 되지만 숫자정렬은?

var 어레이 = [7,3,5,2,40];
어레이.sort(function(a, b){
  return a - b
});

console.log(어레이);

이렇게 해줘야한다

코드 동작 원리를 알면 나중에 응용도 쉽게 가능하기 때문에 sort()의 동작원리를 알아보자!

어레이.sort(function(a, b){
  return a - b
}); 

1. a, b는 array 안의 자료들이다
2. return 오른쪽이 양수면 a를 오른쪽으로 정렬해준다 (a가 더 큰 숫자로 정렬)
3. reutrn 오른쪽이 음수면 b를 오른쪽으로 정렬해준다 (b가 더 큰 숫자로 정렬)
4. 이렇게 array 안의 자료들을 계속 뽑아서 a, b에 넣어준다

ex) a, b 가 7과 3일 경우 [7, 3]
7-3 = 4
4는 양수이기 때문에 7을 3보다 오른쪽으로 보내준다 [3, 7]

Q. array 안의 숫자를 내림차순 정렬로는 어떻게?

var 어레이 = [7,3,5,2,40];

어레이.sort(function(a, b){
  return b - a 
}); 

내림차순은 큰 숫자가 더 앞에 오기 때문에 a와 b의 위치만 바꿔주면 된다

버튼을 누르면 products를 가격순으로 정렬해보기

sort 함수를 사용하면 된다

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

다만 products 는 [{}, {}, {}] 이런 형태기 때문에 콜백함수 안의 식이 조금 바껴야한다
a, b는 지금 {}, {} 이 상태인데 object 두개를 빼봤자 음수나 양수가 나오지 않는다

따라서 {} - {} 이렇게 빼는 것이 아닌 {}안에있는 가격 - {}안에있는 가격
이렇게 빼야 음수나 양수가 나온다!

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

console.log(products); 

html 정렬 해보기

1. 가격순 정렬 버튼을 누르면
2. products 자료를 가격순으로 정렬하고
3. 현재 있는 3개의 카드를 지운 후 products 갯수만큼 카드를 새로 만들기

<div class="container my-3">
      <button class="btn btn-danger" id="price">가격순정렬</button>
</div>

<script>
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(템플릿)
      })
});
</script>

array 에 자주 쓰이는 filter 함수

var 어레이 = [7,3,5,2,40];

var 새어레이 = 어레이.filter(function(a){
  return 조건식
}); 

1. a는 array 안에 있던 데이터
2. return 우측에 조건식을 넣으면 조건식에 맞는 a만 남겨준다
3. filter 은 원본을 변형시키지 않기 때문에 새로운 변수에 결과를 담아써야한다

ex)

var 어레이 = [7,3,5,2,40];

var 새어레이 = 어레이.filter(function(a){
  return a < 4
}); 

-> [2, 3] 만 남게된다

Q. 어디에 응용하나요?

쇼핑몰에서 "6만원 이하 상품만 보기" 이런 필터 기능을 만들 수 있다

array 에 자주쓰이는 map 함수

array 안의 자료들을 전부 변형시키려면 map 함수를 쓴다

var 어레이 = [7,3,5,2,40];

var 새어레이 = 어레이.map(function(a){
  return 수식같은거
}); 

1. a는 array 안에 있던 데이터
2. return 우측에 변경될 수식같은걸 넣기
3. filter와 같이 map 도 원본을 변형시키지 않기 때문에 새로운 변수에 담아써야한다

ex)

var 어레이 = [7,3,5,2,40];

var 새어레이 = 어레이.map(function(a){
  return a * 4
}); 

-> [28, 12, 20, 8, 160] 가 된다

Q. 어디에 응용하나요?

쇼핑몰에서 "달러 -> 원화로 변환하기" 기능을 만들 수 잇다


(참고)
sort 함수는 원본을 변형시킨다

---

오늘의 숙제

1. "상품명 다나가순 정렬" 버튼과 기능 만들기
2. "6만원 이하 상품보기" 버튼과 기능 만들기

1번 숙제

<script>
      $("#name").click(function () { 
        products.sort(function (a, b) {
          if (a.title < b.title) {
            return -1;
          } else if (a.title > b.title) {
            return 1;
          }
          return 0;
        });
        $(".row").html("");

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

2번숙제

<script>
let under6products = products.filter(function (a) {
        return a.price <= 60000;
      });
      $("#under6").click(function () {
        $(".row").html("");

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