clean code에 대해(1) ( 임시 변수 제거 )

이번에는 Clean code에 대한 강의를 들으면서, 복습 및 생각 정리 겸 글을 남긴다.

 

임시 변수 제거하기

함수 내에서 let을 선언하고, 이후에 할당하는 경우를 많이 경험해 보았을 것이다.

이러한 행위를 최대한 줄이며, 코드를 작성해보자. 즉, 최대한 const로 변수를 다뤄보자.

 

why?

1. 변수 crud를 최대한 줄임으로써 사이드 이펙트에 대한 가능성을 줄이기 위함.

2. 임시변수를 지지고 볶고 하는 유혹을 벗어나기 위함

3. 하나의 함수에서 하나의 역할만을 하기 위함

4. 위와 같은 경우 명령형으로 가득한 로직이 발생할 가능성이 높음

5. 어디서 어떻게에 대한 디버깅이 어려워질 수 있음.

( 내부에서 지지고 볶다 보면 기능이 많아지고 이에 대한 디버깅이 어려워 질 수 있음 )

6. 나중에 유지보수 혹은 기능을 추가할 때 함수 내부에서 추가적인 코드를 계속해서 작성하고 유혹에 빠질 수 있다.

 

=> 이유에 대해 살펴보면, 위와 같고 어떻게 보면 거의 비슷한 의미로 이유가 도출이 된다. " 함수 내부적으로 가독성이 좋아지고, 사이드 이펙트를 줄이자는 의미"

 

간단한 예를 봐보자.

function getDateTime(targetDate) {
	let month = targetDate.getMonth();
    let dat = targetDate.getDate();
    let hour = targetDate.Hours();
    
    month = month >= 10 ? month : '0' + month,
    day = day >= 10 ? day : '0' + day,
    hour = hour >= 10 ? hour : '0' + hour

	return {
    	month,
        day,
        hour
    }
}

위와 같은 함수가 있다. 위의 함수의 경우 let으로 선언 후 조건에 맞게 재할당 후 반환을 한다. 이와 같이 작성됐을 경우 나중에 이 코드를 봤을 때 조건을 추가하면서, month, date 등 값을 변경 시키면서 새로운 조건에 맞게 함수의 기능을 더럽힐 수 있다.

 

function getDateTime(targetDate) {
	const month = targetDate.getMonth();
    const day = targetDate.getDate();
    const hour = targetDate.Hours();
    
    return {
    	month: month >= 10 ? month : '0' + month,
        day: day >= 10 ? day : '0' + day,
        hour: hour >= 10 ? hour : '0' + hour
    }
}

 

이렇게 변경시키면 어떤가. 코드도 깔끔해지기도 하면서, const로 할당을 시켜버렸기 때문에 해당 변수들을 고치기엔 장벽이 이전보단 높아졌다. 또한, 변경할 수 없는 구조이기 때문에 더욱 사이드 이펙트를 줄일 수 있게 되는 것이다.

 

function getDateFormat() {
	const currentDateTime = getDateTime(new Date());
    
    return {
    	month: currentDateTime.month + '분 전',
        day: currentDateTime.day + '분 전',
        hour: currentDateTime.hour + '분 전'
    }
}

이후 위의 코드와 같이 또 새로운 함수를 통해 확장시켜 요구사항에 대해 맞춰 나가도록 함수를 분리 시키는 방향으로 가자.

하나의 함수에는 특정 기능만 수행하고, 계속해서 함수들을 추상화 시키는 작업을 하면 유지보수도 편리해지고 가독성도 더 좋아지는 코드가 될 것이다.