sort

<script>
  var array = [7, 3, 5, 2, 40];
  array.sort(); // 문자순 정렬 [2, 3, 40, 5, 7] 이 나온다.
  array.sort(function(a, b) {
    return a - b
  }); // 숫자 오름차순 정렬 방법

</script>

• 숫자 정렬에서 return이 오른쪽이면 양수면 a를 오른쪽으로, 음수면 b를 오른쪽으로 옮겨주는 원리다.
  • 내림차순하고 싶으면 a, b를 바꾸면 된다는 것이다.

<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((product) => {
            var template = 
                `<div class="col-sm-4">
                    <img src="https://via.placeholder.com/600" class="w-100">
                    <h5>${product.title}</h5>
                    <p>가격 : ${product.price}</p>
                </div>`;

            $('.row').append(template);
            });
        })

</script>

• 해당 페이지의 값들을 모두 삭제하고, 정렬해서 다시 렌더링한다.

filter

var array = [7, 3, 5, 2, 40];

var new_array = array.filter(function(a) {
                    return a < 4;
                  });

• array 자료에서 원하는 것만 filter가 가능하다.
• filter() 결과는 변수에 저장해서 써야된다.
• sort()는 원본을 변형하고, filter는 원본을 변형하지 않는다는 것이다.

map

var array = array.map(function(a) {
  return a < 4;
});

• array 요소 마다 return 문의 연산이 적용되서 새로운 array로 나온다.