코드 품질 - 코딩 스타일

코딩스타일은 정답이라고 정해진 것은 없지만, 대부분의 개발자들이 선호하는 스타일이 있습니다.

 

들여쓰기

가로 들여쓰기의 추세!?는 스페이스 2칸입니다. 보통 에디터에서 Tap키 설정을 통해 2칸으로 만들기도 합니다.

새로 들여쓰기는 논리블록 사이 사이 마다 빈 줄을 넣어 가독성을 올려줍니다.

 

가로길이 

가로로 길게 늘어진 코드는 가독성이 좋지 않습니다.

문자열이 길어진다면 여러 줄로 나눠 작성하는 것이 좋습니다.

 

함수의 위치

다른 함수 안에서 특정 기능을 수행하는 함수를 헬퍼 함수라고 하는데,

여러개의 헬퍼함수와 그 함수들을 사용하는 코드를 정리할 때

코드를 먼저, 함수를 그 다음 선언하는 것이 좋습니다.

let num = getNum();
checkNum(num)
sumNum()

function getNum(){

}

function checkNum(num){

}

function sumNum(){

}

이유는 사람들이 '이 코드가 무엇을 하는가' 를 생각하며 코드를 읽기 때문입니다.

위의 코드를 보면 num를 받아오고 -> num을 확인하고 -> num을 합한다의 흐름인 것을 유추할 수 있듯이

함수를 잘 작명했다면 본문을 보지 않고도 그 흐름을 파악하기 쉬워집니다.

 

 

중첩 레벨

코드의 중첩 레벨이 깊어서 많은 중괄호 { } 가 발생된다면 가독성이 처참해 집니다.

function sum(n){
  let num = 0
  
  for (let i = 0; i <= n; i++) {    
    num += i
    if(num > 10){
      break
    }    
  }

  console.log(num)
}
sum(10)

sum 함수는 0부터 인자로 받은 숫자까지의 합을 보여주되,
그 합이 10이상 커지면 계산을 종료하고 합을 출력합니다.

함수의 { } , for문의 { } , if문의 { } 까지  많아질 수록 읽기 어려워집니다.

 for (let i = 0; i <= n; i++) {    
    num += i
    if(num > 10) break    
 }
 
 문서의 본문에서는 if(cond){} 같은 조건식을 if (!cond) continue; 와 같이 바꿔보도록 추천합니다.

if문의 짧은 본문을 중괄호를 제거하고 오른쪽에 나란히 배치했습니다.

위와 같은 if문 한줄 작성은 호불호가 갈리는 것 같습니다!

 

 

아래는 return을 사용해서 중첩레벨 줄이는 예시 코드입니다.

function sum(x, y){
  let result = 0 
  if(x < 0 || y < 0){
    alert("음수 금지.")
  }
  else{
    result = x + y
    console.log(result)
  }  
}

위 코드에서 return을 추가하고 else문을 삭제 했습니다.

function sum(x, y){
  let result = 0 

  if(x < 0 || y < 0) {
    alert("음수 금지.")
    return
  } 

  result = x + y
  console.log(result)
}

 

 

기본이 중요하다.