01. if문
if문은 프로그래밍에서 조건을 검사하여, 해당 조건이 참(true)인 경우에만 특정 코드 블록을 실행시키는 제어 구조입니다.{
if("a") {
document.write("실행되었습니다.(true)")
} else {
document.write("실행되었습니다.(false)")
};
}
결과 확인하기
false : null, 0 , u nndefined , false , " "(빈문자열)
if(null) 구문에서 null은 거짓(false) 값으로 간주됩니다.
따라서 if문의 조건식이 거짓이므로 else 블록 안에 있는 document.write 문장이 실행됩니다.
02. if문 생략
변수는 데이터를 저장 할수도 있지만 변경도 가능 합니다.{
const num = 100;
// if(num){
// document.write("실행되었습니다.(true)");
// } else {
// document.write("실행되었습니다(false)");
// };
if(num) document.write("실행되었습니다.(true)");
else document.write("실행되었습니다(false)");
}
결과 확인하기
var대신 let을 사용했습니다.
let과 var는 데이터 저장은 물론, 데이터 변경이 가능합니다 보통, 변경해야할 데이터가 있을때 let을 사용하면 됩니다.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");
}
결과 확인하기
생략해서 사용할수있습니다.
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("실행되었습니다.");
};
}
결과 확인하기
변수 num의 값이 90이므로 첫 번째 조건인 if (num == 90)이 참이 되어 "실행되었습니다(num == 90)"가 출력됩니다.
다른 조건문은 실행되지 않습니다.
else if 문은 if 문과 함께 사용하여 여러 조건을 검사하고, 각 조건에 맞게 실행할 코드를 작성할 수 있습니다.
이 경우 if 문이 참이 아닐 때 해당 else if 조건문을 검사합니다.
만약 이전의 if 문이 참이라면 다음 조건은 검사되지 않고, 바로 실행문이 실행됩니다.
마지막 else는 모든 조건에 해당하지 않을 경우 실행되는 부분입니다.
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)");
};
}
결과 확인하기
코드를 간단히 설명하면, num 변수가 100인 경우에 대해 if 문을 사용하여 3개의 문자열을 출력하고,
그렇지 않은 경우에는 하나의 문자열을 출력합니다.
여기서 주목할 점은, if(num == 100) 문장이 3번 중첩되어 있다는 것입니다.
이렇게 중첩된 if 문은 코드의 가독성을 떨어뜨릴 수 있으므로, 필요한 경우에 한해서 사용해야 합니다.
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");
};
}
결과 확인하기
switch문의 조건식으로 사용될 수 있는 값은 다양한 타입의 데이터입니다.
switch문은 특정 값에 대한 여러 가지 경우(case)를 검사하고, 해당하는 경우에 실행할 코드 블록을 실행합니다.
07. while문
while문은 조건이 참인 동안 반복적으로 코드를 실행하는 루프를 생성합니다.
for문과 비슷하며 for문으로 변경이 가능합니다.
조건식에 맞지 않으면 한번도 실행 안될 수 있습니다. 또한 무한으로 빠질 수 있습니다.
{
let num = 0;
while(num<5){ // 조건에 맞지 않으면 한번도 실행 안될 수 있습니다.
document.write(num);
num++; // 증가값 입력
};
}
결과 확인하기
while문은 조건식이 참인 동안 반복하여 실행하는 반복문입니다
08. do while문
do-while문은 조건식을 마지막에 평가하는 반복문입니다.
do-while문은 코드 블록이 최소한 한 번은 실행되어야 할 때 유용합니다.
do-while문은 일반적으로 조건이 참이거나 거짓일 때 반복문을 실행해야 할 경우에 사용됩니다.
while문과 달리, 먼저 코드 블록을 실행한 다음에 조건식을 검사하여 조건이 참이면 코드 블록을 다시 실행하고, 조건이 거짓이면 반복문을 종료합니다.
{
let num2 = 0;
do { // 조건에 맞지 않아도 한번은 실행됩니다.
document.write(num2);
num2++;
} while(num2<5);
}
결과 확인하기
do-while문은 while문과 유사하지만, 조건식의 평가를 코드 블록 이후에 수행합니다
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>`);
};
};
}
결과 확인하기
123456789
45
i 변수는 1부터 시작하여 99까지 1씩 증가하면서 코드 블록을 반복 실행합니다.
document.write(i)는 현재 i값을 웹 페이지에 출력하는 코드입니다.
그 다음으로는 배열을 이용한 for문이 나옵니다.
num 변수는 1부터 9까지의 숫자가 들어있는 배열입니다.
이 배열을 for문으로 반복하면서 num 배열의 각 요소를 웹 페이지에 출력하고, sum 변수에 누적하여 더합니다.
마지막으로 document.write(sum)을 실행하여 sum 값을 출력하면 num 배열의 합계가 출력됩니다.
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);
}
결과 확인하기
123456789
45
위 코드에서는 바깥쪽 for문에서 i 변수는 1부터 시작하여 10까지 1씩 증가하면서 코드 블록을 반복 실행합니다.
이 때 document.write(i,"<br>") 코드는 i값을 웹 페이지에 출력하고 줄바꿈합니다.
안쪽 for문에서 j 변수는 1부터 시작하여 10까지 1씩 증가하면서 document.write(j) 코드를 반복 실행합니다.
이 때 j값을 웹 페이지에 출력합니다.
11. break문
break문은 프로그래밍에서 자주 사용되는 제어문 중 하나로, 반복문이나 switch문에서 사용하여 해당 반복문이나 switch문을 즉시 종료할 때 사용됩니다.{
for(let i=1; i<20; i++){
if(i == 10){
break;
}
document.write(i);
}
}
결과 확인하기
이를 통해 반복문 내에서 특정 조건을 만족하면 반복을 빠르게 종료할 수 있습니다.
12. continue문
continue문은 프로그래밍에서 자주 사용되는 제어문 중 하나로, 반복문에서 사용하여 해당 반복 회차에서 남은 코드를 실행하지 않고 다음 회차로 넘어가게 합니다.{
for(let i=1; i<20; i++){
if(i == 10){
continue;
}
document.write(i);
}
}
결과 확인하기
다음 회차에서 반복문을 계속 실행하고 싶을 때 continue문을 사용합니다.
이를 통해 반복문에서 조건에 맞지 않는 경우에는 건너뛰고 다음 회차를 실행할 수 있습니다.