[JavaScript] 자바스크립트 제어문 : 조건문, 반복문, 루프 제어(label, continue, break)

 

 

제어문 (control flow statements)

: 프로그램의 순차적인 흐름을 제어해야 할 때 사용하는 실행문

 

 

 

---

조건문 (conditional statements)

: 주어진 표현식의 결과에 따라 별도의 명령을 수행하도록 제어하는 실행문

 

▶ if 문

- 표현식의 결과가 참(true)이면 주어진 실행문을 실행하고, 거짓(false)이면 아무것도 실행하지 않는다

- 문법

if (표현식) {
    표현식의 결과가 참일 때 실행하고자 하는 실행문;
}

- (예)

var x = 10, y = 20;
if (x == y) {
    document.write("x와 y는 같습니다.");
}
if (x < y) {
    document.write("x가 y보다 작습니다.");
}
if (x > y) // 실행될 실행문이 한 줄뿐이라면 중괄호({})를 생략할 수 있음.
    document.write("x가 y보다 큽니다.");

 

 

 

▶ else 문

- if 문과 같이 사용할 수 있다

- if 문의 표현실 결과가 거짓(false)일때 주어진 실행문을 실행한다

- 문법

if (표현식) {
    표현식의 결과가 참일 때 실행하고자 하는 실행문;
} else {
    표현식의 결과가 거짓일 때 실행하고자 하는 실행문;
}

- (예)

var x = 10, y = 20;
if (x == y) {
    document.write("x와 y는 같습니다.");
} else {
    if (x < y)
        document.write("x가 y보다 작습니다.");
    else // 실행될 실행문이 한 줄뿐이라면 중괄호({})를 생략할 수 있음.
        document.write("x가 y보다 큽니다.");
}

 

 

 

▶ else if 문

- if 문처럼 표현식을 설정할 수 있어서, 중첩된 if 문을 더 간결하게 표현할 수 있다

- 하나의 조건문에서 if 문과 else 문은 한번씩만 사용될 수 있지만, else if 문은 여러 번 사용될 수 있다

- 문법

if(표현식1) {
    표현식1의 결과가 참일 때 실행하고자 하는 실행문;
} else if (표현식2) {
    표현식2의 결과가 참일 때 실행하고자 하는 실행문;
} else {
    표현식1의 결과도 거짓이고, 표현식2의 결과도 거짓일 때 실행하고자 하는 실행문;
}

- (예)

var x = 10, y = 20;
if (x == y) {
    document.write("x와 y는 같습니다.");
} else if (x < y) {
    document.write("x가 y보다 작습니다.");
} else { // x > y인 경우
    document.write("x가 y보다 큽니다.");
}

 

 

 

▶ 삼항 연산자에 의한 조건문

- 조건문을 삼항 연산자를 이용해 간단히 표현할 수 있다

- 문법

표현식 ? 반환값1 : 반환값2

 

 

 

▶ switch 문

- 주어진 조건 값에 따라 프로그램이 다른 명령을 수행하도록 하는 조건문

- if / else 문과 마찬가지로 동작하지만, 가독성 측면에서 더 뛰어남

- 문법

switch (조건 값) {
    case 값1:
        조건 값이 값1일 때 실행하고자 하는 실행문;
        break;
    case 값2:
        조건 값이 값2일 때 실행하고자 하는 실행문;
        break;
    ...
    default:
        조건 값이 어떠한 case 절에도 해당하지 않을 때 실행하고자 하는 실행문;
        break;
}

- 각 case 절 및 default 절은 반드시 break 키워드를 포함하여야, 해당하는 절을 실행한 뒤 전체 switch 문을 빠져나간다

- (예)

var x = 10;
switch (typeof x) {
    case "number":
        document.write("변수 x의 타입은 숫자입니다.");
        break;
    case "string":
        document.write("변수 x의 타입은 문자열입니다.");
        break;
    case "object":
        document.write("변수 x의 타입은 객체입니다.");
        break;
    default:
        document.write("변수 x의 타입을 잘 모르겠네요...");
        break;
}

- (예) 여러 개의 case 절을 사용하여 여러 조건을 한 번에 표현

var day = new Date().getDay(); // 오늘의 요일을 반환함. (일요일: 0 ~ 토요일: 6)
switch (day) {
    case 1: // 월요일인 경우
    case 2: // 화요일인 경우
    case 3: // 수요일인 경우
    case 4: // 목요일인 경우
    default: // 0부터 6까지의 값이 아닌 경우
        document.write("아직도 주말은 멀었네요... 힘내자구요!!");
        break;
    case 5: // 금요일인 경우
        document.write("오늘은 불금이네요!!");
        break;
    case 6: // 토요일인 경우
    case 0: // 일요일인 경우
        document.write("즐거운 주말에도 열심히 공부하는 당신~ 최고에요!!");
        break;
}

 

 

 

 

 

 

 

---

반복문 (iteration statements)

: 프로그램 내에서 똑같은 명령을 일정 횟수만큼 반복하여 수행하도록 제어하는 실행문

 

▶ while 문

- 특정 조건을 만족할 때까지 계속해서 주어진 실행문을 반복하여 실행

- 문법

while (표현식) {
    표현식의 결과가 참인 동안 반복적으로 실행하고자 하는 실행문;
}

    - 표현식이 참(true)인지 판단하여 참이면 내부 실행문을 실행

    - 내부 실행문을 실행한 후, 다시 표현식으로 돌아와 표현식이 참이지 판단

- (예)

var i = 1;
while (i < 10) { // 변수 i가 10보다 작을 때만 while 문을 반복함.
    document.write(i + "<br>");
    i++; // 반복할 때마다 변수 i를 1씩 증가시켜 변수 i가 10보다 커지면 반복문을 종료함.
}

- 무한 루프(infinite loop)

    - while 문 내부에 표현식 결과를 변경하는 실행문이 존재하지 않는 경우, 프로그램은 루프를 영원히 반복

    - 무한 루프에 빠진 프로그램은 영원히 종료되지 않는다

    - 특별히 의도한 경우가 아니라면 반드시 피해야 함

- 표현식의 결과가 어느 순간에는 거짓(false)을 가지도록 표현식 결과를 변경하는 실행문을 반드시 포함해야 한다

 

 

 

▶ do / while 문

- 표현식의 결과와 상관없이 무조건 한 번 루프를 실행

- while 문은 루프에 진입하기 전 먼저 표현식을 검사하는 반면, do / while 문은 먼저 루프를 실행한 후 표현식을 검사한다

- 문법

do {
    표현식의 결과가 참인 동안 반복적으로 실행하고자 하는 실행문;
} while (표현식);

- (예)

var i = 1, j = 1;
while (i > 3) { // 변수 i의 초깃값은 1이기 때문에 이 while 문은 한 번도 실행되지 않음.
    document.write("i : " + (i++) + "<br>");
}
do { // 변수 j의 초깃값은 1이기 때문에 이 do / while 문은 단 한 번만 실행됨.
    document.write("j : " + (j++) + "<br>");
} while (j > 3);

 

 

 

▶ for 문

- 자체적으로 초기식, 표현식, 증감식을 모두 포함하고 있는 반복문

- 문법

for (초기식; 표현식; 증감식) {
    표현식의 결과가 참인 동안 반복적으로 실행하고자 하는 실행문;
}

- 초기식, 표현식, 증감식은 각각 생략 가능

- 쉼표 연산자(,)를 사용하여 여러 개의 초기식이나 증감식을 동시에 사용 가능

- (예)

for (var i = 1; i < 10; i++) {
    document.write(i + "<br>");
}

 

 

 

▶ for / in 문

- 해당 객체의 모든 열거 가능한 프로퍼티(enumerable properties)를 순회할 수 있도록 해준다

- 루프마다 객체의 열거할 수 있는 프로퍼티의 이름을 지정된 변수에 대입, 대입받은 변수를 이용하면 루프 안에서 객체의프로퍼티에 순차적으로 접근 가능하다

※ 열거할 수 있는 프로퍼티란 내부적으로 enumerable 플래그가 true로 설정된 프로퍼티를 의미한다

- 문법

for (변수 in 객체) {
    객체의 모든 열거할 수 있는 프로퍼티의 개수만큼 반복적으로 실행하고자 하는 실행문;
}

- (예)

var arr = [3, 4, 5];
for (var i = 0; i < arr.length; i++) { // 배열 arr의 모든 요소의 인덱스(index)를 출력함.
    document.write(i + " ");
}
for (var i in arr) { // 위와 같은 동작을 하는 for / in 문
    document.write(i + " ");
}


var obj = { name : "이순신", age : 20 };
for (var i in obj) {
    document.write(i + "<br>");
}

 

 

 

▶ for / of 문

- 반복할 수 있는 객체(iterable objects)를 순회할 수 있도록 하는 반복문

- 자바스크립트에서 반복 가능한 객체 : Array, Map, Set, arguments 객체 등

- 루프마다 객체의 열거할 수 있는 프로퍼티의 값을 지정된 변수에 대입

- 문법

for (변수 of 객체) {
    객체의 모든 열거할 수 있는 프로퍼티의 개수만큼 반복적으로 실행하고자 하는 실행문;
}

- (예)

var arr = [3, 4, 5];
for (var i = 0; i < arr.length; i++) { // 배열 arr의 모든 요소의 인덱스(index)를 출력함.
    document.write(arr[i] + " ");
}
for (var value of arr) { // 위와 같은 동작을 하는 for / of 문
    document.write(value + " ");
}


var arr = new Set([1, 1, 2, 2, 3, 3]);
for (var value of arr) {
    document.write(value + " ");
}

 

※ for / of 문은 익스플로러에서 지원하지 않는다

 

 

 

 

 

 

 

---

루프의 제어

- 일반적인 루프문은 다음 표현식을 검사하기 전까지 루프 안에 있는 모든 실행문을 실행한다

- continue 문과 break 문은 이러한 일반적인 루프의 흐름을 사용자가 제어하도록 한다

- label 문을 사용하면 continue 문과 break 문이 프로그램의 흐름을 특정 영역으로 이동시킬 수 있게 한다

 

▶ label 문

- 프로그램 내의 특정 영역을 식별할 수 있도록 해주는 식별자

- label 문을 이용하면, continue문과 break문의 동작이 프로그램의 흐름을 특정 영역으로 이동시킬 수 있다

- 문법

label:
식별하고자 하는 특정 영역

- (예) label arrIndex는 그 이후에 나오는 for문 전체를 가리키는 식별자

arrIndex:
for (var i in arr) {
    document.write(i);
}

 

 

 

▶ continue 문

- 루프 내에서 사용하여 해당 루프의 나머지 부분을 건너뛰고, 바로 다음 표현식의 판단으로 넘어간다

- 보통 반복문 내 특정 조건에 대한 처리를 제외하고자 할 때 자주 사용

- 두 가지 문법

1. continue;
2. continue 라벨이름;

- (예)

/* 1부터 100까지 정수 중 3의 배수를 제외하고 출력하는 예제 */
var exceptNum = 3;
for (var i = 0; i <= 100; i++) {
    if (i % exceptNum == 0) // exceptNum의 배수는 출력하지 않음.
        continue;
    document.write(i + " ");
}


/* 라벨을 이용하여 구구단 값이 홀수인 경우에만 출력하는 예제 */
gugudan:
for (var i = 2; i <= 9; i++) {
    dan:
    for (var j = 1; j <= 9; j++) {
        if ((i*j) % 2 == 0)
            continue dan;
        document.write(i + " * " + j + " = " + (i*j) + "<br>");
    }
}

 

 

 

▶ break 문

- 루프 내에서 사용하여 해당 반복문을 완전히 종료시키고, 반복문 바로 다음에 위치한 실행문으로 프로그램의 흐름을 이동시킨다

- 즉, 루프 내 표현식의 판단 결과에 상관없이 반복문을 완전히 빠져나가고 싶을 때 사용

- 두 가지 문법

1. break;
2. break 라벨이름;

- (예)

/* 배열에서 특정값을 가지고 있는 인덱스를 출력 */
var lectures = ["html", "css", "자바스크립트", "php"];
var topic = "자바스크립트";
for (var i = 0; i < lectures.length; i++) {
    if (lectures[i] == topic) {
        document.write(topic + " 과목은 " + (i + 1) + "번째 과목입니다.");
        break; // 원하는 값을 찾은 후에는 더 이상 for 문을 반복하지 않고 빠져나감.
    }
}


/* 라벨을 이용하여 구구단을 3단까지만 출력 */
gugudan:
for (var i = 2; i <= 9; i++) {
    dan:
    for (var j = 1; j <= 9; j++) {
        if (i > 3)
            break gugudan;
        document.write(i + " * " + j + " = " + (i*j) + "<br>");
    }
}

 

 

 

 

 

 

 

 

[참고자료] http://tcpschool.com/javascript/intro