[JS] 자바스크립트 데이터 제어하기 : if switch while for break continue

---

01. if문

조건문은 프로그래밍에서 가장 기본적인 구문 중 하나로, 조건에 따라 다른 코드를 실행할 수 있도록 해줍니다. 자바스크립트에서는 if문, switch문, 삼항 연산자 등을 사용하여 조건문을 구현할 수 있습니다.

if(조건식){
    document.write("실행되었습니다.(true)");
} else {
    document.write("실행되었습니다.(false)");
}

결과 확인하기

조건식 = 0, null, undefined, false, " "(빈 문자열) = flase

조건식 = 1, '0', '1', 'ABC', true, [], {} = true

 

0, null, undefined, false, " "(빈 문자열)의 5가지 경우는 false의 조건이다.

0을 제외한 숫자, 문자열, 배열, 객체는 if 조건식에서 'true'가 나오는 조건이다.

---

02. if문 생략

if문의 중괄호({ })를 제거하고 간략히 if문을 표현할 수 있습니다.

const num = 100;

// if(num){
//     document.write("실행되었습니다.(true)");
// } else {
//     document.write("실행되었습니다.(false)")
// }

if(num) document.write("실행되었습니다.(true)");
else document.write("실행되었습니다.(false)");  //생략

결과 학인하기

100은 0이 아닌 숫자이므로 'true'

 

조건문은 길어질수록 복잡해지기 때문에 이를 간소화하는 표현도 생겨났다.

---

03. 삼항 연산자

삼항 연산자는 조건식의 결과에 따라 두 개의 표현식 중 하나를 선택하여 실행합니다.

const num = 100;

// if(num == 100){
//     document.write("true");
// } else {
//     document.write("false")
// }                                        //원본

(num == 100) ? document.write("true") : document.write("false");

결과 학인하기

100은 0이 아닌 숫자이므로 'true'

 

삼항 연산자는 조건식의 결과에 따라 두 개의 표현식 중 하나를 선택하여 실행한다.

반면 삼항 연산자가 아닌 원본은 두 표현식을 모두 읽기 때문에 많은 조건식이 있다고 가정하면 처리하는 데 더 오랜 시간이 걸린다.

삼항 연산자는 조건식 뒤에 물음표(?)가 오며, 이어서 true일 때 실행될 표현식이 오고, 그 다음에 콜론(:)이 오며, 이어서 false일 때 실행될 표현식이 오게 된다.

조건 ? A : B;의 뜻은 조건이 true면 A가 반환되고 조건이 false면 B가 반환된다는의 미이다.

---

04. 다중 if문(else if)

여러 개의 조건을 비교할 때 사용하며, 첫 번째 조건이 거짓인 경우 다음 조건을 검사합니다.

const num = 100;

if(num == 90){
    document.write("실행되었습니다.(num == 90)");
} else if(num == 100){
    document.write("실행되었습니다.(num == 100)");
} else if(num == 110){
    document.write("실행되었습니다.(num == 110)");
} else if(num == 120){
    document.write("실행되었습니다.(num == 120)");
} else {
    document.write("실행되었습니다.");
}

결과 학인하기

상수 num의 값이 100이므로, 정답은 "실행되었습니다.(num == 100)"

 

다중 if문은 변수에 따라 변하는 다양한 조건이 있을 때 사용한다.

따라서 변수에 따라 true가 나오지 않고 false가 나온다면 다음의 조건식을 실행한다.

마지막까지 모든 조건이 false라면 마지막 else 블록을 실행한다.

다중 if문은 점수에 따른 등급 평가 같은 곳에 사용할 수 있다.

---

05. 중첩 if문

중첩 if문을 사용하면 여러 개의 조건을 조합하여 더 복잡한 로직을 구현할 수 있습니다.

const num = 100;

if(num == 100){
    document.write("실행되었습니다.(1)");
    if(num == 100){
        document.write("실행되었습니다.(2)");
        if(num == 100){
            document.write("실행되었습니다.(3)");
        }
    }
} else {
    document.write("실행되었습니다.(4)");
}

결과 학인하기

변수 num의 값이 100이고 3개의 조건식의 조건이 num == 100이므로, 정답은 "실행되었습니다.(1)실행되었습니다.(2)실행되었습니다.(3)"

 

중첩 if문 여러 조건을 만족하는 값을 찾을 때 유용하다.

예를 들어 변수로 점수와 출석률 2가지가 있다고 가정할 때,

if문으로 점수는 합격(true)지만 출석률이 좋지 않아 불합격(false)인 학생을 선별할 수 있다.

---

06. switch문

switch문은 여러 개의 조건식을 한번에 검사할 때 사용됩니다.

const num = 100;

switch(num){
    case 90:
        document.write("구십");
        break;      //조건에 맞으면 멈춤
    case 80:
        document.write("팔십");
        break;
    case 70:
        document.write("칠십");
        break;
    case 60:
        document.write("육십");
        break;
    case 50:
        document.write("오십");
        break;
    default:
        document.write("빵");
}

결과 학인하기

변수 num의 값이 100이고 맞는 조건이 없으므로 결과는 "빵"

 

switch문은 주어진 조건에 해당하는 true를 case문에서 찾아간다는 점에서 다중 if문과 구조가 비슷하다.
그러나 다중 if문이 결과를 찾을 때까지 실행을 계속한다면, switch문은 맞는 결과가 나왔을 때 break문으로 불필요한 계산을 멈출 수 있다.

---

07. while문

while문은 조건이 참(true)인 동안 문장을 반복합니다. 조건이 false라면 문장은 한 번도 실행되지 않을 수도 있습니다.

for(let i=0; i<=5; i++){
    document.write(i);
}

let num = 0;                    //초깃값
while(num<=5){               //조건식
    document.write(num);
    num++;                      //명령문(flase가 나오도록 하는 계산식)
}

결과 학인하기

012345

 

while문은 for문과 구조가 비슷하다.
다른 점은 while문은 조건이 참이라면 false가 나오기 전까지 계속 계산을 진행한다는 점이다.
그래서 증감식이나 변수, break문을 이용하여 false가 나오는 때를 정해줘야 한다.

---

08. do while문

do while문은 조건이 뒤로 붙습니다.

let num = 0;                //초깃값
do {
    document.write(num);
    num++                   //명령문
} while(num<=5);         //조건식

결과 학인하기

012345

 

do while문은 조건식이 뒤에 붙기 때문에 일단 문장을 한 번 실행한 후 문장을 확인한다.
while문과 do while문 모두 num++와 같은 명령문이 어디에 위치하냐에 따라 값이 달라질 수 있다.

---

09. for문

for문은 반복적인 작업을 수행할 때 사용하는 제어문입니다.

for(let i = 1; i<=100; i++){
    document.write(i);
}

결과 학인하기

변수 i의 값이 1일 때(let i = 1;)

변수 i의 값이 100보다 크거나 같으면 true(i<=100;)

변수 i의 값이 1씩 증가합니다.(i++)

변수 i는 1로 시작해서 100이 될 때까지 조건식을 충족하므로 결과는

123456 ... 99100

 

for문은

for (초기식; 조건식; 증감식) {

// 조건식이 참일 때 반복 실행할 코드

}

로 구성되며 특히 배열과 같은 데이터 집합을 다룰 때 많이 사용된다.

---

10. 중첩 for문

중첩된 for문은 순서를 이해하고 쓰는 것이 중요합니다.

for(let i=2; i<=9; i++){
    document.write(i + "단","");

    for(let j=1; j<=9; j++){
        document.write(i +"*"+ j +"="+ i*j);    //*, = 은 화면상에 출력해야 하는 '문자열'이다.
        document.write("<br>");
    }
}

결과 학인하기

2단
2*1=2
2*2=4
2*3=6
2*4=8
2*5=10
2*6=12
2*7=14
2*8=16
2*9=18

...

 

중첩 for문은 순서를 이해하는 게 중요하다.

첫 번째 for문이 한 번 진행되면 그 뒤의 for문은 끝날 때까지 진행된다.

이 순서를 이해하면 첫 for문에 몇 단부터 시작할 것인지 넣을 수 있다(i=시작하는 단; i<=끝나는 단).

document.write에 이어 나오는 문자(태그)는 쉼표(,)로 잇는다. CSS처럼

두 번째 for문에서 화면에 출력하기 위한 '*'와 '='에 따음표를 붙이는 걸 잊지 말자.

앞의 i, j는 출력하기 위해서 뒤의 i, j는 연산을 위해서.

---

11. break문

break문은 종료 조건이 되기 전에 반복문을 끝낼 수 있습니다.

for(let i = 1; i <=20; i++){
    if(i == 10){
        break;      //10까지 하고 멈춤
    }
    document.write(i)
}

결과 학인하기

123456789

 

원래대로의 for문이라면 i가 20까지 반복되기 때문에 1부터 20까지 출력해야 한다.
하지만 if문의 break가 있기 때문에 i가 10이 되면 실행을 멈추고 break문까지의 결과만 출력한다.

---

12. continue문

continue문은 조건에 해당되는 값을 만나면 건너뜁니다.

for(let i = 1; i <=20; i++){
    if(i == 10){
        continue;       //10을 건너뜀
    }
    document.write(i)   //continue 앞에 쓰면 출력을 먼저 해서 출력 결과가 달라짐
}

결과 학인하기

12345678911121314151617181920

 

원래대로의 for문이라면 i가 20까지 반복되기 때문에 1부터 20까지 출력해야 한다.
하지만 if문의 continue문이 있기 때문에 10을 건너뛴 나머지 값만 출력한다.