본문 바로가기

Front/JavaScript

JS에서 함수를 사용하기까지 한 생각

JS로 코딩하면서 이것저것 다양한 방식을 도입해봤다.

처음에는 단순하게 필요할 때 변수 선언하고 로직이 필요하면 그때그때 한줄한줄 넣는 방식으로 해봤다.

물론 잘 돌아갔으나 다음에 비슷한 로직이어서 복붙하기 위해서 참고하려고 하니 지옥과도 같았다.

 

 

1. 로직과 변수의 결합

 

로직 사이사이에 변수를 선언하고 거기서만 사용하니 재사용하기 너무 까다로웠다.

변수 이름도 너무 구체적으로 적은 것이 단점이었다.

비슷한 로직이지만 담는 내용이 바뀌니 매번 적절하게 바꾸는 것도 상당히 고된 일이었다.

 

단점을 알았으니 다음 작업을 진행할 때는 변수를 최대한 전역객체에 선언했다.

이름도 보다 추상적인 이름으로 선택했다.

확실히 이렇게 하니 전보다는 코드를 재사용하기 쉬웠다.

 

그렇게 진행하다보니 또다시 문제를 발견했다.

쓸데없이 변수 선언부가 너무 길어졌으며, 한 번 쓰고 말 변수도 전역에서 관리하는 것도 보기 안 좋았다.

거기에 더불어 같은 변수를 다른 목적으로 사용할 때, 초기화 과정을 제대로 안 거치면 로직이 꼬여버리는 문제도 있었다.

 

 

2. 변수를 함수로 이동

 

이 문제는 생각보다 해결하기 어려웠다.

최대한 반복작업을 줄이기 위해서는 변수명을 다소 추상적으로 작성할 필요를 이미 느꼈기 때문이다.

var를 사용한다면 스코프 문제가 발생하기 때문이다. 동일한 이름의 변수는 충돌을 관리하기 힘들었다.

 

그래서 함수를 활용하기로 했다.

var가 아닌 let과 const는 블록 스코프이므로 다른 함수에서라면 동일 이름을 갖더라도 딱히 충돌나지 않았다.

이러면 전역변수도 줄어들어 변수 선언부가 줄어드는 장점이 생긴다.

 

로직을 일단 무작정 함수로 감았다.

그리고 함수마다 변수를 필요할 때마다 선언해서 사용했다.

일단 앞서 겪었던 문제는 모두 해결했다.

 

하지만 하나를 해결하니 욕심이 생겼다.

비슷한 파트는 그냥 함수만 들고와서 매개변수만 넣어주면 해결되도록 코딩을 하고 싶었다.

표준화를 진행하고 싶었던 것이다.

 

 

3. 함수 내부를 다듬기

 

유동적으로 변하는 파트는 최대한 매개변수를 사용하여 변동될 수 있도록 했다.

대부분 문제가 없었지만, 객체의 프로퍼티를 호출할 때 문제가 생겼다.

예를 들어, Food.choco를 찾아야 한다고 했을 때, 표현하기가 쉽지가 않았다.

 

"Food." + parameter 이런 식으로 해봐야 당연히 food 객체의 choco 프로퍼티를 찾을 수 없다.

저건 단순한 문자열에 불과하니까.

어떻게 해야할까 지금 고민하고 있는 단계다.

 

물론 단순하게 객체 자체에 접근하면 편하기는 한데,

그러면 매개변수의 이름이 직관적이지 않게 되니 아쉽다.

index를 넘긴다면 숫자지만, 숫자보단 choco, pineapple 이런 식이 더 읽기 좋지 않은가?

 

조금 더 고민하면 해결할 수 있을 것 같은데...

일이다 보니 할당량을 고려하지 않을 수 없다.

코드 퀄리티를 높이기 어려운 환경에 있다는 것을 처음으로 실감한 순간이었다.

 

 

4. 코드 퀄리티에 대한 고민

 

저것 외에도 다른 개발자가 작성한 것을 봤을 때, 가끔씩 깜짝 놀랄만큼 간결하고 예쁘게 (?) 작성하는 분들이 있다.

코드 줄 수는 오히려 더 많은데도 가독성이 더 높은 경우도 많았다.

그 외에도 로직을 따라가봐도 필요하지 않은 변수가 전역에 선언되거나 하지도 않았다.

 

슬슬 양을 늘리면서 하는 공부는 줄여도 될 것 같다.

질을 쌓으면서 가야지 안 그러면 나중에 그 많은 코드의 질을 모두 높이기는 어려워 보인다.