컴퓨터뿐만 아니라 사람도 이해할 수 있는 클린 코드

클린 코드란 가독성 좋은 코드를 말한다.

 

기능이 복잡할수록 코드도 복잡해지고 지저분해지기 쉽다.

동시에 기능이 복잡한 프로그램은 여러 명의 개발자가 함께 개발해야 하거나 여러 기능을 지속적으로 수정하고 추가해야 할 상황이 많다.

그래서 코드는 최대한 사람들도 이해하기 쉽도록 만들어야 한다.

 

 

 

 

1. 코딩 컨벤션(coding convention) 따르기

 

함수나 변수 등의 이름을 짓는 규칙을 말한다.

 

• 함수의 이름은 목적에 맞게 지어져 있어야 한다.
• 함수에 있는 내용이 이름과 어울리도록 하나의 로직을 담고 있어야 한다.
• 함수는 동사+명사로 이루어져 있어야 한다.
• 함수의 이름은 카멜 표기법 또는 _를 중간에 사용하여지어야 한다. (보통은 카멜 표기법을 많이 사용한다)
• 변수는 명사이며 의미 있는 이름으로 지어야 한다.

 

그 외 자바스크립트 컨벤션 보러 가기

 

 

 

 

2. 의도가 보이는 코드

 

코드를 봤을 때, 무슨 기능을 위한 코드인지, 그 의도가 잘 보인다면 그 코드는 좋은 코드이다.

 

 

 

예제)

 

var a = value * 19.2;

 

value라는 어떤 값에 19.2라는 숫자를 곱하여 변수 a에 담는 코드이다.

이 상태로는 19.2가 뭘 의미하는 숫자인지 알 수 없다.

 

var paddingValue = 19.2;
var a = value * paddingValue;

 

이렇게 paddingValue라는 변수에 숫자를 담아 사용하면, 변수 a에 담기는 값이 어떤 value에 패딩 값을 더한 값이라는 것을 알 수 있다.

 

 

이걸 공부하면서 예전에 어떤 값을 반복적으로 더해주는 코드를 짰던 것이 떠오른다.

그때 잘못된 예제처럼 직접 숫자를 입력해서 더하는 바람에 이 값을 왜 더하는 거냐는 질문을 받았던 기억이 난다.

주석으로 무슨 값인지 적어놓는 걸로 처리했는데, 저렇게 변수로 담아서 처리하면 더 좋았을 거란 생각이 든다.

 

 

 

 

 

3. 전역 변수 남발 금지

 

함수 내에서만 사용하는 변수는 지역변수로 만들어야 한다.

불필요한 전역 변수는 수정할 때 찾기 복잡해진다.

 

 

 

예제)

 

var word = 'hello';

function printData(data) {
  return data;
}

function exec() {
  var data = 'world';
  word = word + " ";
  printData(word+data);
}

 

'hello world'를 출력하기 위한 코드이다.

 

분명 word 변수는 exec이란 함수에서 밖에 쓰이지 않지만, 전역 변수로 선언되어 있다.

지금은 짧은 코드라 큰 문제없지만, 나중에 코드가 길어졌을 경우, exec 함수를 볼 땐 word 변수의 값이 뭔지 찾기 어려울 것이다.

또한 word라는 변수의 값을 다른 함수에서 바꾸게 된다면, 원하는 결과와 다른 결과를 얻게 될 것이다.

 

그러므로 한 함수에서만 쓰이는 변수는 그 함수 안에서 지역변수로 사용하는 것이 적합하다.

 

 

function printData(data) {
  return data;
}

function exec() {
  var data = 'world';
  var word = word + " ";
  printData(word+data);
}

 

이렇게 exec 함수의 지역 변수로 사용하고, printData 함수처럼 다른 함수에 값이 필요한 경우엔 인자로 넘겨주는 것이 적합하다.

 

 

 

 

4. if문 중첩 최소화하기

 

if문 중첩을 최소화하면 더 이해하기 쉬운 코드가 될 것이다.

 

 

if문 중첩 예제)

 

function testExam(check, point) {
  if(check) {
    if(point) {
      return true;
    }
  }
}

 

check가 true이면, point가 true인지 확인하고, point도 true일 때 true를 리턴하는 함수이다.

if문 두 개가 중첩되어 있다.

 

하지만 아래 예제처럼 한다면 중첩된 코드를 없앨 수 있다.

 

function testExam(check, point) {
  if(!check) return;
  if(point) {
  return true;
  }
}

 

check가 true가 아닐 경우 바로 리턴 시켜 함수를 종료시켜버리는 것이다.

 

 

 

 

5. 정적 분석 도구 이용

 

eslint와 같은 도구로 자신의 코드에 문제가 없는지 확인해볼 수 있다.

 

 

 

 

 

 

 

+) 이 외에도 클린 코드를 작성하는 방법이 많이 있다.

edwith 강의에서 추천해준 교재가 있다.

1. Clean Code

2. 읽기 좋은 코드가 좋은 코드다

 

 

비록 자바스크립트 클린 코드에 관한 수업이었지만, 강사님 말씀대로 자바스크립트나 어떤 한 언어에 국한된 얘기는 아니다.

다른 언어로 된 교재라도, 혹은 다른 언어로 개발할 때에도 위 사항들을 생각하며 클린 코드를 짤 수 있도록 노력해야겠다.

 

 

 

 

 

 

 

 

출처)

edwith 부스트코스 웹 프로그래밍

- 클린 코드