[ESLint] consistent-return

🚫 ERROR in [eslint]
Expected to return a value at the end of arrow function consistent-return

ESLint의 consistent-return 문서를 참고했습니다!

📌 consistent-return 규칙이란

consistent-return 규칙은 return 값을 일관되게 유지하도록 하는 규칙이다.
함수 내부에서 반복문이나 조건문을 사용해서 return 하려고 하는 경우에 특정 조건에서는 값을 반환하지 않아서 return 값이 일관되지 않을 수 있다.

왜 발생하는지?

자바스크립트에서는 아래와 같이 return 값을 명시적으로 하지 않으면 undefined를 반환한다.

function doSomething(condition) {
    if (condition) {
        return true;
    } else {
        return; // undefined를 반환함
    }
}

이렇게 반환 타입을 정적으로 지정하지 않는 자바스크립트의 특성으로 인해서 다양한 유형의 값을 반환하도록 하는 점을 막기 위해서 consistent-return 규칙을 사용한다.

언제 발생하는지?

특정 조건일 때에는 값을 반환하지 않는 경우에는 undefined를 반환하기 때문에 규칙을 준수하지 않는 코드이다.

function doSomething(condition) {
    if (condition) {
        return true;
    } else {
        return;
    }
}
function doSomethingElse(condition) {
    if (condition) {
        return true;
    }
}

규칙을 준수하도록 코드를 수정하면 아래와 같다.

function doSomething(condition) {
    if (condition) {
        return true;
    } else {
        return false;
    }
}

🤨 제가 마주한 상황은

북눅에서 매개변수에 null 값이 존재하는지 확인하는 함수를 작성하려고 했다.

const hasNull = (...args: (string | number | null)[]): boolean => {
  args.forEach((arg) => {
    if (arg === null) {
      return true
    }
  })

  return false
}

위처럼 arg가 null일 때는 true를 반환하고 args를 모두 확인한 후에는 false를 반환하도록 작성했다.
그런데 조건문 if의 else인 경우에 대해서는 return 문이 없기 때문에 에러가 발생했다.

어떻게 해결했냐면요

이런저런 시도를 하다가 생각난 게 some 메소드이다!
배열의 요소가 특정 조건에 만족하는지 여부를 확인할 때 사용하는 메소드이기 때문에 딱 적절한 메소드였다.
그래서 코드를 아래처럼 수정했다.

const hasNull = (...args: (string | number | null)[]): boolean => {
  return args.some((arg) => arg === null)
}

📒 마무리

java로 코테 풀때 위처럼 조건문을 사용해서 return 하는 방식을 자주 사용하다보니 이렇게 코드를 작성했었는데, 자바스크립트로 코드를 짤 때는 자스의 특성에 맞춰서 consistent-return 규칙을 잘 준수하는 게 코드 품질에 더 좋을 듯하다!

그리고 매번 쓰는 메소드(foreach, map)만 쓰다보니 some, filter 사용을 까먹게 된다. 자스 공부를 소홀히 하지 말자!👍