TIL 23-06-21 JS for문, if문 사용하기

1. JS for문 if문 사용하기 

 문제점

JS로 같은 결과를 만들더라도 가독성과 유지보수면에서 매우 아쉬운 코드가 많다. 

 시도해 본 것들

ID를 숫자로 활용하기 

<li><button class="dropdown-item" id="1" >전체</button></li>
<li><button class="dropdown-item" id="2" value="전시/관람">전시/관람</button></li>
<li><button class="dropdown-item" id="3" value="서울형키즈카페">서울형키즈카페</button></li>
<li><button class="dropdown-item" id="4" value="산림여가">산림여가</button></li>
<li><button class="dropdown-item" id="5" value="문화행사">문화행사</button></li>
<li><button class="dropdown-item" id="6" value="농장체험">농장체험</button></li>
<li><button class="dropdown-item" id="7" value="교육체험">교육체험</button></li>
<li><button class="dropdown-item" id="8" value="공원탐방">공원탐방</button></li>

 

        // 카테고리 id 기준으로 addEventListener 부여 
        for (var i = 1; i < 9; i++)
            document.getElementById(i).addEventListener("click", function () {
                selectCategory(this.value)
            })

ID를 숫자로 주고 for문을 통해서 각각 addEventListener를 작성하는 것보다 코드가 간결해지고 유지보수도 용이해짐

 

if문 좀 더 활용하기  

if (!payloadParse) {
        window.location.replace(`${frontendBaseURL}/`)
    }
    if (!payloadParse.is_admin) {
        window.location.replace(`${frontendBaseURL}/`)
    }

 

if (!payloadParse || !payloadParse.is_admin) {
        window.location.replace(`${frontendBaseURL}/`)
    }

같은 결과를 만들어내지만, error때문에 두 번 중첩했던 if문을 ||를 통해서 or조건을 주면서 하나로 통합

 

if문 활용과 location 활용 

function selectCategory(category) {
    const URLParams = new URL(location.href).searchParams;
    const page = URLParams.get('page')
    // 페이지가 없거나 값이 null인 경우 
    if (!page || page == null) {
        console.log(`${frontendBaseURL}${window.location.pathname}?category=${category}`)
        window.location.href = `${frontendBaseURL}${window.location.pathname}?category=${category}`
    } else {
        console.log(`${frontendBaseURL}${window.location.pathname}?category=${category}&page=${page}`)
        window.location.href = `${frontendBaseURL}${window.location.pathname}?category=${category}&page=${page}`
    }
}

window.location.pathname을 하게 되면 

http://127.0.0.1:5500/templates/backoffice-main.html

/templates/backoffice-main.html

도메인 뒤로 붙는 패스를 가져올 수 있기 때문에 휴먼 에러나 패스변경 시 좀 더 편하다.

 

function handleNextPage(page) {
    window.location.href = `${frontendBaseURL}/templates/backoffice-main.html?${page.split('?')[1]}`
}

function handleNextPage(page) {
    window.location.href = `${frontendBaseURL}${window.location.pathname}?${page.split('?')[1]}`
}

 알게 된 점

기본기가 크게 없어서 활용했던 코드를 최대한 재활용하고 있지만, 이렇게 한 개씩 찾아가며 실제로 사용하면 기억에 확실하게 남는다.