01. if문 (false 5개 외우기)
if문은 조건식을 만족(true)할 경우에만 코드를 실행합니다. 그 어떤 데이터를 입력해도 true 또는 false를 반환합니다.
{
if("조건식"){
document.write("실행되었습니다.(true)"); // true : true, "문자열" , 1, 2, "1","2", [], {}
} else{
document.write("실행되었습니다.(false)"); // false : false, 0, null, undefined,""(빈문자열)
}
}
조건식에는 논리형 데이터(true,false)가 아닌 다른 형의 데이터가 입력되어도 true 또는 false로 인식 됩니다.
조건식에 0, null,""(빈문자),undefined 값이 입력이 되면 false를 반환하지만 그밖의 값은 true로 인식합니다.
결과 확인하기
02. 다중 if문
다중 if문은 두가지 이상의 조건식과 정해 놓은 조건을 만족하지 않았을때 실행되는 코드로 이루어져 있습니다.
{
const num =100;
if(num == 90){
document.write("실행되었습니다.(num = 90)");
} else if (num == 95){
document.write("실행되었습니다.(num = 95)");
} else if (num == 100){
document.write("실행되었습니다.(num = 100)");
} else if (num == 105){
document.write("실행되었습니다.(num = 105)");
} else {
document.write("실행되었습니다.") ;
}
}
가장 위에 있는 조건식 1부터 5까지 차례로 조건 검사를 하면서 만족(true)하는 값이 나오면 그에 해당하는 코드를 실행하고 조건문을 종료합니다.
조건식 3 에서 만족(true)하는 값이 나오면서 해당하는 코드를 실행하고 조건문을 종료합니다.
결과 확인하기
03. 중첩 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문은 바깥쪽에 있는 조건문인 조건식 1을 만족해야만 안쪽에 있는 조건문인 조건식2를 검사합니다.
만일 안쪽 if문의 조건식2를 만족하지 않으면 바깥쪽 조건문인 조건식1의 중괄호 안에 있는 코드만 실행하고 종료 됩니다.
조건식 1,조건식 2, 조건식 3 모두 다 만족하므로 "실행되었습니다.1" ,"실행되었습니다.2", "실행되었습니다.3" 출력됩니다.
결과 확인하기
04. if문 생략 & 삼항 연산자
조건문이 간단하고 한 줄로 실행할 코드가 하나뿐인 경우, if문을 생략하고 삼항 연산자 또는 단축 평가를 사용하여 더 간결하게 표현할 수 있습니다.
{
const num = 100;
if(num){
document.write("실행되었습니다.(true)");
}
if(num == 100) document.write("실행되었습니다.(true)");
if(num == 100){
document.write("실행되었습니다.(true)");
} else {
document.write("실행되었습니다.(false)");
}
if (num == 100) document.write("실행되었습니다.(true)");
else document.write("실행되었습니다.(false)");
// 삼항 연산자(조건식 연산자) : 많이 사용함. :( ? , :)
(num == 100) ? document.write ("true") : document.write("false");
}
삼항 연산자는 if문을 간결하게 표현하기 위한 방법 중 하나로, 조건에 따라 두 가지 다른 값을 반환하는 데 사용됩니다.
조건 ? 참일 때 반환할 값 : 거짓일 때 반환할 값
조건은 참 또는 거짓으로 평가되는 표현식입니다.
참일 때 반환할 값은 조건이 참일 때 반환될 값 또는 표현식입니다.
거짓일 때 반환할 값은 조건이 거짓일 때 반환될 값 또는 표현식입니다.
결과 확인하기
05. switch문
선택문인 switch문은 변수에 저장된 값과 switch문에 있는 경우의 값을 검사하여 변수와 경우의 값에서 일치하는 값이 있을때 그에 해당하는 코드를 실행합니다.
{
const num = 100;
switch(num){
case 90:
document.write("실행되었습니다.(90)");
break;
case 95:
document.write("실행되었습니다.(95)");
break;
case 100:
document.write("실행되었습니다.(100)");
break;
case 105:
document.write("실행되었습니다.(105)");
break;
default:
document.write("실행되었습니다.");
}
}
if문과 용도는 비슷하나 if문은 만족하는 데이터가 여러 개일 경우에 주로 사용하고, switch문은 여러 경우의 값 중 일치하는 데이터를 찾아 그에 해당하는 코드를 실행시킬 때 사용합니다.
변수에 저장된 값은 switch문을 만나면 case의 값을 하나씩 검사합니다.
일치하는 데이터가 있으면 그에 해당하는 코드를 실행하고 break문을 만나 switch문을 종료합니다.
만일 case의 값중에 일치하는 데이터가 없으면 마지막 default에 있는 코드를 실행하고 switch문을 종료합니다.
결과 확인하기
06. while문
while문은 조건식을 만족할 때까지 코드를 여러 회 반복하여 실행할 수 있습니다.
{
let num = 1;
while(num<=10){
document.write(num);
num++;
}
}
while문은 조건식을 만족할 때까지 중괄호{}안에 있는 코드를 반복하여 실행합니다.
조건식 num<=10 이기때문에, 1부터 10까지 출력합니다.
결과 확인하기
07. do while문
while문의 경우에는 조건식의 만족 여부를 먼저 검사한 후 중괄호에 있는 코드의 실행 여부를 결정했습니다.
하지만 do while문은 반드시 한 번은 코드를 실행하고 조건식을 검사합니다.
{
let num = 1;
do {
document.write(num);
num++;
} while (num<=10);
}
먼저 중괄호{}에 있는 코드를 실행하고 조건식을 검사합니다.
do-while 루프는 일단 코드 블록을 한 번 실행하고, 그 후에 조건을 검사하여 조건이 참인 경우 루프를 계속 반복합니다.
처음에는 num이 1이므로 1이 출력됩니다.
num++; : num 변수의 값을 1씩 증가시킵니다. 이렇게 함으로써 다음 반복에서는 2, 그 다음 반복에서는 3을 출력하고 이어서 10까지 출력합니다.
while (num <= 10);: 이 부분에서 while 조건을 검사합니다. num이 10 이하인 동안 (1부터 10까지의 숫자를 모두 출력한 후) 루프를 계속 반복합니다.
이 코드는 do-while 루프를 사용하여 1부터 10까지의 숫자를 순서대로 출력하고, num이 10을 초과하면 반복을 종료합니다.
결과적으로 웹 페이지에는 1부터 10까지의 숫자가 출력됩니다.
결과 확인하기
08. for문
for문은 조건식을 만족할 때까지 특정 코드를 반복하여 실행합니다.
{
for(let i=1; i<=10; i++){
document.write(i);
}
const num = [10, 20, 30, 40, 50, 60, 70, 80, 90];
for(let i=0; i<num.length; i++){
document.write(num[i]);
}
}
while문과 같지만 while문 보다 사용하기 편해 사용빈도가 높은 편입니다.
for문의 실행 순서 초깃값 -> 조건식 -> 자바스크립트 코드 -> 증감식 -> 조건식
변수 i에 초깃값 1을 저장합니다.
조건식을 만족할 경우 중괄호의 코드를 실행합니다.
증가 연산자로 변수 i의 값이 1만큼 증가합니다.
다시 조건식의 만족 여부를 검사한 후 중괄호의 코드를 실행할지 아니면 종료할지 결정합니다.
결과 확인하기
09. break문
break문은 반복문을 강제로 종료할 때 사용합니다.
{
for(let i=1; i<10; i++){
if ( i == 5){
break;
}
document.write(i);
}
}
for 루프를 사용하여 반복 작업을 수행합니다. 초기화 부분에서 i 변수를 1로 초기화하고, 조건 부분에서 i가 10보다 작을 때까지 루프를 실행하도록 지정하고, 반복 후 작업에서 i 변수를 1씩 증가시킵니다.
if문을 사용하여 현재 i의 값이 5인지 확인합니다. 만약 i가 5와 같다면, if문 내부의 코드 블록을 실행합니다.
if문 내에서 break 명령문을 사용하여 루프를 강제로 종료합니다. 따라서 i가 5일 때 루프가 종료됩니다.
현재 i의 값을 웹 페이지에 출력합니다. 이 코드는 if문과 관계없이 모든 루프 반복에서 실행됩니다.
결과적으로 이 코드는 1부터 9까지의 숫자를 출력하고, i가 5일 때 if문 내부의 break 명령문을 만나서 루프를 종료합니다.
따라서 웹 페이지에는 1부터 4까지의 숫자만 출력됩니다. 5는 출력되지 않습니다.
결과 확인하기
10. continue문
continue문은 반복문에서만 사용할 수 있습니다. while문에 사용할 경우 continue 문 다음에 오는 코드는 무시하고 바로 조건식으로 이동해 조건 검사를 합니다.
{
for(let i=1; i<10; i++){
if ( i == 5){
continue;
}
document.write(i);
}
}
for문에서 continue문을 실행할 경우에는 continue문 다음에 오는 코드는 무시하고 바로 증감식으로 이동하여 증감 연산을 실행합니다.
i==5, 1~4 출력하고 5는 무시하고 6~9까지 출력합니다.