자바스크립트 데이터 제어하기를 알아보자 !!

- Frederick Philips Brooks
Mythical Man-Month 저자

728x90

01. if문

02. if문 생략

03. 삼항 연산자

04. 다중 if

05. 중첩 if

06. switch문

07. while문

08. do while문

09. for문

10. 중첩 for문

11. break문

12. continue문

-------------------------------------------------------------------------------------------------------------

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>");
    
    //1-100R까지 출력
    
    //배열 순서 출력

    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>");
    
    //1,2,3,4,5,6,7,8,9,

    // 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>");
        }
    }
    
    //짝수는 빨간색 홀수는 파랑색으로 표시됨
}

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)
    }
}

//123456789


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

//123456789101112

12.continue문

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

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

//1,2,3,4,5,6,7,8,9,11,12,13,14,15,16,17,18,19

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

//1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19

june blog