Javascript 데이터 제어의 모든 것

Javascript 데이터 제어

if 문

if(0){
	document.write("실행true")
} else {
	document.write("실행False")
}

 if문의 기본 형식입니다.

Tip !

조건문에 False가 나오는 값 : 0, null, undefined, false, ""(빈문자열) 이 다섯가지만 false가 출력됩니다.

 

if문 생략

const num = 100;
if(num == 100){
    document.write("실행되었습니다.(True)");
} else {
    document.write("실행되었습니다.(False)")
} 
if(num) document.write("실행되었습니다.(True)");
else document.write("실행되었습니다.(False)");

위의 if문은 아래의 if문 처럼 생략해서 적을 수 있습니다.

 

삼항 연산자

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

if문을 삼항으로 나누어 적을 수 있습니다.

(조건) ? true의 실행값 : false의 실행값; 으로 적을 수 있습니다.

위의 if문은 컴퓨터에서 인식할 때, else의 값까지 모두 읽는 반면 아래의 if문은 true의 값이면 뒤 false의 실행문을 읽지 않기 때문에 훨씬 효율적입니다.

 

다중 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문에 else 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)");
}

if문 안에 if문을 넣어줄 수 있는데, 모든 조건에 대해 true여야 출력이 가능합니다.

 

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

조건에 case를 만들어서 case값에 대해 만족하면 그 결과를 출력할 수 있습니다.

사이사이에 break를 넣어주어 만족하는 결과값을 출력하면 다른 case를 조사하지 않고 실행을 마쳐야합니다.

 

while문

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

위 for 반복문을 while문을 사용하여서도 사용할 수 있습니다.

 

do while문

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

위의 while문을 do while문으로도 사용 가능합니다.

 

for문

for(let i=1; i<=100; i++){
    document.write(i);
}
const arr = [1,2,3,4,5,6,7,8,9,10];
for(let i=0; i<arr.length; i++){
    document.write(arr[i]);
}
for(let i=1; i<arr.length; i+=2){
    document.write(arr[i]);
}
for(let i=0; i<arr.length; i++){
    if(arr[i] % 2 == 0){
        document.write(arr[i]);
}

for문을 사용하여 여러번 작업해주어야 하는 곳에 반복실행을 할 수 있습니다.

for(let 초기값; 조건; 증감식)의 순서로 적습니다.

Tip !

첫 번째 순서부터

• 1~100까지 숫자 출력
• 배열 안의 원소 모두 출력
• 배열 안의 짝수만 출력 (증감식 사용)
• 배열 안의 짝수만 출력 (if문 사용)

예시에서는 모두 변수 i를 사용하였지만, 블록 설정을 하지 않고 사용하려면 각각 다른 변수를 적어주어야 합니다.

 

중첩 for문

let table = "<table border=1>";
let count = 1;
for(let i=1; i<=5; i++){
    table += "<tr>"
    for(let j=1; j<=5; j++){
        if(count % 2 == 0){
            table += "<td style='color:red'>" + count + "</td>"
        } else {
            table += "<td style='color:blue'>" + count + "</td>"
        }
        count++
    }
    table += "</tr>"
    }
table += "</table>";
document.write(table);

for문 안에 for문을 넣어 반복에 대한 반복을 설정할 수 있습니다.

위 예시의 테이블이 있는데 다섯번의 <tr>태그 각각마다 다섯번의 <td>태그 반복문을 넣어주었습니다.

Tip !

for문 안에 if문을 넣어 짝수와 홀수를 구분지어 각각 다른 스타일태그를 넣어주었습니다.

 

break문, continue문

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

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

break문은 반복문 안에 조건문을 넣어 조건을 만족하는 경우 반복실행을 멈추어줍니다.

continue문은 반복문 안에 조건문을 넣어 조건을 만족하는 경우 그 결과값을 건너뛰고 진행합니다.

Tip !

break, continue문은 그 위치에 따라 결과값이 달라지므로 잘 보고 적으셔야 합니다.