01. if문

특정 조건 만족 시(참인 경우) 실행하는 명령의 집합 이며, 어떤 작업을 수행하고 싶을 때 사용하는 것이 조건문이다.

{
    // false :0, null, undefined, false, 빈문자열("")
    // ture : 1, "0", "1", "ABC" ,배열[], 객체{}, ture
    if(조건식){
        document.write("실행되었습니다. (ture)");
    } else {
        document.write("실행되었습니다.(false)");
    }
}
결과확인하기
// false :0, null, undefined, false, 빈문자열(" ")
// ture : 1, "0", "1", "ABC" ,배열[], 객체{}, ture

02. if문 생략

한줄로 if문을 쓰는 방법이다.

{
    const num = 100;
    if(num) document.write("실행 되었습니다. (ture)");
    else document.write("실행되었습니다.(false)");
}
결과확인하기
실행되었습니다.(ture)

03. 삼항 연산자

if문 삼항 연산자(ternary operator)는 조건문을 간결하게 표현할 수 있는 방법 중 하나입니다. 일반적으로 if문과 else문을 사용하여 조건을 검사하고 실행할 코드를 지정하는 것과 유사한 역할을 합니다.

{
    const num = 100;
    //효율적으로 쓴다 만약 조건이 참이면 참만 메모리가 읽음
    (num == 100) ? document.write("ture") : document.write("false");
}
결과확인하기
ture

04. 다중 if 문

다중 if문이란, 여러 개의 조건을 검사하기 위해 if문을 연속적으로 사용하는 것을 의미합니다. 다중 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("실행되었습니다.s");
    }
}
결과확인하기
실행되었습니다.(num == 100)

05. 중첩 if문

중첩 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)");
}
결과확인하기
실행되었습니다.(1)실행되었습니다.(2)실행되었습니다.(3)

06. swtich문

주어진 변수나 표현식의 값에 따라 실행되는 코드 블록을 결정합니다. switch문의 기본 구조는 다음과 같습니다.

{
    const num =100;
    
    switch(num){
        case 90:
            document.write("실행90");
            break;
        case 80:
            document.write("실행80");
            break;
        case 70:
            document.write("실행70");
            break;
        case 60:
            document.write("실행60");
            break;
        case 50:
            document.write("실행50");
            break;
        default:
            document.write("0");
    }
}
결과확인하기
0

07. while문

특정 조건이 참일 때 반복 실행되는 제어 구문입니다.

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

    let num =0;
    while(num<5){
        document.write(num);
        num++
    }
}
결과확인하기
01234

08. do while문

while문과 비슷하지만, 조건을 먼저 검사하지 않고 먼저 실행되는 차이가 있습니다.

 {
    let num2 =0;

    do{
        document.write(num2);
        num2++;
    } while (num2<5);
}
결과확인하기
01234

09. for문

자바스크립트에서 가장 많이 사용하는 반복문은 for문 입니다. for 문은 조건에 들어가는 값이 일정하게 커지면서 명령을 반복 실행할 때 편리합니다. for문에서는 몇번 반복했는지 기록하기 위해 카운터를 사용하고 for문의 첫 번째 항에서 카운터 변수를 지정합니다. for문은 공부할 때 실행 순서가 헷갈리기 쉽습니다. 그러므로 초깃값은 처음에 한번만 할당하고 조건 체크와 명령 실행, 증가식을 계속 반복한다고 생각하시면 됩니다.

{
    //1부터100까지 출력

    for(let i=1; i<=100; i++){
        document.write(i);
    }
    document.write("<br>");
    
    //배열 순서 출력

    const arr = [1,2,3,4,5,6,7,8,9]

    for(let i=0; i<arr.length; i++){
        document.write(arr[i]);
    }
    document.write("<br>");

    // 짝수

    for(let i=1; i<arr.length; i+=2){
        document.write(arr[i]);
    }
    document.write("<br>");

    // 홀수

    for(let i=0; i<arr.length; i+=2){
        document.write(arr[i]);
    }
    document.write("<br>");

    // if 짝수 홀수

    for(let i=1; i<arr.length; i++){
        if(i % 2 == 0){
            document.write("<span style= 'color:red'>"+ i +"</span>");
        } else {
            document.write("<span style= 'color:blue'>"+ i +"</span>");
        }
    }
}
결과확인하기
1~100
1,2,3,4,5,6,7,8,9
2,4,6,8
1,3,5,7,9
1,2,3,4,5,6,7,8,9 (짝수 빨간색 홀수 파란색)

10. 중첩for문

중첩 for문은 for문 안에 또 다른 for문을 넣어서 사용하는 것을 말합니다.

{
    let table = "<table border='1'>";
    let count =0;

    for(let i=1; i<=5; i++){
        table  += "<tr>";
        for(let j=1; j<=5; j++){
            count++;
            if(count % 2 == 0){
                table += "<td style='color: red'>" + count+ "</td>";
            } else {
                table += "<td style='color: blue'>" + count+ "</td>";
            }

        }
        table += "</tr>";
    }

    table += "</table>";
}
결과확인하기
5*5 테이블이 만들어 집니다.
짝수는 빨간색 홀수는 파란색으로 적용됩니다.

11. break문

break문은 조건에 만족하면 거기서 멈추는 문입니다.

{
    for(let i=1; i<20; i++){
        if( i ==10){
            break;
        }
        document.write(i)
    }
}
{
    for(let i=1; i<20; i++){
        document.write(i)
        if( i ==10){
            break;
        }
    }
}
결과확인하기
123456789
12345678910

12.continue문

현재 또는 레이블이 지정된 루프의 현재 반복에서 명령문의 실행을 종료하고 반복문의 처음으로 돌아가여 루프문의 다음 코드를 실행합니다.

{
    for(let i=1; i<20; i++){
        if( i ==10){
            continue;
        }
        document.write(i)
    }
}
{
    for(let i=1; i<20; i++){
        document.write(i)
        if( i ==10){
            continue;
        }
    }
}
결과확인하기
123456789111213141516171819
12345678910111213141516171819