Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/trekhleb/state-of-the-art-shitcode
๐ฉState-of-the-art shitcode principles your project should follow to call it a proper shitcode
https://github.com/trekhleb/state-of-the-art-shitcode
best-practice best-practices code-quality coding javascript principles programming style-guides styleguide
Last synced: about 7 hours ago
JSON representation
๐ฉState-of-the-art shitcode principles your project should follow to call it a proper shitcode
- Host: GitHub
- URL: https://github.com/trekhleb/state-of-the-art-shitcode
- Owner: trekhleb
- License: mit
- Created: 2020-01-27T20:25:33.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-07-07T21:22:29.000Z (7 months ago)
- Last Synced: 2025-01-21T17:05:41.337Z (4 days ago)
- Topics: best-practice, best-practices, code-quality, coding, javascript, principles, programming, style-guides, styleguide
- Homepage:
- Size: 62.5 KB
- Stars: 5,750
- Watchers: 51
- Forks: 323
- Open Issues: 48
-
Metadata Files:
- Readme: README.ko-KR.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-list - state-of-the-art-shitcode - of-the-art shitcode principles your project should follow to call it a proper shitcode | trekhleb | 1982 | (Others)
- awesome-tools - State-of-the-Art Shitcode Principles - ๐ฉState-of-the-art shitcode principles your project should follow to call it a proper shitcode (Uncategorized / Uncategorized)
- my-awesome - trekhleb/state-of-the-art-shitcode - practice,best-practices,code-quality,coding,javascript,principles,programming,style-guides,styleguide pushed_at:2024-07 star:5.8k fork:0.3k ๐ฉState-of-the-art shitcode principles your project should follow to call it a proper shitcode (Others)
README
# State-of-the-Art Shitcode์ ๊ท์น
[![State-of-the-art Shitcode](https://img.shields.io/static/v1?label=State-of-the-art&message=Shitcode&color=7B5804)](https://github.com/trekhleb/state-of-the-art-shitcode)
์ด ๋ชฉ๋ก์ ์ฌ๋ฌ๋ถ์ ํ๋ก์ ํธ๊ฐ ์ ๋๋ก shitcode๊ฐ ๋๊ธฐ ์ํด ๋ฐ๋ผ์ผ ํ๋ ๊ท์น๋ค์ ๋๋ค.
_๋ค๋ฅธ ์ธ์ด๋ก ์ฝ๊ธฐ:_
[_English_](README.md),
[_็ฎไฝไธญๆ_](README.zh-CN.md)## ๋ฑ์ง ๋ง๋ค๊ธฐ
๋ง์ผ ์ฌ๋ฌ๋ถ์ ๋ ํฌ์งํ ๋ฆฌ๊ฐ shitcode์ ๊ท์น์ ๋ฐ๋ฅธ๋ค๋ฉด, ์ฌ๋ฌ๋ถ์ ๋ค์๊ณผ ๊ฐ์ "state-of-the-art shitcode" ๋ฑ์ง๋ฅผ ์ฌ์ฉํ ์ ์์ต๋๋ค:
[![State-of-the-art Shitcode](https://img.shields.io/static/v1?label=State-of-the-art&message=Shitcode&color=7B5804)](https://github.com/trekhleb/state-of-the-art-shitcode)
๋ฑ์ง๋ฅผ ๋ง๋ค๊ธฐ ์ํ ๋งํฌ๋ค์ด ์์ค์ฝ๋:
```
[![State-of-the-art Shitcode](https://img.shields.io/static/v1?label=State-of-the-art&message=Shitcode&color=7B5804)](https://github.com/trekhleb/state-of-the-art-shitcode)
```## ๊ท์น
### ๐ฉ ๋ณ์ ์ด๋ฆ ์ ๋งคํ๊ฒ ์ง์ ํ๊ธฐ
์ ์ ํค ์ ๋ ฅ์, ์ฌ๋ฌ๋ถ์ ์๊ฐ์ ์๋ผ๊ฒ ํด์ค๋๋ค.
_Good ๐๐ป_
```javascript
let a = 42;
```_Bad ๐๐ป_
```javascript
let age = 42;
```### ๐ฉ ๋ณ์์ ํจ์์ ์ด๋ฆ ์คํ์ผ์ ์๊ธฐ
๋ค์์ฑ์ ์ถํํฉ์๋ค.
_Good ๐๐ป_
```javascript
let wWidth = 640;
let w_height = 480;
```_Bad ๐๐ป_
```javascript
let windowWidth = 640;
let windowHeight = 480;
```### ๐ฉ ์ฃผ์์ ์ ํ ์์ฑํ์ง ์๊ธฐ
์ด์ฐจํผ ์๋ฌด๋ ๋น์ ์ ์ฝ๋๋ฅผ ์ฝ์ง ์์ ๊ฒ์ ๋๋ค.
_Good ๐๐ป_
```javascript
const cdr = 700;
```_Bad ๐๐ป_
์์ฃผ ์์ฑ๋๋ ์ฃผ์์ '์'๊ฐ ์๋๋ผ '๋ฌด์'์ธ์ง๋ฅผ ํฌํจํด์ผ ํฉ๋๋ค. ๋ง์ผ ์ฝ๋์์ '๋ฌด์'์ด ๋ช ํํ์ง ์์ผ๋ฉด, ์ฝ๋๊ฐ ๋๋ฌด ํํธ๋ฌ์ง ์ ์๊ธฐ ๋๋ฌธ์ ๋๋ค.
```javascript
// 700ms๋ผ๋ ์๋ UX A/B ํ ์คํธ ๊ฒฐ๊ณผ์ ๊ธฐ์ดํ์ฌ ๊ฒฝํ์ ์ผ๋ก ๊ณ์ฐ๋ ๊ฒ์ ๋๋ค.
// @๋ณด์ธ์: <์คํ ๋๋ JIRA ์์ ์ ๊ด๋ จ๋ ๊ฒ ๋๋ ์ซ์ 700์ ๋ํด ์์ธํ ์ค๋ช ํ๋ ๊ฒ์ ๋ํ ๋งํฌ>
const callbackDebounceRate = 700;
```### ๐ฉ ํญ์ ์์ ์ ๋ชจ๊ตญ์ด๋ก ์ฃผ์์ ์์ฑํ๊ธฐ
๋ง์ผ "์ฃผ์ ์์"์ ์์น์ ์๋ฐํ๋ค๋ฉด ์ ์ด๋ ์ฃผ์์ ์ฝ๋ ์์ฑ์ ์ฌ์ฉํ๋ ์ธ์ด์ ๋ค๋ฅธ ์ธ์ด๋ก ์์ฑํ์ธ์. ๋ง์ผ ์ฌ๋ฌ๋ถ์ ๋ชจ๊ตญ์ด๊ฐ ์์ด๋ผ๋ฉด ์ฌ๋ฌ๋ถ์ ์ด ์์น์ ์๋ฐํด๋ ๊ด์ฐฎ์ต๋๋ค.
_Good ๐๐ป_
```javascript
// ะะฐะบัะธะฒะฐัะผะพ ะผะพะดะฐะปัะฝะต ะฒัะบะพะฝะตัะบะพ ะฟัะธ ะฒะธะฝะธะบะฝะตะฝะฝั ะฟะพะผะธะปะบะธ.
toggleModal(false);
```_Bad ๐๐ป_
```javascript
// Hide modal window on error.
toggleModal(false);
```### ๐ฉ ๊ฐ๋ฅํ ๋ง์ด ์์ ์คํ์ผ์ ํผํฉํ๊ธฐ
๋ค์์ฑ์ ์ถํํฉ์๋ค.
_Good ๐๐ป_
```javascript
let i = ['tomato', 'onion', 'mushrooms'];
let d = [ "ketchup", "mayonnaise" ];
```_Bad ๐๐ป_
```javascript
let ingredients = ['tomato', 'onion', 'mushrooms'];
let dressings = ['ketchup', 'mayonnaise'];
```### ๐ฉ ๊ฐ๋ฅํ ๋ง์ด ํ ์ค์ ์ฝ๋ ์ ๋ ฅํ๊ธฐ
_Good ๐๐ป_
```javascript
document.location.search.replace(/(^\?)/,'').split('&').reduce(function(o,n){n=n.split('=');o[n[0]]=n[1];return o},{})
```_Bad ๐๐ป_
```javascript
document.location.search
.replace(/(^\?)/, '')
.split('&')
.reduce((searchParams, keyValuePair) => {
keyValuePair = keyValuePair.split('=');
searchParams[keyValuePair[0]] = keyValuePair[1];
return searchParams;
},
{}
)
```### ๐ฉ ์กฐ์ฉํ ์คํจํ๊ธฐ
์ค๋ฅ๊ฐ ๋ฐ์ํ ๋๋ง๋ค ๋ค๋ฅธ ์ฌ๋์ด ๊ทธ ์ค๋ฅ๋ฅผ ์ ํ์๋ ์์ต๋๋ค. ๋ก๊ทธ๋ ์๊ณ , ์ค๋ฅ ๋ชจ๋ฌ๋ ์์ด, ์ธ๋ํ๊ฒ.
_Good ๐๐ป_
```javascript
try {
// ๋ฌด์ธ๊ฐ ์๊ฒฌ ๋ถ๊ฐ๋ฅํ ๊ฒ.
} catch (error) {
// ์ฟ... ๐คซ
}
```_Bad ๐๐ป_
```javascript
try {
// ๋ฌด์ธ๊ฐ ์๊ฒฌ ๋ถ๊ฐ๋ฅํ ๊ฒ.
} catch (error) {
setErrorMessage(error.message);
// and/or
logError(error);
}
```### ๐ฉ ์ ์ญ ๋ณ์๋ฅผ ๊ด๋ฒ์ํ๊ฒ ์ฌ์ฉํ๊ธฐ
์ธ๊ณ์ ์ธ ์์น์ ๋๋ค.
_Good ๐๐ป_
```javascript
let x = 5;function square() {
x = x ** 2;
}square(); // ์ด์ x๋ 25์ ๋๋ค.
```_Bad ๐๐ป_
```javascript
let x = 5;function square(num) {
return num ** 2;
}x = square(x); // ์ด์ x๋ 25์ ๋๋ค.
```### ๐ฉ ์ฌ์ฉํ์ง ์์ ๋ณ์ ๋ง๋ค๊ธฐ
ํน์ ๋ชจ๋ฅด๋๊น์.
_Good ๐๐ป_
```javascript
function sum(a, b, c) {
const timeout = 1300;
const result = a + b;
return a + b;
}
```_Bad ๐๐ป_
```javascript
function sum(a, b) {
return a + b;
}
```### ๐ฉ ๊ฐ๋ฅํ ์ธ์ด๋ผ๋ฉด ํ์ ์ง์ ๋ฐ/๋๋ ํ์ ๊ฒ์ฌ ํ์ง ์๊ธฐ
_Good ๐๐ป_
```javascript
function sum(a, b) {
return a + b;
}// ํ์์ด ์์ผ๋ฉด ์ ์ด ๋์.
const guessWhat = sum([], {}); // -> "[object Object]"
const guessWhatAgain = sum({}, []); // -> 0
```_Bad ๐๐ป_
```javascript
function sum(a: number, b: number): ?number {
// ์๋ฐ์คํฌ๋ฆฝํธ์์ ๋ฐํ ๋ฐ/๋๋ ํ์ ๊ฒ์ฌ๋ฅผ ํ์ง ์์ ๊ฒฝ์ฐ๋ฅผ ์ปค๋ฒํ๋ ์กฐ๊ฑด
if (typeof a !== 'number' && typeof b !== 'number') {
return undefined;
}
return a + b;
}
// ์ด ๊ฒฝ์ฐ๋ ๋ฐํ/์ปดํ์ผ์ ๊ฒฝ์ฐ์ ์คํจํ ๊ฒ์ ๋๋ค.
const guessWhat = sum([], {}); // -> undefined
```### ๐ฉ ์ฐ๊ฒฐํ ์ ์๋ ์ฝ๋ ์์ฑํ๊ธฐ
์ด ๊ฒ์ด ์ฌ๋ฌ๋ถ์ "ํ๋ B" ์ ๋๋ค.
_Good ๐๐ป_
```javascript
function square(num) {
if (typeof num === 'undefined') {
return undefined;
}
else {
return num ** 2;
}
return null; // ์ด ๊ฒ์ด ๋์ "ํ๋ B".
}
```_Bad ๐๐ป_
```javascript
function square(num) {
if (typeof num === 'undefined') {
return undefined;
}
return num ** 2;
}
```### ๐ฉ ์ผ๊ฐํ ๊ท์น
์์ฒ๋ผ ๋์ - ๋ฅ์ง๋ฅผ ํ์, ๋ฅ์ง๋ฅผ ํ์, ๋ฅ์ง๋ฅผ ํ์.
_Good ๐๐ป_
```javascript
function someFunction() {
if (condition1) {
if (condition2) {
asyncFunction(params, (result) => {
if (result) {
for (;;) {
if (condition3) {
}
}
}
})
}
}
}
```_Bad ๐๐ป_
```javascript
async function someFunction() {
if (!condition1 || !condition2) {
return;
}
const result = await asyncFunction(params);
if (!result) {
return;
}
for (;;) {
if (condition3) {
}
}
}
```### ๐ฉ ๋ค์ฌ์ฐ๊ธฐ ๋ง์น๊ธฐ
๋ค์ฌ์ฐ๊ธฐ๋ ์๋ํฐ์์ ๋ณต์กํ ์ฝ๋์ ๊ณต๊ฐ์ ๋ ์ฐจ์งํ๊ธฐ ๋๋ฌธ์ ๋ค์ฌ์ฐ๊ธฐ๋ฅผ ํผํฉ์๋ค. ๋ง์ฝ ํผํ๊ณ ์ถ์ง ์๋ค๋ฉด ๊ทธ๋ฅ ๊ทธ๋ค์ ์๋ง์ผ๋ก ๊ฐ์ง๊ณ ๋ ธ์ธ์.
_Good ๐๐ป_
```javascript
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 ๐๐ป_
```javascript
const fruits = ['apple', 'orange', 'grape', 'pineapple'];
const toppings = ['syrup', 'cream', 'jam', 'chocolate'];
const desserts = [];fruits.forEach(fruit => {
toppings.forEach(topping => {
desserts.push([fruit, topping]);
});
})
```### ๐ฉ dependencies ์ ๊ทธ์ง ์๊ธฐ
์๋ก์ด ์ค์น๊ฐ ์์ ๋๋ง๋ค ์ ์ด๋์ง ์๋ ๋ฐฉ์์ผ๋ก dependencies๋ฅผ ์ ๋ฐ์ดํธ ํ์ธ์. ์ ๊ณผ๊ฑฐ์ ์ง์ฐฉํ์ฃ , ์ต์ฒจ๋จ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ฒ์ ์ ์ฌ์ฉํฉ์๋ค.
_Good ๐๐ป_
```
$ ls -lapackage.json
```_Bad ๐๐ป_
```
$ ls -lapackage.json
package-lock.json
```### ๐ฉ ํญ์ boolean ํ์ ๋ณ์์ ์ด๋ฆ์ 'flag'๋ก ๋ง๋ค๊ธฐ
boolean ๊ฐ์ด ๋ฌด์์ ์๋ฏธํ๋์ง ๋๋ฃ๋ค์ด ์๊ฐํ ๊ณต๊ฐ์ ๋จ๊ฒจ๋ก์๋ค.
_Good ๐๐ป_
```javascript
let flag = true;
```_Bad ๐๐ป_
```javascript
let isDone = false;
let isEmpty = false;
```### ๐ฉ ๊ธธ๊ฒ ์ฐ์ธ function๋ค์ด ์งง์ ๊ฒ๋ณด๋ค ๋ซ๋ค.
ํ๋ก๊ทธ๋จ ๋ก์ง์ ์ฝ์ ์ ์๋ ์กฐ๊ฐ์ผ๋ก ๋๋์ง ๋ง์๋ค. ๋ง์ผ ์ฌ๋ฌ๋ถ์ด ์ฌ์ฉํ๋ IDE์ ๊ฒ์์ด ์ค๋จ๋๊ณ ํ์์ ์ธ ํ์ผ ๋๋ function์ ์ฐพ์ ์ ์๋ค๋ฉด ์ด๋ป๊ฒ ํ๊ฒ ์ต๋๊น?
- ํ ๊ฐ์ ํ์ผ์ 10000 ์ค์ ์ฝ๋๊ฐ ์์ด๋ ๊ด์ฐฎ์ต๋๋ค.
- ํ ๊ฐ์ function์ 1000 ์ค์ ์ฝ๋๊ฐ ์์ด๋ ๊ด์ฐฎ์ต๋๋ค.
- ๋ง์ ์๋น์ค๋ค (์จ๋ํํฐ์ ๋ด๋ถ๊ธฐ๋ฅ, ๋ช๋ช ํฌํผ๋ค, ORM๊ณผ jQuery slider๋ก ์ง์ ์์ฑ๋ ์๋ฃ๋ค ) ์ด `service.js` ํ๋์ ๋ค์ด์๋ค๊ตฌ์? ๊ด์ฐฎ์ต๋๋ค.### ๐ฉ ์์ฑํ ์ฝ๋๋ฅผ ํ ์คํธ ํด๋ณด๋ ๊ฒ์ ํผํ๊ธฐ
์ด ๊ฒ์ ์ค๋ณต๋๊ณ ๋ถํ์ํ ์ผ์ ์์ ๋๋ค.
### ๐ฉ ์ต๋ํ code linter๋ค์ ํผํ๋ ค๊ณ ๋ ธ๋ ฅํ๊ธฐ
ํนํ ๋ ์ด์์ ๊ฐ๋ฐ์๊ฐ ์๋ ํ์ธ ๊ฒฝ์ฐ ์ํ๋ ๋๋ก ์ฝ๋๋ฅผ ์์ฑํฉ๋๋ค. ์ด๊ฒ์ '์์ '์ ๊ท์น์ ๋๋ค.
### ๐ฉ README ํ์ผ์ด ์์ด ํ๋ก์ ํธ ์์ํ๊ธฐ
๊ทธ๋ฆฌ๊ณ ๋น๋ถ๊ฐ์ ๊ทธ๋ ๊ฒ ์ง๋ด์ธ์.
### ๐ฉ ๋ถํ์ํ ์ฝ๋๊ฐ ํ์ํฉ๋๋ค
์ดํ์์ ์ฌ์ฉํ์ง ์๋ ์ฝ๋๋ฅผ ์ญ์ ํ์ง ๋ง์ธ์. ๊ธฐ๊ปํด์ผ, ์ฃผ์์ ๋ ์ ๋๋ค.