갈푸라떼
갈푸라떼는 개발중
갈푸라떼
전체 방문자
오늘
어제
  • 분류 전체보기 (232)
    • CS (0)
      • CSinfo (0)
    • Frontend (15)
      • HTML,CSS (1)
      • Javascript (2)
      • React (0)
      • React Hook (12)
    • Backend (0)
      • Python (0)
      • Node.js (0)
      • php (0)
    • DB (2)
      • MySQL (2)
      • BigQuery (0)
      • Mongodb (0)
    • Study (186)
      • JavaScript (72)
      • JavaScript(Clean code) (50)
      • Node.js (11)
      • HTML,CSS (13)
      • React (30)
      • TypeScript (10)
      • React-Native (0)
    • Error (2)
      • error (2)
    • Git (22)
      • Git (22)
    • Help Coding (4)
      • Useful websites (3)

블로그 메뉴

  • 홈
  • 태그
  • 방명록
  • Github

공지사항

인기 글

태그

  • this
  • Arrow
  • 싱글스레드
  • prototype
  • 상속
  • 정적 레벨
  • nodemon
  • 네이밍
  • SPREAD
  • 컴파일러
  • symbol
  • 렉시컬 환경
  • structure
  • Babel
  • 이터러블
  • 자바스크립트엔진
  • 심볼
  • 오버라이딩
  • 객체타입
  • 함수
  • 실행 컨텍스트
  • PM2
  • function
  • 호이스팅
  • 프로토타입
  • ECMAScript
  • class
  • 원시타입
  • 스코프 체인
  • 인터프리터

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
갈푸라떼

갈푸라떼는 개발중

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
  }

 

'Study > JavaScript(Clean code)' 카테고리의 다른 글

[JavaScript][clean-code] Callback Function  (0) 2022.06.15
[JavaScript][clean-code] 화살표 함수 (Arrow function)  (0) 2022.06.13
[JavaScript][clean-code] Rest Parameters  (0) 2022.06.13
[JavaScript][clean-code] default Value / default parameter  (0) 2022.06.12
[JavaScript][clean-code] 복잡한 인자 관리하기  (0) 2022.06.12
    'Study/JavaScript(Clean code)' 카테고리의 다른 글
    • [JavaScript][clean-code] Callback Function
    • [JavaScript][clean-code] 화살표 함수 (Arrow function)
    • [JavaScript][clean-code] Rest Parameters
    • [JavaScript][clean-code] default Value / default parameter
    갈푸라떼
    갈푸라떼

    티스토리툴바