Javascript 기초 (18) 코딩 스타일

🤔들어가면서🤔

좋은 코딩이란 무엇일까? 디자인 패턴? 오류가 안나는 코드? 🤔 
구글에 검색해보니, 
"가독성이 좋아 이해하기 쉽고, 변경하기 쉬우며, 재사용하기 쉽고, 효율적인 코드"가 좋은 코드라고 한다. 
검색해보니 아주 많은 글이 나와서 차근히 읽어보면 좋을 것 같다. 

좋은 코드에 대해서는 굉장히 많은 이야기가 있지만 조금 더 명확하게 코딩을 하는 규칙이 정해져있기도 하다.
바로 "코딩스타일","코딩 컨벤션"인데, 코드를 만들 때 지켜야하는 코딩 스타일이다. 
사용하는 프로그래밍 언어나 프로젝트에 따라 코딩 컨벤션이 정해져있다.
Js의 코딩스타일에 대해서 알아보자.
(별개로 좋은 코드에 대해서 계속해서 고민하는 것 필요한 것 같다!)

좋은 코드에 대해서

📕 Js의 코딩 스타일

• 이는 모던스타일에서 추천하는 코딩 스타일이다. 무조건적으로 따를 필요는 없다고 하지만 공동의 프로젝트에서 코드스타일을 맞추는건 읽기에도 좋을 것 같다.
  

📒 중괄호

🤔 if문의 한 줄 짜리 수행문을 어떻게 하면 좋을까?

😤 필요없는 중괄호

• 중괄호가 필요하지 않기 때문에 추천 X

if (n < 0) {alert(`Power ${n} is not supported`);}

😠 중괄호 없는 새로운 코드

• 오류 발생, 절대 금지!!

if (n < 0)
  alert(`Power ${n} is not supported`);

🙂 중괄호 없이

• 코드가 짧을 때는 한 줄에 쓰는 방법도 괜찮다.

if (n < 0) alert(`Power ${n} is not supported`);

😄 적절한 중괄호

• 가장 가독성이 좋기 때문에 이 방법을 가장 추천한다고 함.

if (n < 0) {
  alert(`Power ${n} is not supported`);
}

📒 가로 길이

🤔 코드의 가로 길이가 너무 길다면 읽기 힘들어진다.

😄 가로길이가 너무 길지 않도록 문자열의 경우 백틱을 사용하고, if문이라면 조건을 줄바꿈을 해서 적는 것이 좋다.

📒 들여쓰기

🙂 가로 들여쓰기는 Tap보다는 스페이스를 선호하는 추세라고함, 세로 들여쓰기는 적절하게!

➕ 세로 들여쓰기
변수 선언, 반복문, 리턴 문 사이에는 줄바꿈을 하는 것이 좋다.
아홉줄 이상 세로 들여쓰기가 없는 경우에는 가독성이 떨어진다고 한다.

📒 세미콜론

🙂 세미콜론은 쓰는 것이 좋다. (자바스크립트 엔진이 자동으로 세미콜론을 붙여준다고 하더라도!!)

📒 중첩 레벨

🤔 너무 깊은 중첩레벨은 피하는 것이 좋다. 특히 반복문에서의 if문의 중첩은 continue문으로, 함수내의 중첩은 return으로 해소할 수 있다.

👉 if문을 써서 특정 조건에서 여러 실행문을 쓰고 싶을 때, 특정 조건이 아닐때 continue문으로 사용할 수 있다.

😑 과한 중첩

for (let i = 0; i < 10; i++) {
  if (cond) {
    ... // <- 중첩 레벨이 하나 더 늘어났습니다.
  }
}

🙂 향상된 코드

for (let i = 0; i < 10; i++) {
  if (!cond) continue;
  ...  // <- 추가 중첩 레벨이 추가되지 않습니다.
}

👉 함수내에서 적절한 return문의 사용은 중첩을 줄일 수 있다.

😑 함수내의 과한 중첩

function pow(x, n) {
  if (n < 0) {
    alert("'n'은 음수가 될 수 없습니다.");
  } else {
    let result = 1;

    for (let i = 0; i < n; i++) {
      result *= x;
    }

    return result;
  }
}

🙂 향상된 코드

• 특정 조건을 통과하면 추가 중첩없이 주요코드 흐름으로 넘어가게 코드를 짰다.

function pow(x, n) {
  if (n < 0) {
    alert("'n'은 음수가 될 수 없습니다.");
    return;
  }

  let result = 1;

  for (let i = 0; i < n; i++) {
    result *= x;
  }

  return result;
}

📒 헬퍼 함수

헬퍼함수 : 다른 함수 안에서 특정기능을 하고 있는 함수를 말한다.

🤔 헬퍼함수와 헬퍼함수를 사용하는 코드의 정의순서

😄 헬퍼 함수를 사용하는 코드 → 헬퍼 함수

• 코드가 먼저 나오는 것이 더 자연스럽고 좋은 함수명으로 함수의 역할을 유추할 수 있기 때문이다.

📒 그 외

1. 함수 이름과 괄호 및 인자사이에는 공백이 없다.
2. 매개 변수 사이에는 공백 한 칸을 준다.
3. 중괄호는 공백 한칸을 두고 같은 줄에서 사용한다.
4. for/if/while의 뒤에 공백 한 칸을 준다.
5. 연산자는 앞뒤에 공백한칸을 준다.
6. 논리적으로 다른 블록은 한 줄을 띄어쓴다.
7. 인수 사이에는 공백한칸을 준다.
8. 중첩된 호출은 앞뒤에 공백을 준다.

🤔 Eslint

• Linter라는 도구를 사용하면 내가 작성한 코드가 스타일 가이드를 준수하고 있는지를 자동으로 확인할 수 있고, 스타일 개선과 관련된 제안도 받을 수 있습니다. (사용 방법은 좀 더 고수가 된다음에..?)

💻 과제 : 코드 향상하기

😑 좋지 않은 코드

function pow(x,n)
{
  let result=1;
  for(let i=0;i<n;i++) {result*=x;}
  return result;
}

let x=prompt("x?",''), n=prompt("n?",'')
if (n<=0)
{
  alert(`Power ${n} is not supported, please enter an integer number greater than zero`);
}
else
{
  alert(pow(x,n))
}

🙂 향상된 코드

function pow(x, n){           // 인수 사이에는 공백
  let result = 1;             // 연산자 앞뒤로 공백

  for (let i=0; i < n; i++) {  // for문 뒤로 공백 한칸 & 적절한 공백
    result *= x;
  }
  //적절한 줄바꿈    
  return result;
}

let x = prompt("x?", '');   // 연산자 공백 & 인수 공백
let n = prompt("n?", '')

if (n<=0) {                 // 중괄호 위치 변경
  alert( `Power ${n} is not supported
    , please enter an integer number greater than zero`
  );                        // 너무 긴 가로 길이 지양
} else {                    // else { 은 한줄에 
  alert( pow(x, n) );       // 중첩 공백, 세미콜론
}

😄마무리하면서😄

좋은 코드를 쓰기 위해서는 노력해야한다.
같이 일하는 사람과 같이 일할 사람들이 잘 알아들을 수 있는 코드, 내가 봐도 이해할 수 있는 코드가 좋은 것 같다.