2021-05-13 22:45:47
예시들은 Javascript
로 작성하겠습니다.
추가로 발견되는 좋은 코딩 습관은 지속적으로 업데이트해 나가겠습니다.
let userFullName = '제임스 아서 고슬링'
let u = '제임스 아서 고슬링'
let a = 45
console.log('유저의 이름 : ' + u + '유저의 나이 :' + a)
위의 코드는 보기에도 이해하기에도 불편합니다.
let [isFind, isCheck] = [false, true]
함수는 기본적으로 어떤 일을 처리하는 행위이기 때문에 동사로 이름을 명시해야 합니다.
// O
function setUserName(user)
// X
function userName(user)
나중에 잘못 이해했을 때 심각한 버그를 만들 가능성이 있는 것들은 변수명에 표현해두는 것이 좋습니다.
코드를 훑어보는 데 걸리는 시간이 적을 수록, 더 많은 개발자들이 쉽게 코드를 이해할 수 있습니다.
fetchBookData().then(()=>{}).catch(()=>{}
fetchBookData().
then(()=>{}).
catch(()=>{}
switch (true) {
case char === `{` || char === `}`:
char === `{` ? stack.forword({}) : stack.backword()
break
case char === `[` || char === `]`:
char === `[` ? stack.forword([]) : stack.backword()
break
case char === 't' || char === 'f':
const isTrue = input[cursor] === 't'
stack.setValue(isTrue ? true : false)
cursor = cursor + (isTrue ? 3 : 4)
break
case char === 'n':
stack.setValue(null)
cursor = cursor + 3
break
}
위의 코드는 이해도 어렵고 눈살이 찌푸려집니다.
아래와 같이 고치는 것이 보기 편하고 유지보수도 편해집니다.
switch (true) {
case isObject(char):
parseObject(char, stack)
break
case isArray(char):
parseArray(char, stack)
break
case isBoolean(char):
cursor = parseBoolean(input, cursor, stack)
break
case isNull(char):
cursor = parseNull(cursor, stack)
break
}
const isObject = v => v === `{` || v === `}`
const isArray = v => v === `[` || v === `]`
const isBoolean = v => v === 't' || v === 'f'
const isNull = v => v === 'n'
const parseObject = (char, stack) => {
char === `{` ? stack.forword({}) : stack.backword()
}
const parseArray = (char, stack) => {
char === `[` ? stack.forword([]) : stack.backword()
}
const parseBoolean = (input, cursor, stack) => {
const isTrue = input[cursor] === 't'
stack.setValue(isTrue ? true : false)
return cursor + (isTrue ? 3 : 4)
}
const parseNull = (cursor, stack) => {
stack.setValue(null)
return cursor + 3
}
// O
if(100 =< userName.length)
// X
if (userName.length >= 100)
아래쪽이 더 명확하며, 영어에서의 어순과도 맞습니다.
인수의 왼쪽은 타겟을 두고, 오른쪽에 비교대상을 두는것이 가독성이 훨씬 좋습니다.
if/else 에서는 긍정(true) 부터 다루는 것이 좋습니다. false를 먼저 다루면, 코드를 이해할 때 한번 부정한 값을 생각해야 하므로 머릿속에서 약간 더 연산의 시간이 지연됩니다.
// O
if (x === y) {
} else {
}
// X
if (x !== y) {
} else {
}
복잡하고 긴 코드를 줄이는 방법 중 하나는 바로 작은 하위 표현을 담을 추가 변수를 만드는 것입니다. 변수명으로 코드를 설명하는 방법입니다.
// X
if((temp.substr(1, temp.length).substr(0, temp.length - 2)) === 'root')
// O
const userName = temp.substr(1, temp.length).substr(0, temp.length - 2);
if(userName === 'root')
일부 개발자들은 필요한 단어를 찾기 힘들다는 이유로 그냥 한국어 발음 그대로 변수명을 짓곤 합니다.
const [yoil, jooso] = ['', '']
이러한 코드는 굉장히 난독화된 코드처럼 보이며, 발음하기 전에는 무슨 코드인지 알기도 어렵습니다. 반드시 지양해야 합니다.
참고 :
https://mingrammer.com/translation-13-simple-rules-for-good-coding/
https://chodragon9.github.io/blog/easy-code/#%EC%9D%B4%EC%A0%9C-%EB%B3%B8%EB%A1%A0%EC%9C%BC%EB%A1%9C-%EB%93%A4%EC%96%B4%EA%B0%80%EA%B2%A0%EC%8A%B5%EB%8B%88%EB%8B%A4
https://rhange.tistory.com/168
클린코드(로버트 C.마틴)