[JavaScript (5)] Javascript 제어문(2) - 반복문(for, while, break, continue)

[JavaScript (5)] Javascript 제어문(2) - 반복문(for, while, break, continue)

안녕하세요. 갓대희 입니다. 이번 포스팅은 [ 자바스크립트 반복문 ] 입니다. : ) 

 

0. 들어가기 앞서

 

반복문이란, 똑같은 명령을 일정 횟수만큼 반복하여 수행하도록 제어하는 실행문 이다.

흔히 처음 개발을 시작하면 "for문으로 돌려"라는 말을 흔히 들을 수 있는데, 대표적인 반복문이 for문이고, 이외에 다양한 반복문이 존재한다.

자바스크립트에서 사용할 수 있는 반복문과 반복문에서 쓸수 있는 구문들은 다음과 같다.

 

1) for 문
2) for / in 문
3) for / of 문
4) while 문
5) do / while 문
6) label 문
7) break 문
8) continue 문

 

1. for 문

▶ 1. for문

 - for 반복문은 어떤 특정 조건을 불충족할때까지 반복한다.
 - 문법

for (초기문; 조건문; 증감문) {
    조건문의 결과가 참인 경우 반복적으로 실행하고자 하는 명령문;
}

ex)

for (var i = 1; i < 10; i++) {
    console.log(i + "번째 실행");
}

 - for문의 실행 순서는 다음 그림을 참고 하자.

▶ 2. for / in 문

 - 특정 객체의 열거 가능한 모드 프로퍼티(enumerable properties)를 루프 처리 한다. 
 - 문법

for (변수명 in 객체(object)){
    조건문의 결과가 참인 경우 반복적으로 실행하고자 하는 명령문;
}

ex) Object

var arrTest = {name:"갓댐", age:19};
for (arr in arrTest){
	console.log("프로퍼티 : " + arr + ", 값 : " + arrTest[arr]);
}

ex) Array

var arrTest = [4, 5, 8];
for (var arr in arrTest) {
    console.log(arr);
}

▶ 3. for / of 문

 - 특정 객체의 반복 가능한 객체(Array, Map, Set, arguments 등)를 루프 처리 한다.
 - 즉, 루프마다 객체의 열거할 수 있는 프로퍼티의 값을 지정된 변수에 대입 한다.
 - 다만 익스 플로러에선 지원하지 않으니 조심 하자.

 - 문법

for (변수명 of 객체(object)){
    조건문의 결과가 참인 경우 반복적으로 실행하고자 하는 명령문;
}

ex) Object => 반복 가능한 객체가 아니기 때문에 에러 발생.

var arrTest = {name:"갓댐", age:19};
for (arr of arrTest){
    console.log(arr);
}

ex) Array => 반복 가능한 객체, 처리 가능.

    for in과 for of 도 비교해보자.

var arrTest = [4, 5, 8];
for (var arr of arrTest) {
    console.log(arr);
}

 

 

ex) Set도 반복 가능한 객체 이다.

var arrTest = new Set([1, 1, 2, 2]);
for (var arr of arrTest) {
    console.log(arr);
}

 

2. while 문

▶ 4. while 문

 - 주어진 어떤 조건문이 참이면 특정 실행문, 명령문을 반복 수행 한다.
 - while 문 내부에 표현식의 결과를 변경하는 실행문이 존재하지 않을 경우 무한루프에 빠질 수 있다.
   혹시라도 무한 루프에 빠지게 되면 시스템에 엄청난 영향을 줄 수 있으니 조심 하자.
 - 문법

while (조건문) { 
    조건문의 결과가 참인 경우 반복적으로 실행하고자 하는 명령문; 
}

ex) for문과 while문 비교

var i = 1;
while (i < 10) { // 변수 i가 10보다 작을 때만 while 문을 반복함.
    console.log(i + "번째 실행");
    i++;
}

// 처음 for문과 동일한 결과를 수행하는 것을 볼 수 있다.
for (var i = 1; i < 10; i++) {
    console.log(i + "번째 실행");
}

 

 - while문의 실행 순서를 다음 도식을 통해 확인해 보자.

▶ 5. do / while 문

 - while 문은 루프 진입 전 먼저 조건문부터 검사 하였다.
 - do / while 문은 먼저 루프를 한 번 실행한 후에 조건문을 검사 한다.
   즉, do / while 문은 무조건 최소 한 번은 루프를 실행 하는 것이 while문과의 차이점이다.
 - 문법

do { 
    조건문의 결과가 참인 경우 반복적으로 실행하고자 하는 명령문; 
} while (조건문);

ex) while, do while 비교

// do while => 1행 출력
var i = 1;
do { // 변수 i가 1보다 작을 때만 while 문을 반복함.
    console.log(i + "번째 실행");
    i++;
} while (i < 1);

// while => 조건이 맞지 않기 때문에 바로 종료
var i = 1;
while (i < 1) {
    console.log(i + "번째 실행");
    i++;
}

 

 - do / while문의 실행 순서를 다음 도식을 통해 확인해 보자.

3.  기타 제어문

▶ 6. label 문

 - 프로그램 내의 특정 영역을 식별할 수 있도록 해주는 식별자 이다.
 - label 문을 continue문 또는 break 문과 같이 사용하면 프로그램의 흐름을 특정 영역으로 이동시킬 수 있다.
 - 문법

label: 
    statement

▶ 7. break 문

 - 루프 내에서 사용하여 해당 반복문을 종료시키고, 반복문 바로 다음에 위치한 실행문으로 프로그램의 흐름을 이동 시킨다.
 - 즉, 루프 내에서 표현식의 판단 결과에 상관없이 반복문을 완전히 빠져나가고 싶을 때 사용한다.
 - 문법

1. break; // 가장 안쪽의 반복문을 빠져 나온다.
2. break label이름; // 특정 label문에서 끝내고 나온다.

ex) 

// break;
for(var i=0; i<3; i++){
	for (var j=0; j<3; j++){
		console.log("i : " + i + ", j : " + j);
		if(i==1 && j==0){
			break;
		}
	}
}

// break label;
outsideFor:
for(var i=0; i<3; i++){
	insideFor:
	for (var j=0; j<3; j++){
		console.log("i : " + i + ", j : " + j);
		if(i==1 && j==0){
			break outsideFor;
		}
	}
}

 - ex2의 결과를 보면 기본 break문과는 다르게 바깥쪽 라벨을 찾아가 for문을 다 종료 처리 한 것을 볼 수 있다.

▶ 8. continue 문

 - 루프 내에서 사용하여 해당 루프의 나머지 부분을 건너뛰고, 바로 조건문을 수행 한다.
 - 반복문 내에서 특정 조건을 제외 처리할 때 많이 사용 한다.
 - 문법

1. continue; // 현재 반복은 종료, 다음 반복 루프 실행
2. continue label이름; // 특정 label 루프 실행

ex)

// continue문
for (var i = 1; i <= 4; i++) {
    for (var j = 1; j <= 4; j++) {
        if ((j % 2) == 0)
            continue;
        console.log("i : " + i + ", j : " + j);
    }
}

// continue label문
outsideFor:
for (var i = 1; i <= 4; i++) {
	insideFor:
	for (var j = 1; j <= 4; j++) {
		if ((j % 2) == 0)
			continue outsideFor;
		console.log("i : " + i + ", j : " + j);
	}
}