자바스크립트 : 데이터 제어하기

01. if문

제어문이란 프로그램에서 필요한 결과값을 도출하기 위해 실행문의 순서를 제어하거나 반복시키는 문장을 말합니다.

//false, 0, undefined, null, ""
//true, 1, "0", "1", 0<10, [], {}

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

결과 보기

02. if문 생략

if(조건식) 다음의 { } 를 생략할 수 있다.
하지만, 생략할 경우 if문에 포함되는 실행문은 단 한 줄만 포함된다.

const num = 100;
if (num) document.write("실행되었습니다.(true)");
else document.write("실행되었습니다.(farse)");

결과 보기

03. 다중 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==값이없음");
}

결과 보기

04. 중첩 if문

조건문 안에 조건문이 있는것을 중첩if라고 합니다,
바깥쪽에 있는 조건1을 만족해야 조건2로 넘어갑니다.

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

결과 보기

05. 조건부 연산자(삼항 연산자)

조건부 연산자는 소스가 크게 되면 효율적이다

const num = 100;
//num값이 100이면 true출력하고 아니면 false출력하세요

if (num == 100) {
    document.write("true");
} else {
    document.write("false");
}
//조건부 연산자는 소스가 크게 되면 효율적이다
(num == 100) ? document.write("true") : document.write("false");

결과 보기

06. switch문

복수의 if 조건문은 switch문으로 바꿀 수 있습니다.
switch문을 사용한 비교법은 특정 변수를 다양한 상황에서 비교할 수 있게 해줍니다.
코드 자체가 비교 상황을 잘 설명한다는 장점도 있습니다.

//switch 문은 답이 정해져있다는 차이점이 있다.
    
const num = 100;

switch (num) {
    case 100:
        document.write("실행되었습니다.(num==100)");
        break;
    case 110:
        document.write("실행되었습니다.(num==110)");
        break;
    case 120:
        document.write("실행되었습니다.(num==120)");
        break;
    case 130:
        document.write("실행되었습니다.(num==130)");
        break;
    default:
        document.write("실행되었습니다.(num==값이없음)");
}

결과 보기

07. while문(반복문)

개발을 하다 보면 여러 동작을 반복해야 하는 경우가 종종 생깁니다.
상품 목록에서 상품을 차례대로 출력하거나 숫자를 1부터 10까지 하나씩 증가시키면서 동일한 코드를 반복 실행해야 하는 경우같이 말이죠.
반복문(loop) 을 사용하면 동일한 코드를 여러 번 반복할 수 있습니다.

let num = 1;

while (num <= 5) {
    document.write("실행되었습니다.");
    num++;
}

결과 보기

08. do while문(반복문)

do while 문법은 조건이 truthy 인지 아닌지에 상관없이, 본문을 최소한 한번이라도 실행하고 싶을 때만 사용해야 합니다.
대다수의 상황에선 do while보다 while이 적합합니다.

let num = 1;
//무조건 한번은 실행한다.
do {
    document.write("실행되었습니다2.");
    num++;
} while (num <= 5);

결과 보기

09. for문

for 반복문은 while 반복문보다는 복잡하지만 가장 많이 쓰이는 반복문입니다.

for (let i = 1; i < 10; i++) {
    document.write(i + ". 실행되었습니다.");
}

let num = [1, 2, 3, 4, 5, 6, 7, 8, 9];

for (let i = 0; i < num.length; i++) {
    document.write(i + ". 실행되었습니다.
");
}

결과 보기

10. 중첩 for문

중첩 반복문은 반복문 안에 새로운 반복문이 들어가 있는 것을 말한다.
중첩의 횟수도 제한이 없으며, 어떠한 반복문을 중첩하더라도 상관이 없다.

for (let i = 1; i <= 5; i++) {
    document.write(i + "바퀴---
");
    for (let j = 1; j <= 5; j++) {
        document.write(j + "실행
");
    }
}

결과 보기

11. break문

대개는 반복문의 조건이 falsy가 되면 반복문이 종료됩니다.
그런데 특별한 지시자인 break를 사용하면 언제든 원하는 때에 반복문을 빠져나올 수 있습니다.
아래 예시의 반복문은 사용자에게 일련의 숫자를 입력하도록 안내하고, 사용자가 아무런 값도 입력하지 않으면 반복문을 '종료’합니다.

//while 문을 이용해서 1~20까지 출력
let num = 1;
while (num < 21) {     //()안에 트루일 때 실행함
    document.write(num);
    num++;
}

//for 문을 이용해서 1~20까지 출력    
for (let i = 1; i < 21; i++) {
    document.write(i);
    if (i == 10) {
        break;          //10번에서 멈춘다
    }
}

결과 보기

12. continue문

continue 지시자는 break의 '가벼운 버전’입니다. continue는 전체 반복문을 멈추지 않습니다.
대신에 현재 실행 중인 이터레이션을 멈추고 반복문이 다음 이터레이션을 강제로 실행시키도록 합니다(조건을 통과할 때).
continue는 현재 반복을 종료시키고 다음 반복으로 넘어가고 싶을 때 사용할 수 있습니다.

//for 문을 이용해서 1~20까지 출력    
for (let i = 1; i < 21; i++) {
    if (i == 10) {      
        continue;       //10번만 빼고 출력
    }
    document.write(i);
}

결과 보기