title: chaining sort and filter not working javascript
body: <p>I have an array. I want to sort and filter the array. I had try to chain <code>.sort()</code> and <code>.filter()</code>. The <code>.sort()</code> is working good, but not with the <code>.filter()</code>. Here is my example data and function that I had made. Whats goes wrong here?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const data = [{
    name: 'John',
    date: '24 April 2001',
    sex: 'male'
  }, {
    name: 'steve',
    date: '12 August 2012',
    sex: 'male'
  }, {
    name: 'natasha',
    date: '13 October 1992',
    sex: 'female'
  }, {
    name: 'chris',
    date: '8 September 2004',
    sex: 'remain unknown'
  }]
  
  sortAndFilter = (arr, orderBy, order, filterBy, filterValue, dataType) =&gt; {
  
    let result;
    if (filterValue === '') {
      if (dataType === 'string') {
        switch (order) {
          case 'asc':
            result = arr.sort((a, b) =&gt; a[orderBy].localeCompare(b[orderBy]));
            break;
          case 'dsc':
            result = arr.sort((a, b) =&gt; b[orderBy].localeCompare(a[orderBy]));
            break;
          default:
            result = arr.sort((a, b) =&gt; a[orderBy].localeCompare(b[orderBy]));
        }
      } else if (dataType === 'date') {
        switch (order) {
          case 'asc':
            result = arr.sort((a, b) =&gt; new Date(a[orderBy]) - new Date(b[orderBy]));
            break;
          case 'dsc':
            result = arr.sort((a, b) =&gt; new Date(b[orderBy]) - new Date(a[orderBy]));
            break;
          default:
            result = arr.sort((a, b) =&gt; new Date(a[orderBy]) - new Date(b[orderBy]));
        }
      }
    } else {
      if (dataType === 'string') {
        switch (order) {
          case 'asc':
            result = arr.sort((a, b) =&gt; a[orderBy].localeCompare(b[orderBy])).filter(el =&gt; el[filterBy] === filterValue);
            break;
          case 'dsc':
            result = arr.sort((a, b) =&gt; b[orderBy].localeCompare(a[orderBy])).filter(el =&gt; el[filterBy] === filterValue);
            break;
          default:
            result = arr.sort((a, b) =&gt; a[orderBy].localeCompare(b[orderBy])).filter(el =&gt; el[filterBy] === filterValue);
        }
      } else if (dataType === 'date') {
        switch (order) {
          case 'asc':
            result = arr.sort((a, b) =&gt; new Date(a[orderBy]) - new Date(b[orderBy])).filter(el =&gt; el[filterBy] === filterValue);
            break;
          case 'dsc':
            result = arr.sort((a, b) =&gt; new Date(b[orderBy]) - new Date(a[orderBy])).filter(el =&gt; el[filterBy] === filterValue);
            break;
          default:
            result = arr.sort((a, b) =&gt; new Date(a[orderBy]) - new Date(b[orderBy])).filter(el =&gt; el[filterBy] === filterValue);
        }
      }
    }
  
    return result;
  }
  
  sortAndFilter(data, 'name', 'asc', 'sex', 'male', 'string');
  console.log('this is not filtered: ', data);
  
  const finalData = sortAndFilter(data, 'name', 'asc', 'sex', 'male', 'string');
  
  console.log('this one is sorted and filtered: ', finalData);</code></pre>
  </div>
  </div>
  </p>
  
  <p>that is my approach. Whats wrong? or maybe, is there any better approach to achieve this? Thank you in advance.</p>