As a developer, refactoring should permeate every moment of your development day.

Why do you say so?

Refactoring is to improve the design, structure, and implementation of software while preserving its existing functionality. The potential benefits of refactoring include improved code readability and reduced complexity. These can improve the maintainability of the source code and create a simpler, cleaner, or more expressive internal architecture or object model, thus increasing the extensibility of the program.

I think there are two convenient reasons. One is the objective factor. With the continuous updating and iteration of technology, the characteristics of the language are also updated (in the direction of more efficient and convenient). The other is the human factor, with different people writing different code depending on their level of development.

In a team, you not only need to write your own code, but also need to take over others’ code. As a leader, you also need to do code review for others.

So refactoring is necessary, and it’s quiet.

For example, I recently saw a piece of code that immediately made me want to refactor.

The old code looks like this:

Start by defining two constants, an object and an array

const data = {
  Angular: 3,
  React: 1,
  Vue: 2,
  Next: 1,
  HTML: 2,
  Other: 3
};
const colors = [
  '#d17a29',
  '#da9554',
  '#e3af7f',
  '#edcaa9',
  '#f6e4d4',
  '#204e77'
];
Copy the code

Using the for operation, take the key and value of the above object and form a new array with the array elements

let sortable = [];
let index = 0;

for (let temp in data) {
  sortable.push([temp, data[temp], colors[index] ? colors[index] : '#D3D3D3']);
  index++;
}

sortable.sort(function(a, b) {
  return b[1] - a[1];
});
Copy the code

Final output:

[
  ['Angular', 3, '#d17a29'],
  ['Other', 3, '#204e77'],
  ['Vue', 2, '#e3af7f'],
  ['HTML', 2, '#f6e4d4'],
  ['React', 1, '#da9554'],
  ['Next', 1, '#edcaa9']
]
Copy the code

There is no problem with the logical implementation. But something feels wrong. Is there a more efficient way to do it?

Refactored code

Perhaps because of the inertia of writing code, it immediately occurs to you that using the Map method can return data to the format you want.

But the object data format does not seem to support the Map method.

So we have to convert the object to an array first

const newOutput = Object.entries(data);
Copy the code

We will get an array in the following format

[
  ['Angular', 3],
  ['React', 1],
  ['Vue', 2],
  ['Next', 1],
  ['HTML', 2],
  ['Other', 3]
]
Copy the code

There is still a color missing from the elements of the array, and the final need to sort them.

We then add the value of color to the above output based on the index

const newOutput = Object.entries(data)
.map(
  ([title, amount], index) => [
    title,
    amount,
    colors[index] || "#fff"]
);
Copy the code

It’s a little bit easier to understand here or with array deconstruction

const newOutput = Object.entries(data)
  .map((item, index) => [
    ...item,
    colors[index] || '#fff']
  )
  .sort((a, b) => b[1] - a[1]);
Copy the code

We add a default color value when the value is not available

[
  ['Angular', 3, '#d17a29'],
  ['React', 1, '#da9554'],
  ['Vue', 2, '#e3af7f'],
  ['Next', 1, '#edcaa9'],
  ['HTML', 2, '#f6e4d4'],
  ['Other', 3, '#204e77']
]
Copy the code

And then there’s just the next step, and we need to sort the array by the second item, so sort is an easy way to think about it

const newOutput = Object.entries(data)
  .map(
    ([title, amount], index) => [
      title,
      amount,
      colors[index] || "#fff"]
  )
  .sort((a, b) => b[1] - a[1])
Copy the code

The above code output:

[
  ['Angular', 3, '#d17a29'],
  ['Other', 3, '#204e77'],
  ['Vue', 2, '#e3af7f'],
  ['HTML', 2, '#f6e4d4'],
  ['React', 1, '#da9554'],
  ['Next', 1, '#edcaa9']
]
Copy the code

No problem, both different codes get the final result. However, the amount of code refactoring is significantly less than the previous code, and the structure is more rigorous.

In the process of writing code, we should learn to draw inferential conclusions and embrace the new features of the language to bring us a better programming experience.

Also: the above code runs better in the “good tools” JavaScript runtime debugging tool