[JavaScript] return과 break의 차이

 

---

목차

 

1. return 정의

2. return 설명

- break와의 차이

3. 예제

- 함수를 중단하는데 사용하는 return

- 값을 반환하는데 사용하는 return

---

 

 

 

1. return 정의

---

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

 

1. 함수 중단

2. 주어진 값을 함수 호출 지점으로 반환

 

 

2. return 설명

---

함수 본문에서 return문을 만나면 함수는 그 지점에서 중단된다.  값을 제공한 경우에는 함수를 호출한 곳에 그 값을 반환하며 값을 명시하지 않으면 undefined를 반환한다.

 

아래의 return 명령문은 모두 함수 실행을 중단한다.

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

 

 

break와의 차이

---

break란?

현재 루프 즉, switch나 for, while문 등을 종료하고 루프에서 빠져나오는 것

 

return은 함수 실행을 종료하고 함수를 빠져나온다.

 

function text(x) {
  let i = 0;

  while (i < 6) {
    if (i == 3) {
      break;
    }
    i += 1;
  }
  return i * x;
}

 

위 코드는 i가 3일때, break문을 만나 while loop를 종료한다. 이후 while loop를 빠져나와  return i * x;로 흐름이 옮겨지게 되고 3 * x 값을 반환한다. 따라서 break문은 loop문을 종료할 때 쓰이기 때문에 while문, for문, do~while문 등 에서 유용하게 쓰인다.

 

 

 

정리

---

- break: 함수 자체에서 빠져나가는 것이 아님. 함수 안에 쓰인 loop문에서만 빠져나감.

- return: 함수 자체에서 빠져나감

 

 

 

3. 예제

---

1. 함수를 중단하는데 사용하는 return 예제

test = function () {
   var x = 1;
   if (x == 1) {
      return x;
   }
   x = x + 1;
   ...
   ..
   .
}

 

위의 코드는 많은 코드가 담겨있으나 필요한 구문만 실행하기 원한다면 모든 코드를 실행할 필요가 없다. 따라서 return을 사용하여 필요한 부분만 사용 후 함수에서 빠져나오면 된다.

 

 

2. 값을 반환하는데 사용하는 return 예제

var test = function () {
   var x = 1;
}

test();

 

 

위 코드에서 함수 test는 x라는 내부변수를 가지고 있다. 이 함수는 내부구문들을 실행했지만 반환할 값이 선언되지 않았기 때문에 실행해도 아무런 결과가 나오지 않는다.

 

var test = function() {
   var x = 1;
   return x;
}

test2 = test();
1   //   1을 반환하여 test2의 값에 1이 선언됨

 

따라서 x를 얻기 위해서는 위 코드처럼 return문을 사용해야한다.

 

 

Q. return 없이 x값을 불러올수 있을까?

 

A. 불가능하다. 이유는 앞서 말한 것 처럼 x가 함수내에서 실행된 지역변수이기 때문이다. 이 경우에는 return을 이용해 외부로 반환하여 사용해야 한다.