동료 개발자와 페어 프로그래밍을 하다가 아래와 같은 스타일로 변수선언을 하는 것을 보고, 변수의 선언과 사용간의 거리가 너무 멀어서 좁혔으면 좋겠다고 피드백을 드렸다.
function doSomething() {
const { lion, tiger, duck, dog, cat } = animal
...
doSomething(lion)
...
...
doSomething(tiger)
...
...
doSomething(duck)
...
...
doSomething(dog)
...
...
doSomething(cat)
...
}
가령 나는 아래 방식이 더 좋다고 생각한다.
function doSomething() {
const { lion } = animal
doSomething(lion)
...
const { tiger } = animal
doSomething(tiger)
...
const { duck } = animal
doSomething(duck)
...
const { dog } = animal
...
doSomething(dog)
...
const { cat } = animal
...
doSomething(cat)
...
}
(물론 좀 더 근본적인 원인은 함수가 너무 많은 일을 하기 때문에 함수를 더 잘게 쪼개야 하는 신호일 수도 있다.)
사실 나는 당연 하다고 생각했던 부분이라 충돌 지점이 생길거라고는 생각하지 못하였다. 충돌 지점이 생겼기 때문에 부랴부랴 근거를 찾아봤다. (충돌지점 오히려 좋아)
내가 근거로 제시한 것은 아래와 같다.
클린코드 100p - 세로 밀집도
줄바꿈이 개념을 분리한다면 세로 밀집도는 연관성을 의미한다. 즉 서로 밀집한 코드 행은 세로로 가까이 놓여야 한다는 뜻이다 … 중략
동료 개발자 분께서 함수의 최상단에 모든 변수를 선언 하는 방식을 선호하는 이유로 할당된 변수의 개수로 함수의 크기를 가늠한다는 의견을 주셨다.
스타일의 차이(소설로 치면 문체의 차이) 정도이기 때문에 공감대 형성이 서로 크게 되지 않으면 서로 존중하는 것이 더 좋다고 생각한다. 따라서 절충안으로 각자가 생각하는 방식대로 작성하고, 함수의 크기가 너무 클때 리팩터링을 진행하는 방향으로 결정하였다.
근거 보충 가즈아ㅏㅏㅏ
마침 이 계기로 왜 세로로 밀집한 코드 가 더 좋은지 내 빈약한 근거를 보충하는 시간이 되었다.
근거를 보충하자면 아래와 같다.
SO : Is defining every variable at the top always the best approach?
- 블록의 중간\하단에서 상단으로 주의를 전환하는 횟수를 줄임으로써 코드의 유지보수성을 향상시킵니다.
- 이점은 위의 선언을 보기만 해도 코드 블록에서 어떤 변수를 사용하는지 한눈에 이해할 수 있다는 것입니다. 어떤 변수가 선언되었는지 보기 위해 코드를 읽을 필요가 없습니다.
- 컴파일러나 컴퓨터를 위한 코드를 작성하지 마십시오. 개발자를 위해 작성하십시오. 코드는 가능한 한 읽기 쉬워야 하며 코드의 특정 섹션을 이해하는 데 가능한 한 적은 노력이 필요합니다.
- C\C++ 시절과 같은 오래된 구조에서는 변수를 초기화하고 시작 값을 할당하는 것이 중요했습니다. 그러나 상황이 진행됨에 따라 필요할 때 선언하는 것이 유효한 구현이라는 것을 알게 되었습니다. 범위가 역할을 하지 않는 한(예를 들어
a해당 함수뿐만 아니라 다른 함수에도 변수가 필요함), 저는 이동 중에 선언할 것입니다. - “범위“를 함수 범위가 아닌 논리적 범위로 취급하십시오.
따라서 나는
해체할당을 할때 변수 선언과 사용하는 코드는 서로 가까이 두는게 더 좋은거 같다 (코드 세로 밀집도)
노파심에 말하지만 함수 전체 컨텍스트에서 사용해야 하는 경우는 당연히 최상단에 놓는 것을 선호한다.
function doSomethingDaily() {
const { today } = createDateContext();
..
today...
..
...
today..
...
..
today
..
}