[Javascript] 명령어 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 : 루프 탈출. for, switch, while문 등 함수 내의 반복문에서 빠져나감.

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

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

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

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