자바스크립트 - 반복문, break, continue

자바스크립트에서도 반복해야할 작업들을 효율적으로 처리할 수 있는 반복문을 지원합니다.

반복문의 내용은 다른 프로그래밍 언어(C, C++, Java 등)에서의 내용과 거의 동일합니다.

그렇기 때문에 이번 글에서는 다른 프로그래밍 언어에서의 반복문과 자바스크립트에서의 반복문과의

구별되는 내용, 그리고 반복문과 깊은 관계를 가지는 break, continue 문에 대해서 다루도록 하겠습니다.

 

 

For / In Loop

일반 for 문과 유사한 반복문이며, 객체의 속성을 반복할 때 유용하게 사용할 수 있습니다.

var person = {fname:"John", lname:"Doe", age:25};

var text = "";
var x;
for (x in person) {
  text += person[x];
}

 

 

For / Of Loop

일반 for문과 유사한 반복문 이며, 반복 가능한 객체의 값의 값에 접근할 때 유용하게 사용할 수 있습니다.

for / of 반복문은 다음과 같은 구조로 사용합니다.

for (variable of iterable) {
  // code block to be executed
}

여기서 variable은 반복할 때마다 다음 속성의 값이 변수에 지정되고, 변수는 const, let, var로 선언할 수 있습니다.

iterable은 반복 가능한 속성을 가진 객체가 위치합니다.

ar cars = ['BMW', 'Volvo', 'Mini'];
var x;

for (x of cars) {
  document.write(x + "<br >");
}

그리고 다음과 같이 문자열을 반복의 요소로서 사용하는 것도 가능합니다.

var txt = 'JavaScript';
var x;

for (x of txt) {
  document.write(x + "<br >");
}

 

 

break, continue는 이미 다른 프로그래밍 언어를 학습하면서 접한 개념일 것입니다.

하지만 반복문과 함께 사용되는 중요한  개념이기 때문에 다시한 번 다루고 넘어가도록 하겠습니다.

 

 

break

break문이 등장하면 프로그램에서는 현재 실행 중인 해당 반복문을 탈출(종료)하게 됩니다.

그래서 원하는 시점에 반복을 중지하고 반복문을 빠져나오고 싶은 경우 조건문과 함께 break문을 사용합니다.

for (i = 0; i < 10; i++) {
  if (i === 3) { break; }
  text += "The number is " + i + "<br>";
}

그래서 위와 같은 코드를 실행한 경우 text는 0, 1, 2에 대한 문장만을 가지게 됩니다.

 

 

continue

continue문이 등장하면 프로그램에서는 현재 실행 중인 반복에 대한 나머지 내용을 생략하고 다음번 반복으로 넘어갑니다.

즉 프로그램이 continue문을 만나게 되면 continue문 이후의 코드들은 모두 생략하고 다음번 반복으로 넘어가게 됩니다.

for (i = 0; i < 10; i++) {
  if (i === 3) { continue; }
  text += "The number is " + i + "<br>";
}

그래서 위와 같은 코드를 실행한 경우 text는 3에 대한 문장만을 가지지 않게 됩니다.

 

 

Label

자바스크립트에서는 이 레이블을 이용해서 반복문을 제어하는 것이 가능합니다.

레이블은 쉽게 생각하면 이름표 정도의 역할을 하는 요소로서 생각할 수 있습니다.

그렇다면 이 요소를 이용해서 어떻게 반복문을 제어할 수 있는 것일까요?

 

보통 레이블은 반복문에서 다음과 같은 형식으로 break, continue문과 함께 사용됩니다.

break labelname;

continue labelname;

기존에 레이블을 사용하지 않고 break, continue문을 사용하는 경우 현재의 반복문 즉, 가장 가까운 반복문을 빠져나가거나

뒤의 내용을 생략하고 다음 반복으로 넘어가는 방식이었다면, 레이블을 사용하게 되면 해당 구문이 위치한 위치에 관계없이

해당 레이블이 위치한 반복문에 대해서 break나 continue를 적용할 수 있게됩니다.

 

솔직히 이해가 되는 것 같으면서도 무슨 내용인지 이해가 잘 되지 않습니다. 이를 예시로 이해하면 보다 내용을 잘 이해할 수

있는데 이 예시에 대해서 먼저 살펴보기 전에 먼저 레이블을 지정하는 방법에 대해서 보도록 하겠습니다.

레이블을 이용하면 특정 코드블럭을 어떠한 이름으로 표현할 수 있게됩니다.

label: {
    statements
}

그리고 특정 코드블럭에 대해서 레이블을 지정하는 방법은 위와 같이 레이블명 + 콜론( : )을 붙이고 블럭으로 지정하고자 하는 영역을 중괄호를 이용해서 묶어주면 됩니다.

 

그렇다면 이제 레이블과 break, continue가 어떠한 식으로 함께 사용되는 지 예시를 통해서 한번 살펴보도록 하겠습니다.

아래 코드와 같이 미리 정의되어 있는 2차원 배열 array[][]에 대해서 저장된 요소들을 2중 반복문을 이용해서 하나씩

조회하고 해당 내용을 순서대로 출력합니다. 

for(int i=0 ; i < array.length ; i++) {
	for(int j=0 ; j < array[i].length ; j++) {
    	document.write(array[i][j] + "<br0>");
        if(array[i][j] == 13)
        	break;
    }
    if(array[i][j] == 13)
    	break;
}

그런데 2차원 배열에 저장된 내용 중에서 그 값이 13인 경우 탐색자체를 종료해야하는 로직을 구현한다고 가정해봅시다.

그렇게 되면 내부의 for문과 외부의 for문에 대해서 모두 break를 걸어야 하기 때문에 위와 같이 다소 깔끔하지 못한

코드가 됩니다. 이러한 문제를 레이블과 break를 함께 결합하여 사용함으로서 편리하게 해결할 수 있습니다.

 

레이블을 사용하여 반복문의 흐름을 통제하게되면 위의 코드를 아래와 같이 작성할 수 있게 됩니다.

out_loop: {
  for(int i=0 ; i < array.length ; i++) {
    inner_loop: {
	  for(int j=0 ; j < array[i].length ; j++) {
        document.write(array[i][j] + "<br0>");
        if(array[i][j] == 13)
          break out_loop;
      }
    }
  }
}

위의 코드를 보면 레이블을 이용해서 밖의 반복문 블록에 대해서 out_loop 레이블을, 안쪽 반복문 블록에 대해서 inner_loop 레이블을

할당한 것을 확인할 수 있습니다. 그리고 조건문에서 break에 레이블을 사용하여서 out_loop를 한번에 종료하는 것을 확인할 수 있습니다.

즉, 레이블과 break, continue를 함께 사용하면 위치에 관계없이 원하는 블록에 대해서 break, continue를 적용할 수 있게 됩니다.

그리고 레이블을 사용함으로서 다음과 같이 코드를 좀더 깔끔하게 구성하 수 있다는 장점이 있습니다.