[FE] 04. 클린코드

<4. 클린 코드>

* 클린코드

클린 코드라는 것은 읽기 좋은 코드, 가독성 있는 코드를 말한다.

1. 이름 (코딩 컨벤션)

이름을 짓는 건 읽기 좋은 코드를 만드는데 필수 요소이다.

• 함수는 목적에 맞게 이름이 지어져 있는가?
• 함수 안의 내용은 이름에 어울리게 하나의 로직을 담고 있는가?
• 함수는 동사 + 명사이며 함수의 의도를 충분히 반영하고 있는가? 동사에서 명사 순서로 가야한다. ex) addSemiColonStr
• 함수는 카멜표기법(자바에서 사용) 또는 _를 중간에 사용했는가?
• 변수는 명사이며 의미 있는 이름을 지었는가? 행위를 나타내는 것은 함수에만 사용하기

2. 의도가 드러난 구현패턴

내 코드를 들여다보고 그 의도가 잘 보이는지 확인해보기

예를 들어, var a = value * 19.2;가 있다면 도대체 19.2가 무엇을 의미하는지? 알기가 어려움

대신 변수로 저장하고, 변수에 적절한 이름을 쓰면 더 좋다.

3. 지역변수로 넣으면 될 걸 전역공간에 두지 말기

함수 내에서만 사용이 필요로 한 것은 지역변수로 만들어야 한다.

불필요한 전역변수는 최소화해야 코드가 많아지고 수정할 때 복잡함을 줄일 수 있다.

var a = 'hello';

function print() {
   return data;
}

function exec() {
   var data = "world";
   a = a + " ";
   print(a + data)
}

 

4. 빨리 반환해서 if문 중첩 없애기

아래와 같은 if문 개선하기

function foo(pobi,crong) {
  if(pobi) { 
    if(crong) {
      return true;
    }
  }
}

if문을 아래처럼 한다면 쉽게 중첩된 코드를 없앨 수 있다. return문을 잘 써야 함

function foo(pobi,crong) {
  if(!pobi) return;
  if(crong) {
    return true;
  }
}

 

5. 전역변수를 줄이자

자바스크립트에서 var키워드를 함수 안에서 사용하면, 그 변수는 함수안에서만 유용하다. => 함수 scope

하지만 함수 안에서 var 키워드를 사용하지 않으면 전역변수가 된다.

(함수 밖에서 var 키워드를 사용해서 변수를 선언해도 이건 전역변수)

다양한 함수에서 같이 어떤 값을 공유하면서 사용해야 한다면 전역변수로 두고 쓸 수 있다.

이는 전역공간을 더럽히는 것으로 나중에 디버깅이 어려울 수 있다.

두 개의 함수에서 사용해야 한다고 전역변수로 두는 것이 아닌, 지역변수로 두고 함수의 매개변수로 넘겨서 사용하는 것이 좋다.

 

6. 정적 분석 도구

eslint와 같은 도구는 코드를 읽어서 잠재적인 문제와 anit-pattern을 알려준다.

이는 개발도구에서도 plugin을 연동해서 활용할 수가 있음