01. if문

if문은 가장 기본적인 조건문입니다.
조건이 참일 경우 실행할 코드를 작성합니다.

{
    if(0){
        document.write("실행되었습니다. (true)");
    } else {
        document.write("실행되었습니다. (false)");
    }
}
결과 확인하기
값이 숫자, 문자열, 배열, 객체, true일 경우: 실행되었습니다.(true)
값이 0, null, undefined, flase, ""(빈 문자열)일 경우: 실행되었습니다.(flase)

if문 작성법

if(조건식){//true 실행}else if{//flase 실행}

02. if문 생략

if문은 가장 기본적인 조건문입니다.
중괄호를 생략하여 간단하게 쓸 수 있습니다.
주석처리 부분을 밑의 방법으로 생략 가능합니다.

{
    const num = 100;

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

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

03. 삼항 연산자

if문은 가장 기본적인 조건문입니다.
소스가 복잡할 경우 기본 if문보다 삼항 연산자를 통해 효율적으로 쓸 수 있습니다.
조건이 true일 경우 처음 나오는 값을 출력하고, false일 경우에는 그 다음 값을 출력합니다.

{
    const num = 100;

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

    (num == 100) ? document.write("true") : document.write("false")
}
결과 확인하기
true

삼항 연산자 작성법

(조건문) ? true실행문 : false실행문

04. 다중if문

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("실행되었습니다");
    }
}
결과 확인하기
실행되었습니다.(num == 100)

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. switch문

복수의 if 조건문은 switch문으로 바꿀 수 있습니다.
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");
    }
    
    // 조건에 맞는 값이 있으면 break를 써서 끝냅니다.
}
결과 확인하기
0

조건에 맞는 값이 있으면 break를 써서 끝냅니다. break를 쓰지 않을 시 case를 실행하면서 무한에 빠집니다.

07. while문

while 문은 소스 코드를 입력한 배열 혹은 객체의 속성에 맞게 반복하여 실행하는 역할을 합니다.
for문과 같은 반복문이지만 표현 방식이 다릅니다.(for문으로 변경 가능)

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

    // 기존의 for문을 사용

    let num = 0;             
    while(num<5){           
        document.write(num);
        num++;              
    }

    // while문을 사용
}
결과 확인하기
01234 01234

08. do while문

조건에 따라 반복을 계속할지를 결정할 때 사용하는 것은 while 문과 동일합니다.
다만, 무조건 중괄호 {} 블럭을 한번 실행하고, 조건을 검사하여 반복을 결정합니다.

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

09. for문

for문은 같은 동작을 쉽게 반복하는 반복문입니다.
for문은 반복횟수를 정확히 알고있을 때 주로 쓰입니다.
for문을 활용한 다양한 예제들입니다.

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

    // 1부터 100까지 출력하는 예제
}
결과 확인하기
12345678910

10. 중첩for문

중첩for문은 for문을 여러 번 쓸 수 있습니다.
중첩 for문을 이용한 25칸 테이블 만들기 예제입니다.

{
    let table = "<table border='1'>";
    let num = 1;
        
    for(let i=1; i<=5; i++){
        table += "<tr>";
        for(let j=1; j<=5; j++){
            table += "<td>"+num+"</td>";
            num++;
        }        
        table += "</tr>";
    }

    table += "</table>";

    document.write(table);
}
결과 확인하기

11. break문

반복문 안에서 위와 같은 break 문을 만나면 실행의 흐름은 반복문을 빠져나가서 반복문 다음으로 이동하게 됩니다.

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

document.write(i)의 위치에 따라 출력되는 값이 달라집니다.

12. continue문

continue가 실행되면 continue문 아래의 코드를 실행하지 않고 건너뛰고 반복문의 처음으로 돌아가서 다음 반복을 시작합니다.

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

document.write(i)의 위치에 따라 출력되는 값이 달라집니다.