[중복되는 매개변수 제거] - 1차 팀프로젝트 리팩토링 #두 번째

간략한 팀프로젝트 소개

• tmdb api를 이용하여 다양한 영화 정보를 가져올 수 있다. 
• 가져온 영화 정보를 이용해서 다양한 기능과(검색, 평점, 댓글 등) 디자인 적인 부분까지 신경써서 제작한 프로젝트이다. 

---

첫 번째 리팩토링으로 [불필료한 API_URL 관리]를 진행했었다. 이번에는 함수들에 공통적으로 들어가는 매개변수를 제거하고 전역 변수로 변경하는 작업을 진행했다. (첫 번째보다 비교적 매우 간단하게 작업)

 

 

기존 코드

document.addEventListener("DOMContentLoaded", () => {
  const params = new URLSearchParams(window.location.search);
  const movieId = params.get("id");

  if (movieId) {
    함수_1(movieId);
    함수_2(movieId);
    함수_3(movieId);
    함수_4(movieId);
  } 
});

async function 함수_1(id) {
	// id로 데이터 처리하는 로직
}

async function 함수_2(id) {
	// id로 데이터 처리하는 로직
}

// 그 외 . .

HTML이 로드 되면 실행되는 코드이다. `url`의 파라미터 값을 `movieId`에 저장하게 되고 `함수_1`, `함수_2`, `함수_3` 등에 공통적으로 `movieId`를 전달해주고 각각의 함수에서 `movieId`를 받아 데이터를 처리하게 된다.

문제점

• 크게 잘못된 코드 같지는 않지만 모든 함수에 똑같은 매개변수를 전달 받는다. 
• 눈에 거슬린다.
• 하지만 명시적으로 매개변수를 받게되니 개발자의 눈에 더 잘들어올 수 있을 것 같다는 생각도 든다. 

 

변경된 코드

let movieId = ''; // 전역 변수로 변경

document.addEventListener("DOMContentLoaded", () => {
  const params = new URLSearchParams(window.location.search);
  movieId = params.get("id"); // 전역변수에 값 할당

  if (movieId) {
    함수_1();
    함수_2();
    함수_3();
    함수_4();
  }
});

async function 함수_1() {
	// 전역변수로 데이터 처리하는 로직
}

async function 함수_2() {
	// 전역변수로 데이터 처리하는 로직
}

`movieId`라는 전역변수를 생성한다. `params.get()`의 값을 전역변수인 `movieId`에 할당해주고 각각의 함수에서 전역변수를 참조하여 데이터를 처리한다

 

변경 목적

• 불필요하게 공통된 매개변수를 받지 않도록 수정하였다. 
• 유지보수가 좋아질 것 같다.
• 솔직히 가독성은 변경하기 전이 더 좋은 것 같기도하다. (전역변수에 무슨 값이 들어있는지, 전역변수가 있는지 확인하기 번거로울수도 있을 것 같기 때문)

 

정리

• 공통된 매개변수를 전달하지 않고 전역변수에 값을 할당하고, 전역변수를 사용하도록 수정하였다. 
• 유지보수하기 조금이나마 편해지긴 하겠다. 
• 가독성 측면에서는 오히려 전역변수를 확인해야돼서 불편해질 수도 있겠다. 
• 취향 차이?

 

(1) - [불필료한 API_URL 관리]