Reducing the number of hard-coded variables and properties, and reducing redundancy

When looking at the Vue JavaScript, it is quickly evident that it can be optimized by introducing global variables and setting more local variables in the functions to make it more readable. We can also use existing functionality to stop repeating ourselves.

The first optimization is in our filterRow() method where we check whether filter.field is active. This is also repeated in the isActiveFilterSelected method we use to show and hide our radio buttons. Update the if statement to use this method instead, so the code is as follows: 

      ...

    if(this.filter.field === 'isActive') {
    result = (typeof this.filter.query === 'boolean') ?       
    (this.filter.query === person.isActive) : true;
      } else {

      ...

The preceding code has the this.filter.field === 'isActive' code removed and replaced with the isActiveFilterSelected() method. It should now look like this:

      ...

    if(this.isActiveFilterSelected()) {
    result = (typeof this.filter.query === 'boolean') ?     
     (this.filter.query === person.isActive) : true;
     } else {

      ...

While we're in the filterRow method, we can reduce the code by storing the query and field as variables at the start of the method. result is also not the right keyword for this, so let's change it to visible. First, create and store our two variables at the start and rename result to visible:

      filterRow(person) {
        let visible = true,
            field = this.filter.field,
            query = this.filter.query;

      ...

Replace all instances in that function of the variables, for example, the first part of the method would look like this:

      if(field) {
          if(this.isActiveFilterSelected()) {
            visible = (typeof query === 'boolean') ?   
            (query === person.isActive) : true;
          } else {
      
          query = String(query),
          field = person[field];

Save your file and open the app in the browser to ensure your optimizations haven't broken the functionality.

The last stage is to reorder the methods into an order that makes sense to you. Feel free to add comments to separate out the different method types—for example, ones that relate to CSS classes or filtering. I have also removed the activeStatus method, as we are able to utilize our format method to format the output of this field. After the optimizations, the JavaScript code now looks like the following:

      const app = new Vue({
        el: '#app',
         data: {
          people: [...],
          currency: '$',
          filter: {
            field: '',
            query: ''
          }
        },
        methods: {
          isActiveFilterSelected() {
            return (this.filter.field === 'isActive');
          },
          /**
           * CSS Classes
           */
          activeClass(person) {
             return person.isActive ? 'active' : 
             'inactive';
          },
           balanceClass(person) {
            let balanceLevel = 'success';
            if(person.balance < 2000) {
              balanceLevel = 'error';
            } else if (person.balance < 3000) {
              balanceLevel = 'warning';
            }
                let increasing = false,
                balance = person.balance / 1000;
            if(Math.round(balance) == 
             Math.ceil(balance)) {
              increasing = 'increasing';
            }
            return [balanceLevel, increasing];
          },
          /**
           * Display
           */
          format(person, key) {
            let field = person[key],
            output = field.toString().trim();
            switch(key) {
              case 'balance':
                output = this.currency + 
              field.toFixed(2);
                break;
              case 'registered':
          let registered = new Date(field);
          output = registered.toLocaleString('en-US');
          break;  
        case 'isActive':
          output = (person.isActive) ? 'Active' : 
          'Inactive';
            }
        return output;
          },  
          /**
           * Filtering
           */
          changeFilter(event) {
            this.filter.query = '';
            this.filter.field = event.target.value;
          },
          filterRow(person) {
            let visible = true,
                field = this.filter.field,
                query = this.filter.query; 
            if(field) {  
              if(this.isActiveFilterSelected()) {
                visible = (typeof query === 'boolean') ?
               (query === person.isActive) : true;
              } else { 
                query = String(query),
                field = person[field];
                if(typeof field === 'number') {
                  query.replace(this.currency, '');  
                  try {
                    visible = eval(field + query);
                  } catch(e) {}  
                } else {  
                  field = field.toLowerCase();
                  visible = 
                  field.includes(query.toLowerCase());         
                }
              }
            }
            return visible;
          }
        }
      });