데이터 제어하기

01. if문

if()문을 이용하여 조건문에 맞는 출력값을 뽑는 예제입니다.

{
    //if문 형식
    //if (조건문) {
    //    document.write("true문");
    //} else {
    //    document.write("false문");
    //}

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

if문의 특징
1. 조건부 실행: if 문은 주어진 조건을 평가하고 해당 조건이 참(True)이면 특정 코드 블록을 실행합니다.
조건이 거짓(False)이면 해당 코드 블록은 실행되지 않습니다.

2. else 절: if 문은 조건이 거짓일 때 실행될 대체 코드 블록을 제공하는 else 절과 함께 사용할 수 있습니다.
이 경우, 조건이 참이면 if 블록이 실행되고, 조건이 거짓이면 else 블록이 실행됩니다.

3. else if 절: 여러 가지 조건을 비교하고 다양한 동작을 수행해야 할 경우, else if 절을 사용하여 여러 조건을 순차적으로 평가할 수 있습니다.

추가로 조건문에 보통 조건이 들어가지만 간혹 자료형이 들어가 true, false로 판단될 때가 있습니다.
true : true, "문자열", 1, 2, "1", "2", [], {}
false : false, 0, null, undefined, ""(빈문자열)

9줄 : if문에 조건으로 0자료형을 넣습니다.
10줄 : document.write()를 이용해 조건이 참이면 "실행되었습니다.(true)"를 화면에 출력합니다.
11줄 : 거짓이라면,
12줄 : document.write()를 이용해 조건이 참이면 "실행되었습니다.(true)"를 화면에 출력합니다.

결과 확인하기

02. 다중 if문

if()문을 여러개 이용하여 조건문에 맞는 출력값을 뽑는 예제입니다.

{
    const num = 100;

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

다중 if문의 특징
1. 순차적 평가: 다중 if 문은 위에서 아래로 순차적으로 조건을 평가합니다.
첫 번째 조건부터 시작하여 참인 첫 번째 조건이나 else if 절을 만나면 해당 코드 블록을 실행하고 나머지 조건은 평가하지 않습니다.

2. 하나의 코드 블록만 실행: 다중 if 문에서 조건 중 하나만 실행되며, 나머지 코드 블록은 실행되지 않습니다.

3. 선택적 실행: 다중 if 문은 다양한 조건에 따라 다른 코드 경로를 선택하여 실행할 수 있습니다.

4.마지막 else 절: else 절은 모든 조건이 거짓인 경우 실행되는 코드 블록을 제공합니다.

5. 중첩 가능: 다중 if 문은 다른 if 문이나 제어문과 중첩하여 사용할 수 있습니다.

2줄 : 상수 변수 num에 100을 넣습니다.
4줄 : if문의 조건에 num이 90이라면, 이라는 조건을 넣습니다.
5줄 : document.write()를 이용해 조건이 참이면 "실행되었습니다.(num=90)"를 화면에 출력합니다.
6줄 : 만약 num이 95라면,
7줄 : document.write()를 이용해 조건이 참이면 "실행되었습니다.(num=95)"를 화면에 출력합니다.
8줄 : 만약 num이 100라면,
9줄 : document.write()를 이용해 조건이 참이면 "실행되었습니다.(num=100)"를 화면에 출력합니다.
10줄 : 만약 num이 105라면,
11줄 : document.write()를 이용해 조건이 참이면 "실행되었습니다.(num=105)"를 화면에 출력합니다.
12줄 : 그조차도 아니라면,
13줄 : document.write()를 이용해 조건이 참이면 "실행되었습니다."를 화면에 출력합니다.

결과 확인하기

03. 중첩 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");
    }
}

2줄 : 상수 변수 num에 100을 넣습니다.
4줄 : if문의 조건에 num이 100이라면, 이라는 조건을 넣습니다.
5줄 : document.write()를 이용해 조건이 참이면 "실행되었습니다.1"를 화면에 출력합니다.
6줄 : 중첩으로 if문 조건에 num이 100이라면, 이라는 조건을 넣습니다.
7줄 : document.write()를 이용해 조건이 참이면 "실행되었습니다.2"를 화면에 출력합니다.
8줄 : 중첩으로 if문 조건에 num이 100이라면, 이라는 조건을 넣습니다.
9줄 : document.write()를 이용해 조건이 참이면 "실행되었습니다.3"를 화면에 출력합니다.
12줄 : 그게 아니라면,
13줄 : document.write()를 이용해 조건이 참이면 "실행되었습니다.4"를 화면에 출력합니다.

결과 확인하기

04. if문 생략 & 삼항 연산자

if()문을 생략하는 여러 유형과 삼항연산자로 if문처럼 결과를 출력하는 예제입니다.

{
    const num = 100;

    // 모든 결과 출력을 다 읽음, 속도가 느림
    if(num){
        document.write("실행되었습니다.(true)");
    }
    //생략
    if(num) document.write("실행되었습니다.(true)");

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

    // 삼항 연산자(조건식 연산자) 속도가 빠름, 조건에 맞는 출력만 읽음
    (num == 100) ? document.write("true") : document.write("false");
}

2줄 : 상수 변수 num에 100을 넣습니다.
5줄 : if문에 조건으로 num을 넣습니다.
6줄 : document.write()를 이용해 조건이 참이면 "실행되었습니다.(true)"를 화면에 출력합니다.
9줄 : if문의 괄호를 생략해 한줄로 작성했으며, num이 참 값이라면 "실행되었습니다.(true)"를 화면에 출력합니다.
11줄 : if문의 괄호를 생략해 한줄로 작성했으며, num이 참 값이라면 "실행되었습니다.(true)"를 화면에 출력합니다.
12줄 : num이 참이 아니라면 "실행되었습니다.(false)"을 화면에 출력합니다.
15줄 : 삼항 연산자로, num이 100이라는게 참이라면 "true"를 화면에 출력, 거짓이라면 "false"를 화면에 출력

결과 확인하기

05. switch문

switch문을 이용해 조건에 맞는 출력값을 뽑아내는 예제입니다.

{
    const num = 100;

    switch (num) {
        case 90:
            document.write("실행되었습니다.(90)");
            break;

        case 95:
            document.write("실행되었습니다.(95)");
            break;

        case 100:
            document.write("실행되었습니다.(100)");
            break;

        case 105:
            document.write("실행되었습니다.(105)");
            break;

        default:
            document.write("실행되었습니다.");
    }
}

2줄 : 상수 변수 num에 100을 넣습니다.
4줄 : switch문에 조건값으로 변수 num을 넣습니다.
5줄 : 조건값이 90이라면,
6줄 : document.write()를 이용해 조건이 참이면 "실행되었습니다.(90)"를 화면에 출력합니다.
7줄 : break문으로 위조건이 맞아 실행되었으면 switch문을 멈춥니다. 9줄 : 조건값이 95이라면,
10줄 : document.write()를 이용해 조건이 참이면 "실행되었습니다.(95)"를 화면에 출력합니다.
11줄 : break문으로 위조건이 맞아 실행되었으면 switch문을 멈춥니다. 13줄 : 조건값이 100이라면,
14줄 : document.write()를 이용해 조건이 참이면 "실행되었습니다.(100)"를 화면에 출력합니다.
15줄 : break문으로 위조건이 맞아 실행되었으면 switch문을 멈춥니다. 17줄 : 조건값이 105이라면,
18줄 : document.write()를 이용해 조건이 참이면 "실행되었습니다.(105)"를 화면에 출력합니다.
19줄 : break문으로 위조건이 맞아 실행되었으면 switch문을 멈춥니다.
21줄 : default문을 선언해 위의 조건이 다 아니라면,
22줄 : document.write()를 이용해 조건이 참이면 "실행되었습니다."를 화면에 출력합니다.

결과 확인하기

06. while문

while문을 이용해 정해진 조건이 될때까지 반복하는 예제를 만듭니다.

{
    let num = 1;
    while (num <= 10) {
        document.write(num, "
");
        num++;
    }
}

2줄 : 변수 num에 값 1을 넣습니다.
3줄 : while문을 이용해 num값이 10보다 작거나 클때까지 반복하는 조건을 넣습니다.
4줄 : document.write()를 이용해 조건이 참이면 num값을 화면에 출력합니다.
5줄 : 출력 후 num값을 1 올려줍니다.

결과 확인하기

07. do while문

do while문을 이용해 무조건 한번은 출력해야하는 반복문을 만드는 예제입니다.

{
    let num = 1;
    do {
        document.write(num);
        num++
    } while (num <= 10);
}

2줄 : 변수 num에 숫자 1을 넣습니다.
3줄 : do while문의 시작인 do를 넣어 출력문을 입력할 준비를 합니다.
4줄 : document.write()를 이용해 num의 값을 화면에 출력합니다.
5줄 : num값을 1증가시킵니다.
6줄 : while문으로 num의 값이 10보다 작거나 같을 때까지 반복시키는 조건을 넣습니다.

결과 확인하기

08. for문

for문을 이용해 배열의 값을 출력하고, forEach(), for of(), for in()을 이용해봅니다.

{
    const num = [10, 20, 30, 40, 50, 60, 70, 80, 90];
    for(let i=0; i<num.length; i++){
        document.write(num[i], "<br>");
    }

    //for each
    num.forEach((x) => {
        document.write(x, "<br>");      
    })

    num.forEach((x, y) => {
        document.write(num[y], "<br>")
    })

    //for of
    for(const x of num){
        document.write(x, "<br>");
    }

    //for in
    for(const x in num){
        document.write(num[x], "<br>")
    }

}

2줄 : 상수 num에 차례대로 10, 20, 30, 40, 50, 60, 70, 80, 90을 배열로 넣습니다.
3줄 : for문에 변수i의 초기값을 0, num배열의 길이보다 작을 때, 실행 후 i에 1증가하는 for문입니다.
4줄 : docuemnt.write()를 이용해 조건이 맞다면 num[i]를 출력하고 "
"태그로 한줄 엔터하세요
8줄 : num배열의 값을 forEach()로 값을 각각 불러와 매개변수 x에 값을 넣습니다.
9줄 : document.write()를 이용해 가져온 x값을 출력하고 "<br>"태그로 줄을 바꿔줍니다.
12줄 : num배열의 값을 forEach()로 값을 각각 불러와 매개변수 x에 값을 넣고, 그 값의 인덱스를 매개변수 y에 넣습니다.
13줄 : document.write()를 이용해 인덱스값이 y값을 출력하고, num[y]를 넣어 num배열의 해당 인덱스 값이 나오도록 출력합니다. 그리고 "<br>"태그로 줄을 바꿔줍니다.
17줄 : for of()를 이용해 상수 x에 num의 값을 넣습니다.
18줄 : document.write()를 이용해 num값을 가져온 x를 출력하고, "<br>"태그로 줄을 바꿔줍니다.
22줄 : for in()을 이용해 상수 x에 num의 인덱스 값을 가져옵니다.
23줄 : document.write()를 이용해 num값을 가져온 인덱스값 y를 이용해 num[y]를 출력하고, "<br>"태그로 줄을 바꿔줍니다.

결과 확인하기

09. break문

break문을 이용해 반복문 루프를 멈추는 예제입니다.

{
    for(let i=1; i<=10; i++){          
        if( i==5 ){
            break;
        }
        document.write(i);
    }
}

2줄 : for문을 이용해 변수 i의 초기값 1, i의 크기가 10보다 작거나 같을때 까지, 실행 후 i를 1 증가시키는 반복문을 만듭니다.
3줄 : if문을 이용해 i의 값이 5라면,
4줄 : break문을 이용해 루프를 중단합니다.
6줄 : document.write()를 이용해 i의 값을 화면에 출력합니다.

결과 확인하기

10. countinue문

countinue문을 이용하면 나오는 결과를 알아봅니다.

{
    for(let i=1; i<=10; i++){       
        if( i==5 ){ // 건너뛰고 6부터 다시나옴
            continue;
        }
        document.write(i);
    }
}

2줄 : for문을 이용해 변수 i의 초기값 1, i의 크기가 10보다 작거나 같을때 까지, 실행 후 i를 1 증가시키는 반복문을 만듭니다.
3줄 : if문을 이용해 i의 값이 5라면,
4줄 : continue문을 이용해 i값이 5라면 값을 출력하지 않고 바로 다음 반복문으로 넘어갑니다.
6줄 : document.write()를 이용해 i의 값을 화면에 출력합니다.

결과 확인하기