Early Return 하는 코드를 작성하자
코드를 좀 더 깔끔하게 작성하는 방법 early return
  • JavaScript

프로그램을 개발하다보면 if-else문을 사용하는 일이 정말 많다.
if-else만으로도 프로그램을 만들 수 있다는 말도 들릴 정도이다.

그런 if-else를 좀 더 깔끔하게 사용하는 방법중에는 뭐가 있을까?

사내 코드 규칙에 따라.. 혹은 잘 정리된 블로그나 책을 보면 많은 것들이 나오지만
오늘은 early return을 살펴보려고 한다.

Early Return

말 그대로 일찍 return 처리해주는 것이다.

얻을 수 있는 장점으로는

  • 들여쓰기의 깊이가 줄어들어 코드를 더욱 읽기 쉽게 만든다.
  • 코드를 읽을 때 return을 발견하면 더 아래쪽 코드를 확인하지 않아도 된다.
  • 코드의 더 아래쪽에서 의도하지 않는 값의 변화를 방지할 수 있다.

간단한 코드를 살펴보자.

const checkValue = (value) => {
    if (value > 0) {
        return console.log('값은 0보다 크다.');
    } else {
        console.log('값은 0보다 작거나 같다.');
    }
};

위와같은 코드가 있다고 가정해보자. if 하나로 구성된 아주 간단한 코드이다.

if - else 를 사용하여 구현된 함수이지만 else를 사용하지 않고 early return을 한다면 조금 더 깔끔하고 코드를 읽는 사람도 더 쉽게 읽을 수 있을것이다.

early return이 사용된 다음 코드와 비교해보자

const checkValue = (value) => {
    if (value > 0) {
        return console.log('값은 0보다 크다.');
    }
    
    console.log('값은 0보다 작거나 같다.');
};

코드를 읽을 때 return을 확인하면 아래의 코드를 확인하지 않아도 된다. 반면 if-else로 구성되어 있다면 if아래쪽에 더 처리되는게 있을지 내려서 확인하는 과정이 필요해지게 된다.

if - else 1개로 간단하게 이루어진 코드라 early return처리가 얼마나 효과적인지 가늠하기가 어렵다.

조금 더 긴 코드를 살펴보자.

const getValue = (text) => {
    let result = '';

    if (typeof text === 'string') {
        if (text === 'animal') {
            result = '동물';
        } else if (text === 'fish') {
            result = '물고기';
        } else {
            throw 'animal이나 fish중에서만 입력하세요';
        }
    } else {
        throw '문자를 입력하세요';
    }

    result += '가 입력되었습니다';
    return result;
};

예제로 적당할지 모르겠지만 if문을 여러개 사용해보았다.
animal이나 fish중에 넣으면 그에 따른 결과값이 나오고 문자가 아니거나 animal, fish가 아닌 다른걸 넣으면 오류가 발생하는 코드이다.

조금 복잡해보이기도하고 깔끔하지도 않다.
Early Return을 적용하면 어떻게 될까?

const getValue = (text) => {
    if (typeof text !== 'string') {
        throw '문자를 입력하세요';
    } else if (!text.includes('animal', 'fish')) {
        throw 'animal이나 fish중에서만 입력하세요';
    }

    if (text === 'animal') {
        return '동물이 입력되었습니다';
    }
    
    return '물고기가 입력되었습니다';
};

코드를 살펴보면 line수도 줄어들었지만 들여쓰기의 깊이가 줄어들어 더욱 읽기 편한 코드가 되었다.

if-else 코드보다는 if-return패턴을 사용했을 때 더 읽기 좋은 코드가 됨을 확인하였다.
코드를 잘 만드는것도 중요하지만 읽기 좋은 코드를 만드는것도 역시 중요하다는 생각을 한다.