01. if문

문자열과 숫자는 True가 나온다. 배열과 객체도 True가 나온다. 0만 예외이다.

{
    if(조건식){
        document.write("실행되었습니다.(true)");
    } else {
        document.write("실행되었습니다.(flase)");
}
결과 확인하기
조건식에 들어가는 것에 따른 결과값
false : 0, null, undefined, flase, ""(빈문자열)
true : 1, 2, "0", "1", "ABC", [](배열), {}(객체), true

02. if문 생략

100은 숫자이기 때문에 true로 출력이 된다.

{
        const num = 100;

        // 정석문법
        // if(num){
        //     document.write("실행되었습니다.(true)");
        // } else {
        //     document.write("실행되었습니다.(flase)");
        // }

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

03. 삼항 연산자

조건문을 간결하게 표현하는 연산자. 삼항 연산자는 "if-else"문을 한 줄로 간결하게 표현이 가능하다.

 * 원본
{
    const num = 100;

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

* 삼항 연산자 사용
(num == 100) ? document.write("true") : document.write("flase");
결과 확인하기
true
원본과 삼항 연산자의 결과값은 같다.

삼항 연산자의 기본문법

조건식 ? true일 때 실행 명령어 : flase 일때 실행 명령어

04. 다중 if문 == switch문

다중 "if"문은 하나 이상의 조건식을 체크하여 각각에 맞는 코드를 실행하는 제어문이다. 각 조건식은 순서대로 평가되며, 첫 번재로 tre인 조건식에 해당하는 코드만 실행 된다. 어떤 조건식도 true가 아니면 실행할 코드가 없다.

// if(num === 90){} // 90이라는 것이 숫자인지 문자인지 확인하고 싶다면 =을 세 개 쓰면된다.
{
    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) ? document.write("true") : document.write("flase");
결과 확인하기
//const num = 100;일때 ( 90 110 120 마찬가지) 실행되었습니다.(num == 100)

05. 중첩 if문

중첩 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문과 비슷하고 다중 if문으로 변경이 가능합니다.
조건에 맞은 상태에서 break 키워드를 사용하면 실행문은 종료가 되고 break 키워드를 쓰지 않으면 무한으로 빠지게 됩니다.

{
    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

다중 if문으로 변경 시

{
    const num = 100;

    if(num == 90){
        document.write("실행90");
    } else if(num == 80){
        document.wrtie("실행80");
    } else if(num == 70){
        document.wrtie("실행70");
    } else if(num == 60){
        document.wrtie("실행60");
    } else if(num == 50){
        document.wrtie("실행50");
    } else {
        document.write("0");
    };
}

07. while문

for문이 정해진 회수만큼 반복했다면, while문은 조건식이 true일 경우에 계속해서 반복합니다.
for문과 비슷하며 for문으로 변경이 가능합니다. 조건식이 false가 되면 반복 행위를 멈추고 while문을 종료합니다.

{
    let num = 0;
    while(num<5){    // 조건에 맞지 않으면 한번도 실행 안될 수 있습니다.
        document.write(num);
        num++;          // 증가값 입력
    };
}
결과 확인하기
01234

while문의 실행 흐름

1. 조건을 확인합니다.
2. true일 경우 실행문을 실행합니다.
3. 다시 조건을 확인합니다. 조건이 참이면 다시 코드를 실행하며 조건이 거짓이면 while문을 종료합니다.
4. 종료되면 while문 다음에 오는 코드를 실행합니다. * 조건식과 실행문이 반복의 영역입니다.

for문과 while문의 차이점

for문을 사용하는 경우 : 반복 횟수가 정해진 경우 & 배열과 함께 주로 많이 사용
whilde문을 사용하는 경우 : 무한 루프나 특정 조건에 만족할 때까지 반복해야하는 경우 &주로 파일을 읽고 쓰기에 많이 사용

08. Do while문

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

{
    let num2 = 0;
    do {            // 조건에 맞지 않아도 한번은 실행됩니다.
        document.write(num2);
        num2++;
    } while(num2<5);
}
결과 확인하기
01234

do while문의 실행 흐름

1. 실행문을 먼저 실행합니다.
2. 조건식을 확인합니다.
3. 조건식이 참일 경우 실행문으로 돌아가며 거짓일 경우 종료됩니다.

09. for문

for문과 if문을 사용해서 배열에 있는 값 1부터 9까지 짝수 : 빨간색, 홀수 : 파란색을 실행하는 예제입니다.

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

    for(let i=1; i<=arr.length; i++){
        if(i % 2 ==0){
            document.write("" + i + "");
        } else {
            document.write(`${i}`);
        }
    }
}
결과 확인하기

10. 중첩 for문

중첩 for문을 이용해서 표 만들기 예제입니다.

{
    let table = "<table border = '1'>";
        for(let i=1; i<=5; i++){
            table += "<tr>";
            
            for(let j=1; j<=5; j++){
                table += "<td>" + j + "</td>";
            }
        }
            table += "</tr>";
        table+="</table>";
    document.write(table);
}
결과 확인하기

11. break문

'특별한 조건을 만나면 반복을 끝내라' 라는 명령입니다.
break문은 주로 for문, while문, do-while문과 같은 반복문에서 사용되고 반복문 내에서 break문이 실행되면, 반복문은 즉시 종료됩니다. break 문은 반복문에서 break 문이 있는 현재 위치를 감싸고있는 반복문을 빠져나가기위해 사용합니다.

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

break문 실행문 위치


위치에 따라서 값이 달라지므로 주의가 필요합니다. 조건식보다 실행문이 먼저 나오게 된다면 실행을 먼저하고 그 다음에 조건식이 인식됩니다.

12. continue문

continue문은 반복을 끝내지 않습니다. for문이나 while문의 {}안에서 continue 문장을 만난 순간 continue문 아래에 있는 실행해야 하는 문장들을 건너 뛰고, 다음 반복을 시작합니다.

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