오늘은 유튜브 프롱트 님의 영상을 보다가 내용이 너무 좋아 포스팅을 하려한다.
아래 코드는 프롱트님의 예시 코드이고 먼저 영상을 다 보지 않은 상태에서 먼저 리팩토링 해보고
영상이랑 비교하려한다.
<script>
function orderCoffee(el, orderList) {
if (el) {
if (Array.isArray(orderList)) {
el.addEventListener("click", function () {
setTimeout(function () {
for (let i = 0; i < orderList.length; i++) {
document.querySelector(
"#log"
).innerHTML += `${orderList[i]}가 완료되었습니다 <br />`;
}
}, 2000);
});
}
}
}
orderCoffee(document.querySelector(".but"), ["americano", "cafeLatte"]);
</script>
코드는 위와같다 .
먼저 if문의 el를 수정하겠다. 조건문을 하나로 합쳐 아래처럼 표현했다.
조건문을 통과해야 코드가 돌테니 통과하지못하면 return을 사용해 {}리터럴 하나를 줄였다.
엘리먼트가 없거나 , 오더리스트의 형태가 배열이 아니라면 즉시 종료하고
두가지 조건을 충족한다면 이벤트를 걸어 클릭하면 2초후에 오더리스트에서 받은 오더가 완료되는 로직이다 .
또한 for문의 쿼리셀럭터 구문이 단문이므로 {}리터럴을 하나 삭제할 수 있다.
<script>
function orderCoffee(el, orderList) {
if (!el || !Array.isArray(orderList)) return;
el.addEventListener("click", function () {
setTimeout(function () {
for (let i = 0; i < orderList.length; i++)
document.querySelector(
"#log"
).innerHTML += `${orderList[i]}가 완료되었습니다 <br />`;
}, 2000);
});
}
orderCoffee(document.querySelector(".button"), ["americano", "cafeLatte"]);
</script>
이번엔 위에 addEventListner의 함수부분을 분리해보겠다.
<script>
function orderCoffee(el, orderList) {
function clickHandler() {
setTimeout(function () {
for (let i = 0; i < orderList.length; i++)
document.querySelector(
"#log"
).innerHTML += `${orderList[i]}가 완료되었습니다 <br />`;
}, 2000);
}
if (!el || !Array.isArray(orderList)) return;
el.addEventListener("click", clickHandler);
}
orderCoffee(document.querySelector(".button"), ["americano", "cafeLatte"]);
</script>
위와같이clickHandler함수를 분리해서 깊어진 뎁스를 개선했다.
또한 setTimeout의 부분에서 함수를 한 번 더 분리 할 수 있을 것이다.
<script>
function orderCoffee(el, orderList) {
function orderPaint() {
for (let i = 0; i < orderList.length; i++)
document.querySelector(
"#log"
).innerHTML += `${orderList[i]}가 완료되었습니다 <br />`;
}
function clickHandler() {
setTimeout(orderPaint, 2000);
}
if (!el || !Array.isArray(orderList)) return;
el.addEventListener("click", clickHandler);
}
orderCoffee(document.querySelector(".button"), ["americano", "cafeLatte"]);
</script>
콜백함수의 경우 각각의 기능을 분리해 코드를 개선했다.
함수는 하나의 기능만 가지게 만든다는게 꽤 힘든 작업이고 영상에선 나와같이 개선하지않고
프로미스 패턴을 이용해 조금 더 다채롭게 리팩토링했다 .
그 점을 학습하고 포스팅으로 남겨놓으려 한다.