01. if문
조건문은 프로그래밍에서 가장 기본적인 구문 중 하나입니다. 조건문을 사용하면 프로그램이 특정 조건에 따라서 다른 동작을 하도록 할 수 있습니다.
{
// true : 1, 2, "0", "1", "ABC", [], {}, true ..... flase를 제외한 나머지
// false : 0, null, undefined, false, ""(빈문자열)
if(조건식){
document.write("실행되었습니다.(true)"); // 참 실행
} else {
document.write("실행되었습니다.(false)"); // 거짓 실행
};
}
결과 확인하기
false : 0, null, undefined, false, ""(빈문자열)
✍️ if문 작성 방식
if(조건식){//참 실행} else if{//참 실행} else {//거짓 실행}
02. if문 생략
if문이나 else 문에서 명령이 한줄이면 중괄호{ }를 생략해서 좀 더 간단하게 작성할 수 있습니다.
ex) if(조건식){.....} else {.....} → if(조건식)..... else .....
{
const num = 100;
// if(num){
// document.write("실행되었습니다.(true)");
// } else {
// document.write("실행되었습니다(false)");
// };
if(num) document.write("실행되었습니다.(true)");
else document.write("실행되었습니다(false)");
}
결과 확인하기
✍️ if문 조건식에 따른 결과 값
num 값이 숫자, 문자, 배열, 객체, true 이면 실행되었습니다.(true)
num 값이 0, null, undefined, false, ""(빈문자열) 이면 실행되었습니다.(false)
03. 삼항 연산자(조건 연산자)
삼항 연산자는 else if문 대신에 간단한 조건식을 사용할 수 있게 해줍니다.
이 연산자는 조건이 참(true)인 경우에는 처음에 나오는 값(참)을 반환하고, 거짓(false)인 경우에는 두 번째 값(거짓)을 반환합니다.
기존 if문보다 더 효율적으로 사용이 가능합니다.
{
const num = 100;
// if(num == 100){
// document.write("true");
// } else {
// document.write("false");
// };
(num == 100) ? document.write("true") : document.write("false");
}
결과 확인하기
✍️ 삼항 연산자(조건 연산자) 입력 방식
(조건) ? true일 때 실행할 명령 : false일 때 실행할 명령
04. 다중 if(else if문)
if문 이후에 여러 개의 조건을 검사해야 할 경우 else if문을 사용할 수 있습니다.
여러 개의 조건 중 하나가 참(true)인 경우 해당하는 값을 실행하고 전체 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("실행되었습니다.");
};
}
결과 확인하기
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)");
};
}
결과 확인하기
✍️ 중첩 if문 예시
if (조건식1) {
if (조건식2) {
// 조건식1과 조건식2가 모두 true일 경우 실행될 코드;
} else {
// 조건식1은 true이지만 조건식2는 false인 경우 실행될 코드;
} ;
} else {
// 조건식1이 flase인 경우 실행될 코드;
}
위 코드에서는 먼저 조건식1이 검사되고, 조건식1이 true일 경우에만 내부의 if문이 실행됩니다.
이 내부의 if문 역시 조건식2를 검사하고, 조건식2가 true일 경우에만 내부의 코드 블록이 실행됩니다.
false일 경우에는 else 블록이 실행됩니다.
06. switch문
다중 if문과 비슷하며 다중 if문으로 변경이 가능합니다.
조건에 맞으면 break 키워드에 맞으면 그 실행문에서 끝납니다.
break 키워드를 안쓰게 되면 무한으로 빠지면서 모든 case 키워드를 실행합니다.
defalut 키워드는 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");
};
}
결과 확인하기
✍️ 다중 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문
while문은 조건이 참인 동안 반복적으로 코드를 실행하는 루프를 생성합니다.
for문과 비슷하며 for문으로 변경이 가능합니다.
조건식에 맞지 않으면 한번도 실행 안될 수 있습니다. 또한 무한으로 빠질 수 있습니다.
{
let num = 0;
while(num<5){ // 조건에 맞지 않으면 한번도 실행 안될 수 있습니다.
document.write(num);
num++; // 증가값 입력
};
}
결과 확인하기
✍️ while문 동작 순서
1. 조건을 평가합니다.
2. 조건이 참이면 코드 블록을 실행합니다.
3. 다시 조건을 평가합니다. 조건이 참이면 다시 코드 블록을 실행합니다. 조건이 거짓이면 while문을 종료합니다.
4. 종료되면 while문 다음에 오는 코드를 실행합니다.
08. do while문
do-while문은 조건식을 마지막에 평가하는 반복문입니다.
do-while문은 코드 블록이 최소한 한 번은 실행되어야 할 때 유용합니다.
do-while문은 일반적으로 조건이 참이거나 거짓일 때 반복문을 실행해야 할 경우에 사용됩니다.
while문과 달리, 먼저 코드 블록을 실행한 다음에 조건식을 검사하여 조건이 참이면 코드 블록을 다시 실행하고, 조건이 거짓이면 반복문을 종료합니다.
{
let num2 = 0;
do { // 조건에 맞지 않아도 한번은 실행됩니다.
document.write(num2);
num2++;
} while(num2<5);
}
결과 확인하기
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("<span style='color:red'>" + i + "</span>");
} else {
document.write(`<span style='color:blue'>${i}</span>`);
};
};
}
결과 확인하기
for문 : 배열 안에 있는 숫자 나열하고 합 구하기
{
let num = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let sum = 0;
for(let i=0; i<num.length; i++){
document.write(num[i]);
sum += num[i];
}
document.write(sum);
}
1,2,3,4,5,6,7,8,9,
45
10. 중첩 for문
중첩 for문을 이용해서 테이블 1~25의 숫자가 나오고 칸 만들기 예제입니다.
{
let table = "<table border='1'>";
let count = 0;
for(let i=0; i<5; i++){
table += "<tr>";
for(let j=0; j<5; j++){
count++;
table += "<td>" + count + "</td>";
};
table += "</tr>";
};
table += "</table>";
document.write(table);
}
결과 확인하기
11. break문
코드 실행 중 break문을 만나게 되면 현재 실행문을 중지시키고 다음 실행문으로 넘어가게 합니다.
break문은 반복문이나 switch문을 종료할 때 사용됩니다.
break문은 주로 for문, while문, do-while문과 같은 반복문에서 사용됩니다. 반복문 내에서 break문이 실행되면, 반복문은 즉시 종료됩니다.
switch문에서 break문을 사용하면, switch문에서 해당 case의 실행이 끝난 후, switch문을 즉시 종료합니다.
{
for(let i=1; i<20; i++){
if(i == 10){
break;
}
document.write(i);
}
}
결과 확인하기
✍️ break문 실행문 위치에 따라 결과 값이 다르다.
{
for(let i=1; i<20; i++){
document.write(i);
if(i == 10){
break;
}
}
}
결과 // 12345678910
조건식보다 실행문이 먼저 나오게 되면 먼저 실행하고 그 다음 조건식이 인식됩니다.
12. continue문
continue문은 반복문 내에서 사용되며, 현재 반복에서 남은 코드를 실행하지 않고 다음 반복으로 건너뛰는 역할을 합니다.
continue문은 보통 for문, while문 등과 함께 사용됩니다.
continue문은 반복문 내에서 조건문과 함께 사용하여 특정 조건을 만족하는 경우에만 현재 반복을 건너뛰도록 할 수도 있습니다.
이를 통해 반복문 실행 중 특정 조건에 따라 일부 작업을 생략하고 다음 작업으로 이어나갈 수 있습니다.
{
for(let i=1; i<20; i++){
if(i == 10){
continue;
}
document.write(i);
}
}
결과 확인하기
✍️ continue문 실행문 위치에 따라 결과 값이 다르다.
{
for(let i=1; i<20; i++){
document.write(i);
if(i == 10){
continue;
}
}
}
결과 // 12345678910111213141516171819
조건식보다 실행문이 먼저 나오게 되면 먼저 실행하고 그 다음 조건식이 인식됩니다.