01. if문
if문은 가장 기본적인 조건문입니다.
조건이 참일 경우 실행할 코드를 작성합니다.
{
if(0){
document.write("실행되었습니다. (true)");
} else {
document.write("실행되었습니다. (false)");
}
}
결과 확인하기
값이 0, null, undefined, flase, ""(빈 문자열)일 경우: 실행되었습니다.(flase)
if문 작성법
if(조건식){//true 실행}else if{//flase 실행}
02. if문 생략
if문은 가장 기본적인 조건문입니다.
중괄호를 생략하여 간단하게 쓸 수 있습니다.
주석처리 부분을 밑의 방법으로 생략 가능합니다.
{
const num = 100;
// if(num){
// document.write("실행되었습니다.(true)");
// } else {
// document.write("실행되었습니다.(false)");
// }
if(num) document.write("실행되었습니다.(true)");
else document.write("실행되었습니다.(false)");
}
결과 확인하기
03. 삼항 연산자
if문은 가장 기본적인 조건문입니다.
소스가 복잡할 경우 기본 if문보다 삼항 연산자를 통해 효율적으로 쓸 수 있습니다.
조건이 true일 경우 처음 나오는 값을 출력하고, false일 경우에는 그 다음 값을 출력합니다.
{
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문
if문은 가장 기본적인 조건문입니다.
다중if문은 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을 100으로 정하고 난 뒤, 첫 번째 조건에 충족하지 못하여 건너뛰고,다음 두 번째 조건에 충족하여 값을 출력하였습니다.
05. 중첩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)")
}
}
결과 확인하기
실행되었습니다.(2)
실행되었습니다.(3)
06. switch문
복수의 if 조건문은 switch문으로 바꿀 수 있습니다.
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");
}
// 조건에 맞는 값이 있으면 break를 써서 끝냅니다.
}
결과 확인하기
조건에 맞는 값이 있으면 break를 써서 끝냅니다. break를 쓰지 않을 시 case를 실행하면서 무한에 빠집니다.
07. while문
while 문은 소스 코드를 입력한 배열 혹은 객체의 속성에 맞게 반복하여 실행하는 역할을 합니다.
for문과 같은 반복문이지만 표현 방식이 다릅니다.(for문으로 변경 가능)
{
for(let i=0; i<5; i++){
document.write(i);
}
// 기존의 for문을 사용
let num = 0;
while(num<5){
document.write(num);
num++;
}
// while문을 사용
}
결과 확인하기
08. do while문
조건에 따라 반복을 계속할지를 결정할 때 사용하는 것은 while 문과 동일합니다.
다만, 무조건 중괄호 {} 블럭을 한번 실행하고, 조건을 검사하여 반복을 결정합니다.
{
let num = 0;
do {
document.write(num);
num++;
} while (num<5);
}
결과 확인하기
09. for문
for문은 같은 동작을 쉽게 반복하는 반복문입니다.
for문은 반복횟수를 정확히 알고있을 때 주로 쓰입니다.
for문을 활용한 다양한 예제들입니다.
{
for(let i=1; i<100; i++){
document.write(i);
}
// 1부터 100까지 출력하는 예제
}
결과 확인하기
10. 중첩for문
중첩for문은 for문을 여러 번 쓸 수 있습니다.
중첩 for문을 이용한 25칸 테이블 만들기 예제입니다.
{
let table = "<table border='1'>";
let num = 1;
for(let i=1; i<=5; i++){
table += "<tr>";
for(let j=1; j<=5; j++){
table += "<td>"+num+"</td>";
num++;
}
table += "</tr>";
}
table += "</table>";
document.write(table);
}
결과 확인하기
11. break문
반복문 안에서 위와 같은 break 문을 만나면 실행의 흐름은 반복문을 빠져나가서 반복문 다음으로 이동하게 됩니다.
{
for(let i=1; i<20; i++){
if(i == 10){
break;
}
document.write(i);
}
}
결과 확인하기
document.write(i)의 위치에 따라 출력되는 값이 달라집니다.
12. continue문
continue가 실행되면 continue문 아래의 코드를 실행하지 않고 건너뛰고 반복문의 처음으로 돌아가서 다음 반복을 시작합니다.
{
for(let i=1; i<20; i++){
if(i == 10){
continue;
}
document.write(i);
}
}
결과 확인하기
document.write(i)의 위치에 따라 출력되는 값이 달라집니다.