- 01. if문
- 02. if문 생략
- 03. 삼항 연산자 (조건식)
- 04. 다중 if문(else if)
- 05. 중첩 if문
- 06. swich문
- 07. while문
- 08. do while문 (반복해서 실행시킬 때)
- 09. for문 (반복해서 실행시킬 때)
- 10. 중첩 for문
- 11. break 문
- 12. coutinue 문
01. if문
if문은 가장 기본적인 조건문입니다.
{
if(0) {
document.write("실행되었습니다 (true)");
} else {
document.write("실행되었습니다 (false)");
}
}
결과 확인하기
true : 1, 2, "0", "1"(문자),[ ] (배열), { } (객체), true(불린)
if문
- 0을 제외한 모든 숫자와 문자를 조건식에 넣게 되면 전부 true.
- 빈 배열을 넣어도 결과값은 true가 됨.
- 조건식에 불린도 넣을 수 있으며, true를 넣으면 true가, false가 됨.
- 데이터에 값이 없으면 false가 됨.
02. if문 생략
if문을 생략할 수 있습니다.
{
const num = 100;
1.
if(num) {
document.write("실행되었습니다(true)");
} else {
document.write("실행되었습니다(false)");
} //생략X
2.
if(num) document.write("실행되었습니다(ture)")
else document.write("실행되었습니다(false)") //생략O
}
결과 확인하기
if문 생략
if문을 생략하여 간결한 코드를 작성하는 것을 조건 표현식이라고 함.
조건 표현식은 if를 대체할 수는 없으니 간단한 코드인 경우에 한해 사용하는 것이 좋음.
간단한 간단한 조건 검사 후,반환값을 바로 대입하여 한 줄로 표현할 수 있음.
03. 삼항 연산자
세 항으로 줄여서 삼항 연산자라고 부릅니다.
{
const num = 100;
1.
if(num == 100){
document.write("True");
} else {
document.write("false");
}
2.
(num == 100) ? document.write("True") : document.write("false");
}
결과 확인하기
삼항연산자
형식
: 조건 ? 참(true)인 경우 if 값 : 거짓(false)인 경우 if 값;
1번 식은 document.write를 두 번 읽어들이기 때문에 식이 길어질수록 결과값 출력이 느리고 데이터 용량 차지가 큼.
그런 1번 식의 단점을 보완하여 나온 것이 삼항 연산자 (2번 식)임.
2번 식은 첫번째 document.write만 읽어들이며 결과값 출력이 빠르고 효율적임.
04. 다중 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문
=== 등호 3개는 값과 데이터 타입이 같아야 한다는 뜻으로,
값이 문자(ex."100")인지 숫자(100)인지도 구분한다는 것.
그렇기에 같은 100이라도 데이터 타입이 다르면 false로 인식.
결과값이 정확하고 한 치의 오차도 없기를 바란다면 === 을 쓰는 것이 좋다.
복잡한 조건문을 처리할 수 있음.
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)
중첩 if문
코드 1 조건이 참이고 조건 2, 조건 3도 참(true)일 때만 내부 코드가 실행됨.
조건 1이 참이지만 조건 2가 거짓이면 내부 코드 실행되지 x.
중첩 if문은 가독성이 현저히 떨어지기 때문에 꼭 필요한 경우에만 사용하는 것이 좋음.
06. swich문
{
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");
}
}
결과 확인하기
해당하는 값이 없으므로 0 출력
06. swich문
다중 if문과 같은 형식이지만 else if 대신 case를 사용함.
case와 값을 하나씩 비교하여 일치하는 case를 실행(출력) 시킴.
if와 다르게 조건을 만족한 후에도 식이 종료되지 않으므로 break를 사용하여 끊어주어야 함.
break를 사용하지 않아도 결괏값은 출력이 되지만 페이지 창의 로딩이 계속 되므로 끊어주는 것이 좋음.
default는 case와 일치하는 값이 없을 때 출력됨.
07. while문
{
let num = 0;
while(num<5) {
num++; //1
document.write(num); //2
}
}
결과 확인하기
while 반복문
조건부터 체크한 후 조건이 참(ture)인 동안 문장을 반복함.
조건이 false라면 문장은 한 번도 실행되지 않을 수도 있음.
출력문 다음에(2번 위치) 증가식이 오면 증가가 되지 않은 상태에서 출력되어 0부터 시작하고,
출력문 이전에(1번 위치) 증가식이 오면 증가가 된 상태에서 출력되기 때문에 1부터 시작함.
08. do while문
초기 값이나 반복 횟수 없이 조건만 주어졌을 때 주로 사용하는 반복문.
{
let num2 = 0;
do{
document.write(num2);
num2++;
} while(num2<5);
}
결과 확인하기
do while문
do while문은 while문과 다르게 일단 결과를 출력하고 조건을 체크하므로
while문에서는 나타나지 않을 식을 작성하여도 결과값이 한 번은 출력이 됨.
do를 먼저 실행하기 때문에 첫 번째 실행은 조건에 상관없이 실행함.
또한 do while문은 조건식을 뒤에 작성함.
while문과 같이 증감식의 위치에 따라 결과값이 달라짐.
09. for문
같은 일이 여러 번 반복되어야 하는 여러 예제들을 for문을 사용하여 해결하는 방법.
1.
for (let i=1; i<=100; i++) {
document.write(i);
} //for문을 사용하여 1부터 100까지 출력
2.
const arr = [1,2,3,4,5,6,7,8,9]
for (let i=0; i<=arr.length; i++) {
document.write(arr[i]);
} //for문을 사용하여 배열 안에 있는 값 출력
3.
for(let i=1; i<arr.length; i++) {
if(i % 2 == 0) {
document.write("<span style='color:red'>"+i+"</span>"); //1
} else {
document.write(`<span style='color:blue'>${i}</span>`); //2
}
document.write("<br>"); //2번 배열 안에서 짝수는 빨간색으로 홀수는 파란색으로 출력
}
4.
for(let i=0; i<=arr.length; i++) {
if(arr[i] % 2 == 0) {
document.write(arr[i]);
}
document.write("<br>"); //2번 배열 안에서 짝수 구하기
}
결과 확인하기
1, 2, 3, 4, 5, 6, 7, 8, 9
1,3,5,7,9
2,4,6,8
2, 4, 6, 8, undefind
for문 사용
1. for문을 사용하여 console.log를 여러번 작성하지 않고도 1~100까지의 숫자를 출력할 수 있음.
2. 식에서 배열 안에 있는 숫자만 결과값으로 가져오기 위해 조건식에 일반 숫자 대신 배열 안의 저장된 데이터의 수를 세어주는 length를 넣어주어야 함.
3-1. 구(예전) 문법으로 " "를 사용하여 문자로 인식할 것과 아닌 것을 구분했음.
3-2. 2번은 신(최신) 문법으로 " " 대신 `를 사용하고 변수 앞에 $를 붙여주면 따옴표로 구분할 필요가 없음.
4. 결과값이 2,4,6,8,undefind 로 나오는데 이는 그 이후의 배열까지 세었기 때문
i의 값을 1 낮추거나, 조건식에 있는 등호를 빼면 결과값에 undefind가 나오지 않음.
10. 중첩 for문
중첩 for문을 사용하여 100칸 테이블 만들기
{
for(let i=1; i<=10, i++){ //1
table += "<tr>";
for(let j=1; i<=10; j++) { //2
table += "<td>"+j+"</td>"; //3
}
table += "</tr>" //4
}
table += "</table>" //5
document.write(table);
}
결과 확인하기
중첩 for문
1. 1부터 10까지 반복되는 반복문. 표의 세로(행)을 만드는 반복문임.
2. 1부터 10까지 10번 반복되는 반복문. 표의 세로(열)을 만드는 반복문임.
2. 2번 식이 100번 반복되기 때문에 테이블이 100칸 생기는 것.
3. 테이블 안에 숫자를 넣기 위한 식으로, 1부터 10까지만이 반복되어 들어감.
4. 테이블을 만들 때 행 안에 열을 넣고 닫듯이, 닫아주어야 함.
5. 식을 종결하기 위해 테이블을 닫아줌.
11. break 문
현재 실행문을 중지시키고 다음 실행문으로 넘어가게 하는 중지문.
{
for(let i=1; i<100; i++){
document.write(i)
if(i == 50) {
break;
}
}
document.write("<br>");
}
결과 확인하기
break
현재 실행문을 중지 시키고 다음 실행문으로 넘어가게 함.
반복문은 지정한 횟수만큼 명령을 반복하지만, break문을 사용하면 반복문을 중간에 끝내게 하여
식이 조건을 만족하여 종결되는 것이 아니라 break문 사용하여 반복문을 빠져나오게 하는 것.
1부터 100까지 출력해야 하는 반복문이지만, 중간에 break문을 만나 50까지 반복하고 나서 식이 종결됨.
12. coutinue 문
조건을 만족하면 실행하던 반복 문장을 건너뛴다.
{
for(let i=1; i<10; i++){
if(i == 10) {
continue;
}
document.write(i); //document 문이 continue 이전에 있으면 10이 출력됨.
}
}
결과 확인하기
continue문
조건에 해당되는 값을 만났을 때 실행하던 반복 문장을 건너뛰고 반복문의 맨 앞으로 되돌아가서 다음 반복 과정으로 넘어가도록 함.
반복 과정을 한 차례 건너뛰는 것이기 때문에 조건에 해당하는 값(10)이 출력되지 않음.
continue문이 출력문 이후에 위치하면 건너 뛰어지지 않고 조건에 일치하는 값도 출력됨.