[JS] Early Return

---

알고있으면 좋은 Javascript Tip✨

---

Early Return이란 무엇인가?

• Early Return은 조건과 맞지 않는 결과를 일찍 반환하는 것을 말한다.

 

(1) Early Return 장·단점

• 장점
  1. 소거법을 사용하여 빠르게 return 하기 때문에 코드 전체를 보지 않아도 된다.
  2. 코드를 읽을 때 return 을 발견하면 아래쪽 코드를 확인하지 않아도 된다.
  3. 코드의 더 아래쪽에서 의도하지 않는 값의 변화를 방지할 수 있다.
• 단점
  1. 함수의 반환이 흩어지게 되어 함수의 복잡도를 높이고, 오히려 가독성을 떨어뜨릴 수 있다.
  2. 간결한 코드에서는 오히려 if-else문이 더 명확할 수 있다.

 

(2) if - else if - else 방식

const btn = document.querySelector("#addBtn");

btn.addEventListener('click', function(){
    let serialNumberInput = document.querySelector("#serialNumber").value;
    let validationTxt = document.querySelector(".validation-txt");

    if(serialNumberInput.length < 5){
        validationTxt.innerText = '5자 이상 입력하세요.';
    } else if(!/^\d+$/.test(serialNumberInput)){
        validationTxt.innerText = '숫자를 입력하세요.';
    } else{
        validationTxt.innerText = "";

        const addWrap = document.querySelector(".add-wrap");
        let newTxt = document.createElement("p");
        newTxt.innerText = serialNumberInput;
        addWrap.appendChild(newTxt);

        document.querySelector("#serialNumber").value = "";
    }
});

 

(3) Early Return 방식

const btn = document.querySelector("#addBtn");

btn.addEventListener('click', function() {
    const serialNumberInput = document.querySelector("#serialNumber").value;
    const validationTxt = document.querySelector(".validation-txt");

    if (serialNumberInput.length < 5) {
        validationTxt.innerText = '5자 이상 입력하세요.';
        return;
    }

    if (!/^\d+$/.test(serialNumberInput)) {
        validationTxt.innerText = '숫자를 입력하세요.';
        return;
    }

    validationTxt.innerText = "";

    const addWrap = document.querySelector(".add-wrap");
    const newTxt = document.createElement("p");
    newTxt.innerText = serialNumberInput;
    addWrap.appendChild(newTxt);

    document.querySelector("#serialNumber").value = "";
});

 

(4) 결론

• if 조건문에 들어오면 해당 동작을 하고 return 해버리기 때문에 더 이상의 동작은 하지 않는다. 그래서 이 함수가 어떤 조건일 때 무엇을 반환하는지 명확해보인다는 장점이 있다. 
• 근데 되도록이면 if - else if - else 방식을 사용하는걸로~~ 이유는 없다😁