Study/JavaScript(Clean code)

[JavaScript][clean-code] void & return

갈푸라떼 2022. 6. 13. 13:05

* void & return

  • void : 함수의 반환이 없다.
  • return : 함수가 무언가를 반환한다.

* 예시로 보는 void와 return

function handleClick() {
  return setState(false);
}

function showAlert(message) {
  return alert(message);
}
  • setState함수와 alert함수를 void함수이다. 따라서 함수의 반환이 존재하지않는다.
  • 따라서 return을 넣어주지 않아도 된다.
  • 굳이 반환이 없는데 return을 사용할 필요가 없다.
  • undefined가 return된다.

* JavaScript는 기본적으로 아무런 return이 없을때는 undefined를 return한다.

function test(sum1, sum2) {
  const result = sum1 + sum2

  return
}

test(1, 2); // undefined

// return이 없으므로 undefined가 출력된다.
  • 반환값이 없는 경우엔 굳이 return을 붙일 이유가없다.

 

* return이 없는 함수를 호출해서 return해보기

function testVoidFunc() {
  return test(1, 2);
}

testVoidFunc(); // undefined

 

[참고] 항상 내가 사용하고있는 api들이 return이 있는지 없는지 확인할 것 


* JavaScript에는 void연산자가 존재한다.

다만 우리가 함수에 따로 붙이지 않을 뿐이다.

 

[참고] https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/void
MDN 사이트안에 가서 찾아보면 반환값이 있는가 없는가에 대한 내용이 다 명시되어 있다.

ex) push메서드는 반환 값으로 호출한 배열의 새로운 length를 반환한다.

 

 

[결과적으로]

* 반환이 항상 있어야 되는것들은 함수naming부터 추론이 가능하고 해당 함수를 누군가 만들었을때
사용하는 사람들도 값으로써 잘 활용할 수 있다.

* 함수를 사용할 때 부터 인자를 잘 다루고 인자를 어떻게 명시적으로 사용하는가 그리고 함수가 반환하는게 있는지 없는지도 참고하여 함수를 사용한다.


* 전혀 반환이 없는 함수를 무의미하게 반환하는 행위도 줄인다.

* return값을 활용 예시

function isAdult(age) {
  return age > 19;
}

function getUserName(name) {
  return '유저 ' + name;
}

const isFlag = isAdult(10)
console.log(isFlag); // false
typeof isFlag // boolean


* return을 early return으로 사용하는 예시

function handleClick() {
  if ( // some code) {
    setState(false);

    return; // early return
  }