sort, filter, map

• html

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

    </div>
  </div>

• 테스트 예제

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

• 동적으로 html 만들기 위한 템플릿 함수

function 템플릿(data) {
      data.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.toLocaleString('ko-Kr')}원</p>
      </div>
    `
        row.append(템플릿);
      })
    }

 

 

Map

•  map()
  • 새로운 배열을 반환
  • 원본 배열의 각 요소에 대해 제공된 결과 값으로 반환

const arr = [1, 2, 3];
const mappedArr = arr.map(x => x * 2);
console.log(mappedArr);  // [2, 4, 6]
console.log(arr);  // [1, 2, 3] (원본 배열은 변하지 않음)

• 기존 원화로 가격을 표시한 부분을 달러로 변경

   $("#dollar").on('click', () => {
      let newPrice = products.map( a => {
        return {
          ...a,
          price: (a.price / exchangeRate).toFixed(2)
        } 
      })
      console.log(newPrice)
      row.html('');
      템플릿1(newPrice);
    })

• 해당 객체에서 가격 부분을 달러로 변환

return (a.price / exchangeRate).toFixed(2)

• 위와 같이 return 만 해주게 된다면 기존 객체에서 가격 정보만 새롭게 만들어 반환해 준다.
• id, title은 제외 됨 객체로 반환 받고 싶다면 아래와 같이 해야 함

return {
          ...a, // 기존 객체를 복사(스프레드 연산자 사용)
          price: (a.price / exchangeRate).toFixed(2) 
        } 

• price: 와 같이 해주게 되면 기존 객체에서 price만 부문만 변경하여, 새로운 객체를 생성하여 반환해준다.
• 결과

[
    {
        "id": 1,
        "price": "37.65",
        "title": "Springfield Shirt"
    },
    {
        "id": 2,
        "price": "45.18",
        "title": "Black Monastery"
    },
    {
        "id": 0,
        "price": "52.71",
        "title": "Blossom Dress"
    }
]

 

 

 

filter

•  filter()
  • 새로운 배열을 반환
  • 제공된 조건을 만족하는 원본 배열의 요소들만 추출하여 새로운 배열을 생성

const arr = [1, 2, 3];
const mappedArr = arr.map(x => x * 2);
console.log(mappedArr);  // [2, 4, 6]
console.log(arr);  // [1, 2, 3] (원본 배열은 변하지 않음)

• filter를 사용해서 특정 가격 이하인 요소만 새로운 배열로 생성

$("#under").on('click', () => {
      let newProducts = products.filter( a => {
        return a.price <= 60000
      })
      row.html(''); // 기존 요소가 존재 할 수도 있기 때문에 요소를 비워준다.
      템플릿(newProducts);
    })

• 결과

[
    {
        "id": 1,
        "price": 50000,
        "title": "Springfield Shirt"
    },
    {
        "id": 2,
        "price": 60000,
        "title": "Black Monastery"
    }
]

 

 

sort

•  sort()
  • 원본 배열을 수정
  • 원본 배열을 정렬해주고, 새로운 배열을 반환하지 않음
  • 원본 배열 자체가 정렬된 상태로 변경

const arr = [3, 1, 4, 2];
const sortedArr = arr.sort((a, b) => a - b);
console.log(sortedArr);  // [1, 2, 3, 4]
console.log(arr);  // [1, 2, 3, 4] (원본 배열이 수정됨)

• 가격 정렬 버튼

// 가격 정렬 버튼
$("#price").on('click', () => { 
      products.sort((a, b) => {
        return a.price - b.price;
      })
      row.html(''); 
      템플릿(products);
    })

• sort((a,b) ⇒ { return a - b})
  • a, b 각 요소를 가르키는 요소
  • return a - b : 계산하여 양수면 a를 오른쪽 요소로 이동 음수라면 b를 오른쪽으로 이동
  • 양수인 경우는 a > b 크기 때문에 오름차순 정렬을 하기 위해서 a를 오른쪽으로 옮긴다.
  • 반대로 내림차순 정렬을 하려면 return b - a 로 작성
• 결과

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

결론

• map()과 filter()는 새로운 배열을 생성하며, 원본 배열에는 영향을 주지 않습니다.
• sort()는 원본 배열을 수정하며, 새로운 배열을 반환하지 않습니다.