JavaScript refactoring techniques-functions and classes

John Au-Yeung
Source: medium
Translator: Frontend Xiaozhi

There are dreams and dry goods. search 1608215114c24d [Great Move to the World] still doing dishes in the early morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, the first-line factory interview complete test sites, materials and my series of articles.

JavaScript is an easy-to-learn programming language, and it is easy to write programs that run and perform certain operations. However, it is very difficult to write a clean JavaScript code.

In this article, we will introduce some refactoring ideas related to cleaning up JavaScript functions and classes.

Don't assign values directly to parameters

Before using the parameter, we should delete the parameter assignment and assign the parameter value to the variable.

For example, we might write code like this:

const discount = (subtotal) => {
  if (subtotal > 50) {
    subtotal *= 0.8;
  }
}

Compared with the above code, we can write:

const discount = (subtotal) => {
  let _subtotal = subtotal;
  if (_subtotal > 50) {
    _subtotal *= 0.8;
  }
}

Because the parameter may be passed by value or by reference, if it is passed by reference, direct negative value operation, some results will make you feel confused.

In this example, it is passed by value, but for the sake of clarity, we still assign the parameter to the variable.

Replace method with function

We can turn a method into its own function so that all classes can access it.

For example, we might write code like this:

const hello = () => {
  console.log('hello');
}
class Foo {
  hello() {
    console.log('hello');
  }
  //...
}
class Bar {
  hello() {
    console.log('hello');
  }
  //...
}

We can hello method into the function as follows:

const hello = () => {
  console.log('hello');
}
class Foo {
  //...
}
class Bar {
  //...
}

Since the hello method does not depend on this and is repeated in both classes, we should move it to its own function to avoid duplication.

Alternative algorithm

Relative to the process-style writing, we want to use a clearer algorithm instead. For example, we might write code like this:

const doubleAll = (arr) => {
  const results = []
  for (const a of arr) {
    results.push(a * 2);
  }
  return results;
}

Compared with the above code, we can write:

const doubleAll = (arr) => {
  return arr.map(a => a * 2);
}

By replacing the loop with the array method, the doubleAll function will be more concise.

If there is an easier way to solve our needs, then we should use it.

Moving method

Between two classes, we can move the methods of one class to another class. For example, we might write code like this:

class Foo {
  method() {}
}
class Bar {
}

If we use method Bar class, we should method method to the Bar class, and Foo can directly call the method in the Bar class.

class Foo {
}
class Bar {
  method() {}
}

Move field

In addition to moving methods, we can also move fields. For example, we might write code like this:

class Foo {
  constructor(foo) {
    this.foo = foo;
  }
}
class Bar {
}

Similar to the reason for the move method, we sometimes change the code like this:

class Foo {
}
class Bar {
  constructor(foo) {
    this.foo = foo;
  }
}

We can move the field to where it is most needed

Extraction class

If our class is complex and has multiple methods, then we can move the additional methods to the new class.

For example, we might write code like this:

class Person {
  constructor(name, phoneNumber) {
    this.name = name;
    this.phoneNumber = phoneNumber;
  }
  addAreaCode(areaCode) {
    return `${areaCode}-${this.phoneNumber}`
  }
}

We can refactor like this:

class PhoneNumber {
  constructor(phoneNumber) {
    this.phoneNumber = phoneNumber;
  }
  addAreaCode(areaCode) {
    return `${areaCode}-${this.phoneNumber}`
  }
}
class Person {
  constructor(name, phoneNumber) {
    this.name = name;
    this.phoneNumber = new PhoneNumber(phoneNumber);
  }
}

Above we moved the addAreaCode Person class to the class we should handle.

By doing this, two classes do only one thing, instead of letting one class do multiple things.

to sum up

We can extract code from complex classes that can add multiple functions to their classes.

In addition, we can move methods and fields to the most commonly used places.

Assigning values to parameter values can cause confusion, so we should assign them to variables before using them.

---

possible bugs after 1608215114c5ac code deployment cannot be known in real time. In order to solve these bugs afterwards, a lot of time was spent on log debugging. By the way, I would like to recommend a useful BUG monitoring tool Fundebug .

Original: https://levelup.gitconnected.com/javascript-refactoring-conditionals-6d74a1138c96

---

communicate with

There are dreams and dry goods. search 1608215114c62e [Daily Move to the World] still doing dishes in the early morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, the first-line interview complete test site, information and my series of articles.