명령어 return의 쓰임

자바스크립트를 공부하면서 return은 어떤 반환값을 얻을 때 쓰는 명령어로만 알고 있었습니다. 그러다 스프린트를 진행하면서 반환값이 없는 return; 을 사용하는 케이스들을 접하고 return의 역할에 대해 정리했습니다.

 

return 의 용도

MDN의 설명에 따르면 'return 명령문은 함수 실행을 종료하고 주어진 값을 함수 호출 지점으로 반환합니다.' 라고 되어있습니다. 

 

• 함수 중단
• 주어진 값을 함수 호출 지점으로 반환

함수에서 return 명령문에 도달하면 함수의 실행은 그 지점에서 중단되고,

값을 제공한 경우는 함수를 호출한 곳에 그 값을 반환합니다. 이때 값을 명시하지 않으면 undefined를 반환합니다.

아래와 같은 명령문은 모두 함수 실행을 중단합니다.

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

이때 return; 만 있는 경우는 아래 코드 예시와 같이 사용할 수 있습니다.

if 문의 조건이 충족하는 경우 해당 함수를 실행을 중단하고 함수 자체에서 빠져나가라는 의미입니다.

Stack.prototype.pop = function () {
      if(this.count <= 0){  
        return;  //위의 조건을 만족하면 해당 함수를 중단시킴
      }
      var popOne = this.storage[this.count-1];
      delete this.storage[this.count-1];
      this.count--;
      return popOne;
    };

 

return 과 break의 차이점

return과  반복문에서 쓰이는 break의 차이점은 뭘까요?

return은 함수 자체를 중단시키는데 비해 break 명령문이 실행되면 블록 문장에서 빠져나와 다음 작업을 시작합니다.

즉 return과 break의 차이는 어디까지 빠져나가느냐가 됩니다. 

• return : 함수 탈출. 해당 함수(메소드) 자체에서 빠져나감.
• break : 루프 탈출. 함수 내의 반복문 에서 빠져나감.

코드로 살펴보겠습니다. 아래와 같이 결괏값의 차이가 있기 때문에 구분해서 사용하시면 됩니다.

function testBreak1(x) {
  let i = 0;
  while (i < 6) {
    if (i === 3) {
      break;  //break 사용
    }
    i++;
  }
  return i * x;
}

function testBreak2(x) {
  let i = 0;
  while (i < 6) {
    if (i === 3) {
      return;  //return 사용
    }
    i++;
  }
  return i * x;
}

testBreak1(2);  //6
testBreak2(2);  //undefined