JavaScript에서 return이란?

최근 작업간에 return이 필요한 부분에 return을 사용하지 않아 곤란한 일을 겪었던 일이 있었다.. 평소 사용할 때 그냥 자주 썼었으니까 익숙하게 사용하고는 했었는데 그런 일을 겪고 난 뒤 한번 사용하더라도 제대로 알고 사용하자라는 생각으로 정리를 해본다

JavaScript에서 return이란?

return 명령문은 함수 실행을 종료하고 주어진 값을 함수 호출 지점으로 반환하기 위해 사용하는 예약어로 두가지 용도로 나눠볼 수 있다.

1. 함수의 값을 반환

let value  = function() {
   let a = 'hello';
   return a;
}

console.log(value) 1 // a를 반환하여 'hello' 가 찍힘
// 만일 값을 명시하지 않으면 대신 undefined를 반환.

다음 return 명령문 모두 함수 실행을 끊는다.

return;
return true;
return false;
return x;
return x + y / 3;

2. 현재 진행중인 함수를 정지시킬 수 있다.

function counter() {
  for (var count = 1; ; count++) {  // 무한 반복
    console.log(count + "A"); // 5까지
      if (count === 5) {
        return;
      }
      console.log(count + "B");  // 4까지
    }
  console.log(count + "C");  // 절대 나타나지 않음
}

counter();

// 출력:
// 1A
// 1B
// 2A
// 2B
// 3A
// 3B
// 4A
// 4B
// 5A

위 예제와 같이 함수의 중간에 필요한 조건을 제시하여 원하는 값을 얻을 수가 있다.

예) axios를 통해 데이터를 응답(요청)시 잘못된 값으로 화면상에 Network오류가 뜨기전에 유효성 체크를 통해 해당 유효성에 통과하지 못한다면 return을 반환하여 해당 API의 실행을 종료하고 경고 alert창을 띄울 수가 있다.

return 과 break 문의 차이점?

return은 함수 자체를 중단시키지만 break는 해당 블록 문장에서 빠져나와 다음 작업을 시작한다.

return : 함수 탈출. 해당 함수(메소드) 자체에서 빠져나감.

break : 루프 탈출. 함수 내의 반복문 에서 빠져나감.

function Test(x) {
  let i = 0;

  while (i < 6) {
    if (i == 3) {
      break; // i가 3이 되었을 때 해당 while문 을 빠져나옴
    }
    i += 1;
  }
  return i	// 3
}