js_코드 리펙토링 예제

//원본코드
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]}가 완료됫습니다.;
}
}, 2000);
});
}
}
}

orderCoffee(document.querySelector("button"), ["americano", "cafeLatte"]);
////////////////////////////////////////////////////////////////
//리팩토링 시작//
////////////////////////////////////////////////////////////////

//리팩토링 1
function orderCoffee(el, orderList) {
if (el && Array.isArray(orderList)) {
el.addEventListener("click", function () {
setTimeout(function () {
for (let i = 0; i < orderList.length; i++) {
document.querySelector(
"#log"
).innerHTML += ${orderList[i]}가 완료됫습니다.;
}
}, 2000);
});
}
}

orderCoffee(document.querySelector("button"), ["americano", "cafeLatte"]);
///////////////////////////////////////////////////////////////
//리팩토링 2
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]}가 완료됫습니다.;
}
}, 2000);
});
}

orderCoffee(document.querySelector("button"), ["americano", "cafeLatte"]);
///////////////////////////////////////////////////////////////
//리팩토링 3
function orderCoffee(el, orderList) {
function buttonClickHandler() {
setTimeout(function () {
for (let i = 0; i < orderList.length; i++) {
document.querySelector(
"#log"
).innerHTML += ${orderList[i]}가 완료됫습니다.;
}
}, 2000);
}

if (!el || !Array.isArray(orderList)) return;
el.addEventListener("click", buttonClickHandler);
}

orderCoffee(document.querySelector("button"), ["americano", "cafeLatte"]);

///////////////////////////////////////////////////////////////
//리팩토링 4 // setTimeout을(비동기) Promise 패턴으로 구현
function orderCoffee(el, orderList) {
const delay = (time) =>
new Promise((resolve) => setTimeout(() => resolve(), time));

async function buttonClickHandler() {
await delay(2000); //await 을 시키면 blocking 이 가능하다.즉, 뒤에 코드로 넘어가지 않고 대기가 된다. 즉 2초동안 지연을 시켜주는 것임. 근데 await 쓸려면 async가 필요하다.
for (let i = 0; i < orderList.length; i++) {
document.querySelector(
"#log"
).innerHTML += ${orderList[i]}가 완료됫습니다.;
}
}

if (!el || !Array.isArray(orderList)) return;
el.addEventListener("click", buttonClickHandler);
}

orderCoffee(document.querySelector("button"), ["americano", "cafeLatte"]);
///////////////////////////////////////////////////////////////
//리팩토링 5 // 변수들 정리
function orderCoffee(el, orderList) {
const logEl = document.querySelector("#log");

const delay = (time) =>
new Promise((resolve) => setTimeout(() => resolve(), time));

async function buttonClickHandler() {
await delay(2000); //await 을 시키면 blocking 이 가능하다.즉, 뒤에 코드로 넘어가지 않고 대기가 된다. 즉 2초동안 지연을 시켜주는 것임. 근데 await 쓸려면 async가 필요하다.
for (let i = 0; i < orderList.length; i++) {
logEl.innerHTML += ${orderList[i]}가 완료됫습니다.;
}
}

if (!el || !Array.isArray(orderList)) return;
el.addEventListener("click", buttonClickHandler);
}

orderCoffee(document.querySelector("button"), ["americano", "cafeLatte"]);
///////////////////////////////////////////////////////////////
//리팩토링 6 // for문을 고차함수를 이용해서 줄일 수 있다 즉, forEach 쓰면 됨.
function orderCoffee(el, orderList) {
const logEl = document.querySelector("#log");

const delay = (time) =>
new Promise((resolve) => setTimeout(() => resolve(), time));

async function buttonClickHandler() {
await delay(2000); //await 을 시키면 blocking 이 가능하다.즉, 뒤에 코드로 넘어가지 않고 대기가 된다. 즉 2초동안 지연을 시켜주는 것임. 근데 await 쓸려면 async가 필요하다.
orderList.forEach(
(order) => (logEl.innerHTML += ${order}가 완료됫습니다.)
);
}

if (!el || !Array.isArray(orderList)) return;
el.addEventListener("click", buttonClickHandler);
}

orderCoffee(document.querySelector("button"), ["americano", "cafeLatte"]);
///////////////////////////////////////////////////////////////
//리팩토링 7 // forEach 안에 콜백 밖으로 따로 뺴주기. insertMsg
function orderCoffee(el, orderList) {
const logEl = document.querySelector("#log");

const delay = (time) =>
new Promise((resolve) => setTimeout(() => resolve(), time));

const insertMsg = (order) => (logEl.innerHTML += ${order}가 완료됫습니다.);

async function buttonClickHandler() {
await delay(2000); //await 을 시키면 blocking 이 가능하다.즉, 뒤에 코드로 넘어가지 않고 대기가 된다. 즉 2초동안 지연을 시켜주는 것임. 근데 await 쓸려면 async가 필요하다.
orderList.forEach(insertMsg);
}

if (!el || !Array.isArray(orderList)) return;
el.addEventListener("click", buttonClickHandler);
}

orderCoffee(document.querySelector("button"), ["americano", "cafeLatte"]);
///////////////////////////////////////////////////////////////
//(최종코드)여기가 진짜 리팩토링 8 // 함수를 가볍게 만들기 위해 변수, 함수 밖으로 뺴주기, 등
//
//전역 변수
const coffeeMakeBtn = document.querySelector("button");
const coffeeMenu = ["americano", "cafeLatte"];
const logEl = document.querySelector("#log");

//딜레이 함수(프로미스, 셋타임아웃)
const delay = (time) =>
new Promise((resolve) => setTimeout(() => resolve(), time));

//메세지 함수
const insertMsg = (order) => (logEl.innerHTML += ${order}가 완료됫습니다.);

//버튼클릭핸들러(async/await(2초딜레이), 반복문처리) 함수
async function buttonClickHandler(orderList) {
const delayTime = 2000;
await delay(delayTime); //await 을 시키면 blocking 이 가능하다.즉, 뒤에 코드로 넘어가지 않고 대기가 된다. 즉 2초동안 지연을 시켜주는 것임. 근데 await 쓸려면 async가 필요하다.
orderList.forEach(insertMsg);
}

//커피주문/핵심 비즈니스 로직 함수(유효성검사, 이벤트리스너 등록)
function orderCoffee(el, orderList) {
if (!el || !Array.isArray(orderList)) return;
el.addEventListener("click", () => buttonClickHandler(orderList));
}

// 핵심 비즈니스 로직 함수 실행
orderCoffee(coffeeMakeBtn, coffeeMenu);
//
///////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////

//연습코드 ㅋㅋ//
// const title = document.createElement("h1");
// title.innerText = "커피가게";
// document.body.appendChild(title);

// const btn = document.createElement("button");
// btn.innerText = "커피 만들기";
// document.body.appendChild(btn);

// const msg = document.createElement("div");
// msg.setAttribute("id", "log");
// document.body.appendChild(msg);

// const menu = ["americano", "cafeMoca"];
// //const menu = "milk";

// const inserMsg = (order) => {
// msg.innerHTML += ${order}가 완료되었습니다.<br />;
// };

// const deley = (time) =>
// new Promise((resolve) => {
// setTimeout(() => resolve(), time);
// });

// async function btnClickHandler(orderList) {
// const delayTime = 2000;
// await deley(delayTime);
// //console.log(orderList);
// orderList.forEach(inserMsg);
// }

// // function btnClickHandler(orderList) {
// // //console.log(orderList);
// // orderList.forEach(inserMsg);
// // }

// function orderCoffee(el, orderList) {
// //console.log("Test");
// if (!el || !Array.isArray(orderList)) return console.log("배열이 아닙니다.");
// el.addEventListener("click", () => {
// //console.log(btn, menu);
// btnClickHandler(orderList);
// });
// }

// orderCoffee(btn, menu);