Lumpy Space Princess - Adventure Time

JAVASCRIPT

데이터 제어하기를 정리해보자

jongyung 2023. 2. 28. 19:09

“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”

- Frederick Philips Brooks
Mythical Man-Month 저자
728x90

01. if문

if 문은 주어진 조건이 참(true)이면 특정 코드 블록을 실행하고,

조건이 거짓(false)이면 실행하지 않습니다.

	// false : 0, null, undefined, false, ""(빈 문자열)
	// true : 1, 2, "0", "1", "abc", [ ], { }, true
if(조건식) {
    document.write("실행되었습니다.(true)");
} else {
    document.write("실행되었습니다.(false)");
}
    // 실행되었습니다.(true) 나
    // 실행되었습니다.(false)의 결과가 나온다.

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) 나
    // 실행되었습니다.(false)의 결과가 나온다.

03. 삼항 연산자

삼항 연산자는 if문을 간단하게 표현할 수 있어서 코드를 더욱 간결하게 만들어 줍니다.

const num = 100;

if(num == 100) {
    document.write("true");
} else {
    document.write("false");
}
    // true 가 나온다.
    // 위와 같은 식으로, 좀 더 간략하게 쓸 수 있다.
    // 좀 더 효율적이다.
(num == 100) ? document.write("true"): document.write("false");
    // true 가 나온다.

04. 중첩 if(else 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("실행되었습니다")
}
if(num === 90) { }   // 숫자, 문자, 함수, 객체 등의 구분을 할 수 있다.
    // 결과로는, 실행되었습니다(num == 100)이 나온다.

05. 다중 if문

if문 안에 다시 if문이 있는 구조입니다.

 

첫 번 째 조건이 참이면 첫 번 째 if문 안의 코드가 실행됩니다.

만약 첫 번 째 조건이 거짓이고 두 번 째 조건이 참이면 두 번 째 if문 안의 코드가 실행됩니다.

마지막으로 모든 조건이 거짓이면 else문 안의 코드가 실행됩니다.

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)")
}   // if가 true이면 값이 출력되고, else가 false이면 값이 출력된다.
    // 결과로는 실행되었습니다.(1)실행되었습니다.(2)실행되었습니다.(3)이 나온다.

06. switch문

조건식을 두고 조건의 진위 여부에 따라 동작을 수행하는 if문과는 다르게 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문

while문은 조건문이 참일 때 실행되는 반복문입니다. 

조건은 문장 안이 실행되기 전에 참/거짓을 판단합니다.

let num = 0; //초깃값
while(num<5){   //조건식
    document.write(num);
    num++;  //증감식
}
    // 0,1,2,3,4

08. do while문

do while문은 테스트 조건이 거짓으로 평가될 때까지 지정된 구문을 실행하는 루프를 만듭니다.

단, 구문이 실행된 뒤에 테스트 조건이 평가됨으로 구문은 무조건 한 번은 실행됩니다.

let num2 = 0;
do {
    document.write(num2);
    num2++;
} while(num2<5);
    // 0,1,2,3,4

09. for문

for문은 괄호로 감싸고 세미콜론으로 구분한 세 개의 선택식과 반복을 수행할 문(주로 블록문)으로 이루어져 있습니다.

for(let i =1; i<=100; i++) {
    document.write(i, "<br>");
}   // 1~100

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

for(let i=0; i&lt;arr.length; i++) {
    document.write(arr[i]);
}   // 1~9

for(let i=1; i&lt;arr.length; i+=2) {
    document.write(arr[i]);
}   // 2468 (짝수)

for(let i=0; i&lt;arr.length; i+=2) {
    document.write(arr[i]);
}   // 13579 (홀수)

const arr = [1,2,3,4,5,6,7,8,9]
    
for(let i=1; i&lt;=arr.length; i++) {
    if(i % 2 == 0) {
        document.write("<span style='color:red'>;"+i+"</span>"); // (빨간색)2468 
    } else {
        document.write(`<span style='color:blue'>${i}</span>`); // (파란색)13579
    }
}   // 결과로는, 1부터 9까지의 값이 홀수는 파란색, 짝수는 빨간색으로 출력된다.

10. 중첩 for문

중첩 반복문은 반복문 안에 반복문이 포함되어 있는 형태를 말합니다.

for(let i =1; i<=10; i++){
    document.write(i, "<br>;");
    for(let j=1; j<=10; j++){
        document.write(j);
    }
}
    // 1
    // 123456789102
    // 123456789103
    // 123456789104
    // 123456789105
    // 123456789106
    // 123456789107
    // 123456789108
    // 123456789109
    // 1234567891010
    // 12345678910

11. break문

break문은 현재 반복문, swtich문, 또는 label문을 종료하고, 그 다음 문으로 프로그램 제어를 넘깁니다.

for(let i =1; i<20; i++){
    if(i == 10){
        break;
    }
    document.write(i);  // 위치에 따라서 값이 다르게 나오기 때문에 위치 중요!
}
document.write("<br>)  //10까지 10을 뺀 값이 나온다.
    // 1,2,3,4~9

12. continue문

continue문은 현재 또는 레이블이 지정된 루프의 현재 반복에서 명령문의 실행을 종료하고

반복문의 처음으로 돌아가여 루프문의 다음 코드를 실행합니다.

for(let i =1; i<20; i++){
    if(i == 10){
        continue;
    }
    document.write(i);  //20까지 10을 뺀 값이 나온다.
}
    // 1,2,3,4~9,11,12,13,14~20