[tip] clean code를 쓰는 몇가지 팁

Javascript 기본 문법 강의를 2개 수강하였고, 여러 개발자, 테크 컴퍼니 유튜브 채널의 영상을 많이 보고 있다.

그 중에서 내가 들었던 강의, 그리고 여러 유튜브 채널에서 공통적으로 말하는 클린코드 팁에 대해 정리해 본다.

 

1. name of variable

첫번째는 변수의 이름에 관한 팁이다.

많은 개발자들이 흔히 하는 실수로, 남이 봤을때, 그리고 몇개월 뒤 자신이 다시 소스 코드를 봤을 때, 변수의 이름이 무엇을 의미하는지 알지 못하게 네이밍하는 실수를 흔히 저지른다고 한다.

좋은 변수명은 무조건 짧은 이름이 아닌, 누가 읽어도 변수가 무엇을 의미하는지 명확하게 알게 하는 것이다.

 

2. location for declaration

두번째는 변수 선언문의 위치이다.

JS를 기준으로 봤을때, 변수를 전역으로 선언하게 되면 hoisting 단계에서부터 메모리를 많이 잡아먹기도 하고, 전체 프로그램 성능에도 영향을 끼친다. 변수 선언은 가능한 해당 변수를 사용하는 함수 내에서 하는 것이 좋고, 또, 가능하다면, 적게 하는 것이 좋다. 로컬 변수의 경우, 해당 function이 종료되면 자동으로 메모리에서 삭제되기 때문에, 메모리에도, 프로그램 성능에도 좋기 때문이다.

 

3. one function for a function

세번째는 함수에 관한 팁이다.

나와 같은 초보들이 보통, 하나의 함수에 여러 기능을 때려 넣는 실수를 많이 저지른다고 한다.

나만해도, 어제까지 진행했던 '랜덤 숫자 맞추기 게임' 프로젝트에 이런 실수를 저질렀다.

예를 들면 아래와 같이, play() 함수에 거의 모든 것을 때려 넣는 식의 개발이다.

if문이 총 6개나 들어간 것을 볼 수 있다.

이런경우, if문을 하나씩 조깨서 각 6개의 함수로 만드는 것이 가독성을 높이는 길이라고 한다.

 

function play(){
    const userValue = userInput.value;
    
    if(isNaN(userValue)){
        resultArea.innerHTML = '숫자가 아닙니다.';
        return;
    }

    if(userValue < 1 || userValue > 100 ){
        resultArea.innerHTML = '범위 밖의 값입니다. \n1~100까지 입력해주세요.'
        return;
    }
    
    if(userValue.includes(inputHistory)){
        resultArea.innerHTML = '이미 입력한 숫자입니다. \n다른 값을 입력해주세요.'
        return;
    }

    count--;
    countArea.innerHTML = `남은 도전 기회: ${count}`;
    inputHistory.push(userValue);
    
    if(userValue > randomNumber){
        resultArea.innerHTML = 'DOWN';
    }else if(userValue < randomNumber){
        resultArea.innerHTML = 'UP';
    }else{
        resultArea.innerHTML = '정답입니다!💯';
        gameOver = true;
        return count;
    }
    if(count == 0){
        gameOver = true;
    }
    
    if(gameOver = true){
        resultArea.innerHTML = 'RESET 버튼을 눌러 게임을 다시 시작하세요.';
        playButton.disable = true;
    }

}