Source: github.com/trekhleb/state-of-the-art-shitcode

???? Name variables in a way that the code has been obfuscated
???? Mixed variable/function naming style
???? Don't write comments
???? Write notes in your native language
???? Mix as many different formats as possible
???? Write the code in one line as much as possible
???? Don't handle errors
???? Extensive use of global variables
???? Create variables you won't use
???? If the language allows, do not specify the type and/or do not perform type checking.
???? You should have unreachable code
???? Rule of Triangle
???? Mixed indentation
???? Don't lock your dependencies
???? Long functions are better than short ones
???? Don't test your code
???? Avoid uniform code style
???? Build a new project without README document
???? Save unnecessary code

???? Name variables in a way that the code has been obfuscated

The less things we type, the more time we have to think about code logic and other issues.

Good ????????

let a = 42;

Bad ????????

let age = 42;

???? Mixed variable/function naming style

Celebrate the difference.

Good ????????

let wWidth = 640;
let w_height = 480;

Bad ????????

let windowWidth = 640;
let windowHeight = 480;

???? Don't write comments

No one will read your code anyway.

Good ????????

const cdr = 700;

Bad ????????

More often, comments should include some "why" rather than some "what". If the "what" is not clear in the code, then the code may be too messy.

// 700ms的数量是根据UX A/B测试结果进行经验计算的。
// @查看: <详细解释700的一个链接>
const callbackDebounceRate = 700;

???? Write notes in your native language

If you violate the "no comments" principle, at least try to write comments in a different language than the language you use to write code. If your native language is English, you may violate this principle.

Good ????????

// Закриваємо модальне віконечко при виникненні помилки.
toggleModal(false);

Bad ????????

// 隐藏错误弹窗
toggleModal(false);

???? Mix as many different formats as possible

Celebrate the difference.

Good ????????

let i = ['tomato', 'onion', 'mushrooms'];
let d = [ "ketchup", "mayonnaise" ];

Bad ????????

let ingredients = ['tomato', 'onion', 'mushrooms'];
let dressings = ['ketchup', 'mayonnaise'];

???? Write the code in one line as much as possible

Good ????????

document.location.search.replace(/(^\?)/,'').split('&').reduce(function(o,n){n=n.split('=');o[n[0]]=n[1];return o},{})

Bad ????????

document.location.search
  .replace(/(^\?)/, '')
  .split('&')
  .reduce((searchParams, keyValuePair) => {
    keyValuePair = keyValuePair.split('=');
    searchParams[keyValuePair[0]] = keyValuePair[1];
    return searchParams;
  },
  {}
)

???? Don't handle errors

Whenever an error is discovered, there is no need to let anyone know about it. No logs, no error popups.

Good ????????

try {
  // 意料之外的情况。
} catch (error) {
  // tss... ????
}

Bad ????????

try {
  // 意料之外的情况。
} catch (error) {
  setErrorMessage(error.message);
  // and/or
  logError(error);
}

???? Extensive use of global variables

Principles of globalization.

Good ????????

let x = 5;

function square() {
  x = x ** 2;
}

square(); // 现在x是25

Bad ????????

let x = 5;

function square(num) {
  return num ** 2;
}

x = square(x); // 现在x是25

???? Create variables you won't use

just in case.

Good ????????

function sum(a, b, c) {
  const timeout = 1300;
  const result = a + b;
  return a + b;
}

Bad ????????

function sum(a, b) {
  return a + b;
}

???? If the language allows, do not specify the type and/or do not perform type checking.

Good ????????

function sum(a, b) {
  return a + b;
}

// 在这里享受没有注释的快乐
const guessWhat = sum([], {}); // -> "[object Object]"
const guessWhatAgain = sum({}, []); // -> 0

Bad ????????

function sum(a: number, b: number): ?number {
  // 当我们在JS中不做置换和/或流类型检查时，覆盖这种情况。
  if (typeof a !== 'number' && typeof b !== 'number') {
    return undefined;
  }
  return a + b;
}

// 这个应该在转换/编译期间失败。
const guessWhat = sum([], {}); // -> undefined

???? You should have unreachable code

This is your "Plan B".

Good ????????

function square(num) {
  if (typeof num === 'undefined') {
    return undefined;
  }
  else {
    return num ** 2;
  }
  return null; // 这就是我的"Plan B".
}

Bad ????????

function square(num) {
  if (typeof num === 'undefined') {
    return undefined;
  }
  return num ** 2;
}

???? Rule of Triangle

Just like the bird's nest, the bird's nest, the bird's nest.

Good ????????

function someFunction() {
  if (condition1) {
    if (condition2) {
      asyncFunction(params, (result) => {
        if (result) {
          for (;;) {
            if (condition3) {
            }
          }
        }
      })
    }
  }
}

Bad ????????

async function someFunction() {
  if (!condition1 || !condition2) {
    return;
  }

  const result = await asyncFunction(params);
  if (!result) {
    return;
  }

  for (;;) {
    if (condition3) {
    }
  }
}

???? Mixed indentation

Avoid indentation, as they will make complex code take up more space in the editor. If you don't like to avoid them, make trouble with them.

Good ????????

const fruits = ['apple',
  'orange', 'grape', 'pineapple'];
  const toppings = ['syrup', 'cream',
                    'jam',
                    'chocolate'];
const desserts = [];
fruits.forEach(fruit => {
toppings.forEach(topping => {
    desserts.push([
fruit,topping]);
    });})

Bad ????????

const fruits = ['apple', 'orange', 'grape', 'pineapple'];
const toppings = ['syrup', 'cream', 'jam', 'chocolate'];
const desserts = [];

fruits.forEach(fruit => {
  toppings.forEach(topping => {
    desserts.push([fruit, topping]);
  });
})

???? Don't lock your dependencies

Update each newly installed dependency in an uncontrolled manner. Why stick to the past version and let us use the most advanced library version.

Good ????????

$ ls -la

package.json

Bad ????????

$ ls -la

package.json
package-lock.json

???? Long functions are better than short ones

Don't divide program logic into readable parts. What if the IDE search stops and you cannot find the file or function you need?

10,000 lines of code in a file is OK.
1000 lines of code for a function body is OK.
Handling many services (third-party and internal, there are also some tools, database handwritten ORM and jQuery slider) in a'service.js'? This is OK.