복잡한 조건문을 간단하게! If 정리 팁

어떤 메소드가 딱 정리하고 싶게끔 생겼다!

---

페이지를 넘기는 작업이다. 왼쪽 그리고 오른쪽 화살표가 있고 왼쪽 화살표는 첫번째 페이지에서는 보이면 안되고 마지막 페이지에서는 왼쪽, 오른쪽 화살표가 둘다 보여야한다. 그래서 원래 코드는 이렇게 짜여져 있었다.

function updateArrows(leftArrow, rightArrow, curIndex, totalItemCount) {
	if (curIndex === 0) {
		leftArrow.classList.add("hide");
		rightArrow.classList.remove("hide");
	} else if (curIndex === totalItemCount - 1) {
		leftArrow.classList.add("hide");
		rightArrow.classList.add("hide");
	} else {
		leftArrow.classList.remove("hide");
		rightArrow.classList.remove("hide");
	}
}

처음 만난 느낌은 우선 이해하기는 쉬웠다. 첫번재면 왼쪽을 숨기고 마지막이면 둘다 숨기고 나머지 경우엔 둘다 보이도록 하는것 하지만 if 와 else 가 너무 많으니 너무 정리하고싶은걸 어떻해!

변수를 설정하면 어떨까 ??

---

우선은 첫번째 인덱스인지 마지막 인덱스인지 확인하는 조건이 if 안에 있으니 확 와닿지 않았다 따라서 이렇게 수정을 하였다.

function updateArrows(leftArrow, rightArrow, curIndex, totalItemCount) {
	let isFirstInd = curIndex === 0;
	let isLastInd = curIndex ===  totalItemCount - 1;
	if (isFirstInde) {
		leftArrow.classList.add("hide");
		rightArrow.classList.remove("hide");
	} else if (isLastInd) {
		leftArrow.classList.add("hide");
		rightArrow.classList.add("hide");
	} else {
		leftArrow.classList.remove("hide");
		rightArrow.classList.remove("hide");
	}
}

보기에는 조금 편해졌지만 아직 조건문은 그대로이기에 조금더 노력해 보아야 겠다.

else 에 해당 하는 조건을 제일 앞으로 빼자

---

else 는 어떠한 경우도 아닌 지금은 보통의 경우이다. 따라서 제일 앞으로 빼도 이해하기에 무방하다고 생각했다.

function updateArrows(leftArrow, rightArrow, curIndex, totalItemCount) {
	let isFirstInd = curIndex === 0;
	let isLastInd = curIndex ===  totalItemCount - 1;

	leftArrow.classList.remove("hide");
	rightArrow.classList.remove("hide");
	if (isFirstInd || isLastInd) leftArrow.classList.add("hide") 
	if (isLastInd) rightArrow.classList.add("hide");
}

훨씬 괜찮아 졌다. 우선 둘다 보이지만 처음과 마지막일때 왼쪽을 빼고 마지막이면 오른쪽을 뺀다!

내장되어있는 method 가 있었어!!!

---

classList 에는 toggle({class이름}, true 면 넣고 false 면 뺀다) 라는 메소드가 있었다! 요걸 활용하면

function updateArrows(leftArrow, rightArrow, curIndex, totalItemCount) {
	let isFirstInd = curIndex === 0;
	let isLastInd = curIndex ===  totalItemCount - 1;
	leftArrow.classList.toggle("hide", isFirstInd || isLastInd);
	rightArrow.classList.toggle("hide", isFirstInd);
}

이렇게나 코드가 깔끔해 진다. 이해하기도 명료하고!

다음에 뭔가 코드를 깔끔하게 하고 싶다면 우선 내장함수가 있는지 없는지를 확인을 해보고 진행을 하면 좋을거 같다! 역시 좋은 method 들을 다 만들어 놨었다!