What is the best way to start refactoring?

[Pole Polenko]

Here is a poorly written function to change the price of a product that takes into account many different conditions. You need to refactor, since the function itself is terribly unreadable. Where to start refactoring or what methods to use to start refactoring?

function changePrice($this = null) {
  if ($this == null) {
      var rel_price =  $('.all_colors_preview.active#rel_colors').find('.item.active .price').attr('data-price'),
          option_price = $('.all_colors_preview.active#option_colors').find('.item.active .option-price').val(),
          prefix = $('.all_colors_preview.active#option_colors').find('.item.active .option-price-prefix').val(),
          price_current = $('.price_wrapper .price_current'),
          option_sizes = $('.option_size.active'),
          quantity = Number($('#inner .quantity_val').text());
  } else {
    var rel_price =  $this.find('#rel_colors.active .item.active .price').attr('data-price'),
        option_price = $this.find('#option_colors.active .item.active .option-price').val(),
        prefix = $this.find('#option_colors.active .item.active .option-price-prefix').val(),
        price_current = $('.price_wrapper .price_current'),
        option_sizes = $this.find('.option_size.active'),
        quantity = Number($this.find('.quantity_val').text());
  }

  if (!quantity) {
    quantity = Number($('#inner .quantity_val').text());
  }

  var current = Number(price_current.attr('data-original-price'));  

  if (rel_price != '' && rel_price != undefined) {
    price_current.attr('data-update-price', rel_price);
    updated = Number(price_current.attr('data-update-price')) * quantity;
    updated = String(updated).replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ')
    price_current.text(updated + ' ₽');
  } else if (option_price != '' && option_price != undefined && prefix != '') {
    if (prefix == '+') {
      update_price = current + Number(option_price);
    } else {
      update_price = current - Number(option_price);
    }

    price_current.attr('data-update-price', update_price);
    update_price = quantity * price_current.attr('data-update-price');
    price_current.text(String(update_price).replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ') + ' ₽');
  } else if (option_price == '') {
    price_current.attr('data-update-price', current);
    current *= quantity;
    price_current.text(String(current).replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ') + ' ₽');
  } else {
    return false;
  }

  if (option_sizes && option_sizes.length) {
    if (price_current.attr('data-update-price')) {
      current = Number(price_current.attr('data-update-price')); 
    }
    var option_prefix = option_sizes.find('input[type="hidden"]').attr('data-prefix'),
        option_size_price = option_sizes.find('input[type="hidden"]').attr('data-price');
    if (option_prefix == '+') {
      update_price = current + Number(option_size_price);
    } else {
      update_price = current - Number(option_size_price);
    }

    price_current.attr('data-update-price', update_price);
    update_price = quantity * price_current.attr('data-update-price');
    price_current.text(String(update_price).replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ') + ' ₽');
  }

I tried to find a service for automatic refactoring or code analysis, I did not find anything.

[Liutauras Vilda]

Where to start refactoring or what methods to use to start refactoring?

In unit tests. If you don't have them, this is where you start, by writing them. Otherwise, how you'd know you didn't break anything? By writing unit tests, you also would have a chance to understand what this code is actually doing in the first place.

That's not Java code. Perhaps JavaScript.

[Junilu Lacar]

My go-to methods of refactoring are all about clarity and organization:

1. Rename for clarity of intent
2. Extract to eliminate duplication, and to push down implementation details
3. Compose to achieve a single level of abstraction (SLAP)

These refactorings are fairly simple and safe to do, especially if you have local variables or limited scope variables. If you have an IDE that can do automatic refactoring, all the better, since that's much safer than manual refactoring. If you're not disciplined and methodical, manual refactoring is dangerous and could lead to breaking the current functionality.

It's important to have tests that will tell you if you broke something while you were refactoring. Without that safety net, refactoring is risky at best. Rename and Extract + Compose are the least risky of all refactorings I know and they can help you loosen up tightly coupled code enough to be able to add unit tests for isolated sections of the code.

[Junilu Lacar]

Here's what I mean by using Rename/Extract/Compose:

function changePrice($this = null) {
  quantity = strawberry ( . . . );  // determine what values the extracted section needs and pass them in as parameters

  if (!quantity) {
    quantity = Number($('#inner .quantity_val').text());
  }

  var current = Number(price_current.attr('data-original-price'));  

  if (rel_price != '' && rel_price != undefined) {
    price_current.attr('data-update-price', rel_price);
    updated = Number(price_current.attr('data-update-price')) * quantity;
    updated = String(updated).replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ')
    price_current.text(updated + ' ₽');
  } else if (option_price != '' && option_price != undefined && prefix != '') {
    if (prefix == '+') {
      update_price = current + Number(option_price);
    } else {
      update_price = current - Number(option_price);
    }

    price_current.attr('data-update-price', update_price);
    update_price = quantity * price_current.attr('data-update-price');
    price_current.text(String(update_price).replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ') + ' ₽');
  } else if (option_price == '') {
    price_current.attr('data-update-price', current);
    current *= quantity;
    price_current.text(String(current).replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ') + ' ₽');
  } else {
    return false;
  }

  if (option_sizes && option_sizes.length) {
    if (price_current.attr('data-update-price')) {
      current = Number(price_current.attr('data-update-price')); 
    }
    var option_prefix = option_sizes.find('input[type="hidden"]').attr('data-prefix'),
        option_size_price = option_sizes.find('input[type="hidden"]').attr('data-price');
    if (option_prefix == '+') {
      update_price = current + Number(option_size_price);
    } else {
      update_price = current - Number(option_size_price);
    }

    price_current.attr('data-update-price', update_price);
    update_price = quantity * price_current.attr('data-update-price');
    price_current.text(String(update_price).replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ') + ' ₽');
  }

  // extracted - 
  function strawberry( . . . )  {
    if ($this == null) {
      var rel_price =  $('.all_colors_preview.active#rel_colors').find('.item.active .price').attr('data-price'),
          option_price = $('.all_colors_preview.active#option_colors').find('.item.active .option-price').val(),
          prefix = $('.all_colors_preview.active#option_colors').find('.item.active .option-price-prefix').val(),
          price_current = $('.price_wrapper .price_current'),
          option_sizes = $('.option_size.active'),
          quantity = Number($('#inner .quantity_val').text());
    } else {
      var rel_price =  $this.find('#rel_colors.active .item.active .price').attr('data-price'),
        option_price = $this.find('#option_colors.active .item.active .option-price').val(),
        prefix = $this.find('#option_colors.active .item.active .option-price-prefix').val(),
        price_current = $('.price_wrapper .price_current'),
        option_sizes = $this.find('.option_size.active'),
        quantity = Number($this.find('.quantity_val').text());
    }
    return quantity;
}

This only illustrates the idea of extracting a section of code that does one small job so that the big method starts becoming a Composed method. You'd do that multiple times for various sections in the big method until it's only a few lines of code consisting of calls to the extracted methods.

The name strawberry is used on purpose to force you to think of a better name, so you can Refactor-Rename. This is a strategy I learned from Arlo Belshee's Naming is a Process

[Pole Polenko]

And what about the uniqueness of the code? Can I use one code for two different customers?

[Miro Wengner]

the topic of "refactoring" is very interesting, it might be worth looking at the book "Practical Design Patterns for Java Developers" (https://a.co/d/6EPQuiq)
It explores over the chapters through the proposals how to approach challenges.  
If I look at the examples in the thread, the book can give you a guide on how to use the design pattern through refactoring, because IMHO one of the goals of refactoring is maintainability.

those are my 2 Cents

[Carey Brown]

Having a fairly thorough set of regression tests is the best way to start refactoring, that way you can quickly tell if you've broken anything.

[Miro Wengner]

True, I forgot to mention it implicitly. Refactoring requires creating a sufficient set of tests. Since it is being refactored, IMHO: I would consider that the codebase under consideration may contain a hidden problem that is not consistent with the business scenarios or intended technologies. Therefore I'd select the "lowest" layer from the desired high level abstraction, could be for example client as todays apps are very often emitting data over http layer (TCP/IP). And start producing a sufficient coverage (TDD like approach).
Then changing the code base accordingly by following OOP,APIE=>Design Patterns to produce maintainable, understandable and extendable result.
This may also support also another software development approaches like Domain Driven Design, Even Driven Design or etc.

therefore I've referenced the book above "Practical Design Patterns for Java Developers" (https://a.co/d/6EPQuiq) as there are sections exploring those approaches,
Hope it helps!