Guides to Refactoring

james — Sun, 03 Nov 2019 09:59:56 +0000

One of the things I am lacking in experience with is refactoring code. So I did what I always do, and asked Twitter for their thoughts.

https://twitter.com/varjmes/status/1189574679142588417

I picked out a few things from the replies I intend to go through and added some of my own. I cannot vouch for any of these yet, so do let me know what you think of them.

📙 Paid: 99 Bootles of OOP by Sandi Metz
📙 Free: Refactoring JavaScript
📙 Paid: Refactoring by Martin Fowler
📙 Insight Loop: Code by Refactoring, a workshop by Deep Roots
📺 Therapeutic Refactoring by Katrina Owen
📺 Refactoring from Good to Great by Ben Orenstein

A book is never going to teach you something fully though, everything you learn needs to be put into practice. So, find some small pieces of the codebase you're most familiar with and ask yourself if it could use some cleanup. Maybe there's a Class that's 700 lines long? Or a React component that has turned into an absolute monster? 🧟‍♂️

I'm curious if you have any other resources or tips on the art of refactoring, so do share in the comments!

TIL: The pecularity of the sort function

james — Sun, 27 Oct 2019 19:41:20 +0000

Today I learned something strange about the sort function in JavaScript.

This evening I was going through a course on algorithms in JavaScript. The instructor gave a task to create a unique sort function that took an array, removed duplicate values and sorted it in ascending order.

They gave some starting code to work with:

const uniqSort = arr => {
  const breadcrumbs = {}
  return arr.sort((a, b) => a - b)
}

Before tackling the task at hand I said to myself: aha! I don't need to have that function within sort as the sort function already sorts in ascending order!

But then I thought to myself: wait, the instructor put that there for a reason. Let's find out why.

So I went digging. Here is the documentation on the sort function.

If compareFunction is not supplied, all non-undefined array elements are sorted by converting them to strings and comparing strings in UTF-16 code units order.
...
In a numeric sort, 9 comes before 80, but because numbers are converted to strings, "80" comes before "9" in the Unicode order.

Pardon?

So, if I do the following:

[1, 80, 9].sort()

I get

[1, 80, 9]

Because my array values are converted to strings before sorting. And as we saw before, "'80' comes before '9' in the Unicode order"

I'm told this is a common "gotcha!" and I didn't encounter this issue in the 4+ years I've been a developer. I count myself lucky as I bet that would have been annoying to debug.

Make sure you always do your sorts with a function!

[1, 80, 9].sort((a, b) => a - b)

I'm so curious about why this decision was made when the sort function was originally written. If anyone knows please comment. What other weird things in JavaScript do you know about that I might not?

DEV Community: james

Guides to Refactoring

TIL: The pecularity of the sort function