01. if문
if 문을 사용하여 주어진 "조건식"이 참일 때와 거짓일 때 각각 다른 메시지를 출력하는 예시
{
// true : true, "문자열", 1, 2, "1", "2", [], {}
// flase : false, 0, null, undefined, ""(빈문자열)
if("조건식"){
document.write("실행되었습니다.(true)");
} else {
document.write("실행되었습니다.(false)")
}
}
"조건식"부분에 true, "문자열", 1, 2, "1", "2", [], {}을 넣으면 true로 간주됩니다.
참(true)으로 간주되는 값들:
true: 진리값 true.
"문자열": 비어있지 않은 문자열.
1과 2: 0을 제외한 숫자는 모두 참으로 간주됩니다.
"1"과 "2": 문자열로 표현된 숫자도 참으로 간주됩니다.
[]: 빈 배열은 참입니다.
{}: 빈 객체는 참입니다.
"조건식"부분에 flase : false, 0, null, undefined, ""(빈문자열)을 넣으면 false로 간주됩니다
거짓(false)으로 간주되는 값들:
false: 진리값 false.
0: 숫자 0은 거짓으로 간주됩니다.
null: null은 거짓으로 간주됩니다.
undefined: undefined는 거짓으로 간주됩니다.
"" (빈 문자열): 비어있는 문자열은 거짓입니다.
조건문?
조건에 따라 특정 코드를 실행시킬 수 있습니다.
if문 / else문 / else if문
if문 기본형
if(조건식){
자바스크립트 코드;
}
if문은 조건식을 만족(true)할 경우에만 코드를 실행합니다.
false, 0, null, undefined, ""(빈문자열) 다음의 값이 조건식에 입력되면 flase를 반환하지만 그 밖의 값은 true로 인식합니다
결과 확인하기
02. 다중if문
다중 if문은 프로그래밍에서 여러 개의 조건을 순차적으로 검사하여 해당하는 조건을 만족하는 경우 특정 코드 블록을 실행하는 조건문의 형태입니다. 다중 if문은 여러 선택사항 중 하나를 선택하거나 다양한 조건에 따라 다른 동작을 수행할 때 사용됩니다.
else 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. const num = 100;: num이라는 이름의 상수를 선언하고, 그 값을 100으로 초기화합니다.
2. if(num == 90) { ... }: 첫 번째 조건문입니다. num의 값이 90과 같은지 비교합니다. 만약 같다면, "실행되었습니다.(num = 90)"라는 메시지를 출력합니다. 이 경우 num의 값은 100이므로 이 조건은 거짓이므로 실행되지 않습니다.
3. else if(num == 95) { ... }: 두 번째 조건문입니다. num의 값이 95와 같은지 비교합니다. 만약 같다면, "실행되었습니다.(num = 95)"라는 메시지를 출력합니다. 이 경우 num의 값은 100이므로 이 조건은 거짓이므로 실행되지 않습니다.
4. else if(num == 100) { ... }: 세 번째 조건문입니다. num의 값이 100과 같은지 비교합니다. 만약 같다면, "실행되었습니다.(num = 100)"라는 메시지를 출력합니다. 이 경우 num의 값은 100이므로 이 조건이 참이며, 해당 블록이 실행됩니다. 따라서 "실행되었습니다.(num = 100)"가 출력됩니다.
5. else if(num == 105) { ... }: 네 번째 조건문입니다. num의 값이 105와 같은지 비교합니다. 만약 같다면, "실행되었습니다.(num = 105)"라는 메시지를 출력합니다. 이 경우 num의 값은 100이므로 이 조건은 거짓이므로 실행되지 않습니다.
6. else { ... }: 이전 모든 조건문이 거짓인 경우 실행되는 블록입니다. "실행되었습니다."라는 메시지를 출력합니다.
else if문은 두 가지 이상의 조건식돠 정해 놓은 조건을 만족하지 않았을 때 실행되는 코드로 이루어져 있습니다.
가장 위에 있는 조건식부터 차례로 조건 검사를 하면서 만족(true)하는 값이 나오면 그에 해당하는 코드를 실행하고 조건문을 종료합니다. 조건식 중 만족하는 값이 하나도 없으면 else문의 중괄호에 있는 코드를 실행합니다.
결과 확인하기
03. 중첩if문
조건문 안에 조건문이 있으면 중첩if문이라고 합니다.
{
if(num == 100){
document.write("실행되었습니다.1");
if(num == 100){
document.write("실행되었습니다.2");
if(num == 100){
document.write("실행되었습니다.3");
}
}
} else {
document.write("실행되었습니다.4");
}
}
1. num 변수의 값이 100인지를 검사하기 위한 첫 번째 if문 :
num이 100과 같다면, 이 블록 안의 코드가 실행됩니다.
document.write("실행되었습니다.1"); 이 코드는 첫 번째 if문이 참인 경우 실행되는 코드 블록 내에 있으므로, "실행되었습니다.1"라는 텍스트를 문서에 출력합니다.
2. 두 번째 중첩된 if문
이것은 첫 번째 if문 안에 있으므로, 첫 번째 if문이 참일 때만 검사됩니다.
num이 100과 같다면, 이 블록 안의 코드가 실행됩니다.
document.write("실행되었습니다.2"); 두 번째 if문이 참인 경우 실행되는 코드 블록 내에 있으므로, "실행되었습니다.2"라는 텍스트를 문서에 출력합니다.
3. 세 번째 중첩된 if문입니다. 역시 첫 번째 if문 안에 있으므로, 첫 번째 if문이 참일 때만 검사됩니다.
num이 100과 같다면, 이 블록 안의 코드가 실행됩니다.
document.write("실행되었습니다.3"); 세 번째 if문이 참인 경우 실행되는 코드 블록 내에 있으므로, "실행되었습니다.3"라는 텍스트를 문서에 출력합니다.
4. 따라서, 주어진 코드에서 num의 값이 100이므로 첫 번째 if문이 참이 되고, "실행되었습니다.1", "실행되었습니다.2", "실행되었습니다.3"이 차례로 출력됩니다. 만약 num이 100이 아니라면, "실행되었습니다.4"가 출력될 것입니다.
결과 확인하기
04. if문 생략 & 삼항 연산자
조건문과 삼항 연산자를 사용하여 다양한 방식으로 동일한 조건을 검사하고 결과를 출력하는 예제입니다.
{
const num = 100;
// 1. if문
if(num == 100){
document.write("실행되었습니다.(true)");
}
// 2. if문 {} 생략
if(num == 100) document.write("실행되었습니다.(true)");
// 3. else문
if(num == 100){
document.write("실행되었습니다.(true)");
} else {
document.write("실행되었습니다.(false)");
}
// 4. else문 {} 생략
if(num == 100) document.write("실행되었습니다.(true)");
else document.write("실행되었습니다.(false)");
// 5. 삼항 연산자(조건 연산자)
(num == 100) ? document.write("true") : document.write("false")
}
1. num의 값이 100과 같은지 검사하고, 만약 참이면 "실행되었습니다.(true)"를 출력합니다.
2. 조건문은 블록을 생략하고, 한 줄로 표현되었습니다. 여전히 num의 값이 100과 같은지 검사하고, 만약 참이면 "실행되었습니다.(true)"를 출력합니다.
3.세 번째 조건문은 num의 값이 100과 같은지 검사하고, 만약 참이면 "실행되었습니다.(true)"를 출력하고, 그렇지 않으면 "실행되었습니다.(false)"를 출력합니다. if와 else 블록을 사용하여 참과 거짓의 경우 각각 다른 동작을 수행할 수 있습니다.
4. 네 번째 조건문은 블록을 생략하고, if와 else 블록이 한 줄에 표현되었습니다. 여전히 num의 값이 100과 같은지 검사하고, 만약 참이면 "실행되었습니다.(true)"를 출력하고, 그렇지 않으면 "실행되었습니다.(false)"를 출력합니다.
5. 삼항 연산자를 사용하여 num의 값이 100과 같은지를 검사하고, 참이면 "true"를 출력하고, 그렇지 않으면 "false"를 출력합니다. 삼항 연산자는 조건에 따라 간단한 출력을 할 때 유용한 방법입니다.
삼항 연산자 기본형
조건 ? 참일 때 반환할 값 : 거짓일 때 반환할 값
삼항 연산자는 조건에 따라 다른 값을 선택해야 하는 간단한 상황에서 특히 유용합니다. 코드를 간결하게 작성할 수 있고 가독성을 높일 수 있습니다.
결과 확인하기
05. switch문
switch 문은 변수에 저장된 값과 case의 값을 검사하여 변수와 case의 값에서 일치하는 값이 있을 때 그에 해당하는 코드를 실행합니다.
{
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("실행되었습니다.");
}
}
1. const num = 100;: num이라는 상수를 선언하고, 그 값을 100으로 초기화합니다.
2. switch(num): switch 문을 시작하며, 괄호 안에 있는 표현식(num)의 값을 기준으로 다음의 case 블록 중 하나를 선택하여 실행합니다.
3. case 90:: 첫 번째 case 블록은 num의 값이 90과 일치하는지 검사합니다. 일치하면 이 블록의 코드를 실행하고, break; 문으로 switch 문을 종료합니다. 여기서는 num의 값이 100이므로 이 case 블록은 실행되지 않습니다.
4. case 95:: 두 번째 case 블록은 num의 값이 95와 일치하는지 검사합니다. 일치하면 이 블록의 코드를 실행하고, break; 문으로 switch 문을 종료합니다. 여기서도 num의 값이 100이므로 이 case 블록은 실행되지 않습니다.
5. case 100:: 세 번째 case 블록은 num의 값이 100과 일치하는지 검사합니다. 일치하면 이 블록의 코드를 실행하고, break; 문으로 switch 문을 종료합니다. num의 값이 100이므로 이 case 블록이 실행되며, "실행되었습니다.(100)"이 출력됩니다.
6. case 105:: 네 번째 case 블록은 num의 값이 105와 일치하는지 검사합니다. 일치하면 이 블록의 코드를 실행하고, break; 문으로 switch 문을 종료합니다. 여기서는 num의 값이 100이므로 이 case 블록은 실행되지 않습니다.
7. default:: default 블록은 어떤 case 블록도 실행되지 않을 때 실행됩니다. 이 경우, num의 값이 100이며 이전 case 블록 중에서 세 번째 case 100:이 실행되었으므로 default 블록은 실행되지 않습니다.
선택문?
일치하는 경우의 값이 있을 경우에만 특정 코드를 실행시킬 수 있습니다.
switch문
break?
break는 switch 문의 각 case 블록을 종료하고, 다음 case 블록으로 "넘어가는" 것을 막는 역할을 합니다.
break 문을 사용하지 않으면 switch 문은 선택된 case 블록을 실행한 후 그 아래의 모든 case 블록을 순서대로 실행하게 됩니다
결과 확인하기
06. while문
while 문은 조건식을 만족할 때까지 코드를 여러 회 반복하여 실행할 수 있습니다. while문의 실행 순서는 조건식을 검사하고 만족하면 중괄호 안에 있는 코드와 증감식을 실행합니다.그리고 다시 조건식을 검사합니다.
{
let num = 1;
while(num<=10){
document.write(num);
num++;
}
while 루프를 사용하여 숫자 1부터 10까지를 출력하는 예제입니다.
1. let num = 1;: num이라는 변수를 선언하고, 초기값을 1로 설정합니다. 이 변수는 반복문에서 사용됩니다.
2. while (num <= 10) {}: while 루프를 시작합니다. 이 루프는 괄호 안의 조건(num이 10 이하인지 확인)이 참일 때 실행됩니다.
3. document.write(num);: document.write() 함수를 사용하여 현재 num의 값을 문서에 출력합니다. 초기값으로 num은 1이므로 첫 번째 반복에서는 숫자 1이 출력됩니다.
4. num++;: num 변수의 값을 1씩 증가시킵니다. 이렇게 하면 다음 반복에서 2가 되고, 그 다음 반복에서는 3이 되는 식으로 숫자가 증가합니다.
5. while (num <= 10) {}: while 루프의 블록이 종료됩니다.
while (num <= 10)로 돌아가서 num의 값이 10 이하인지 확인합니다. 만약 참이라면, 다음 반복에서는 루프 블록 내의 코드가 다시 실행됩니다.
이러한 프로세스가 num이 10 이하일 때까지 반복됩니다. 따라서 num의 값이 1에서 10까지 하나씩 증가하면서 해당 숫자가 문서에 출력됩니다.
6. num의 값이 11이 되면 while (num <= 10)의 조건이 거짓이 되어 루프가 종료됩니다.
반복문? 코드를 지정한 횟수만큼 반복해서 실행시킬 수 있습니다. while문 / do while문 / for문
결과 확인하기
07. do while문
do...while 루프는 while 루프와 비슷하지만, 루프 본문을 먼저 실행하고 조건을 나중에 확인합니다. 따라서
do while문은 처음부터 조건이 거짓이 나와도 한 번은 실행됩니다.
{
let num = 1;
do{
document.write(num);
num++;
} while(num<=10);
}
1. let num = 1;: num이라는 변수를 선언하고, 초기값을 1로 설정합니다. 이 변수는 반복문에서 사용됩니다.
2. do {}: do...while 루프를 시작합니다. do 블록은 먼저 실행됩니다.
3. document.write(num);: document.write() 함수를 사용하여 현재 num의 값을 문서에 출력합니다. 초기값으로 num은 1이므로 첫 번째 반복에서는 숫자 1이 출력됩니다.
4. num++;: num 변수의 값을 1씩 증가시킵니다. 이렇게 하면 다음 반복에서 2가 되고, 그 다음 반복에서는 3이 되는 식으로 숫자가 증가합니다.
5. while(num <= 10);: do...while 루프의 조건을 확인합니다. num의 값이 10 이하인지 확인하고, 조건이 참이면 루프를 다시 실행합니다.
이러한 프로세스가 num이 10 이하일 때까지 반복됩니다. 따라서 num의 값이 1에서 10까지 하나씩 증가하면서 해당 숫자가 문서에 출력됩니다.
num의 값이 11이 되면 while(num <= 10)의 조건이 거짓이 되어 루프가 종료됩니다.
결과 확인하기
08. for문
for 문은 조건식을 만족할 때까지 특정 코드를 반복하여 실행합니다.초기화, 조건, 증가(또는 감소) 세 부분으로 구성됩니다.
{
for(let i=1; i<=10; i++){
document.write(i);
}
}
1. for (let i = 1; i <= 10; i++) {}: for 루프를 시작합니다. 이 루프는 다음과 같은 구조를 가집니다.
1-1. let i = 1;: 루프 시작 전에 i라는 변수를 선언하고 초기값을 1로 설정합니다. i는 반복문 내에서 사용되는 카운터 변수입니다.
1-2. i <= 10;: 루프를 실행할 조건을 설정합니다. i가 10 이하인 동안 루프를 계속 실행합니다.
1-3. i++: 각 루프 반복 후에 i 값을 1씩 증가시킵니다.
2. document.write(i);: document.write() 함수를 사용하여 현재 i의 값을 문서에 출력합니다. 초기값으로 i는 1이므로 첫 번째 반복에서는 숫자 1이 출력됩니다.
3. for 루프의 제어 부분(i++)으로 돌아가서 i 값을 1씩 증가시킵니다.
4. 이러한 프로세스가 i가 10 이하인 동안 계속 반복됩니다. 따라서 i의 값은 1부터 10까지 하나씩 증가하면서 해당 숫자가 문서에 출력됩니다.
i의 값이 11이 되면 i <= 10의 조건이 거짓이 되어 루프가 종료됩니다.
결과 확인하기
09. break문
주로 반복문(for, while, do while) 또는 switch문 내에서 사용됩니다. break문을 실행하면 조건식과 상관없이 강제로 반복문을 종료합니다.
{
for(let i=1; i<10; i++){
if( i == 5){
break;
}
document.write(i); //1234
}
}
1. for (let i = 1; i < 10; i++) {}: for 루프를 시작합니다. 이 루프는 i를 1부터 9까지 증가시키며 반복됩니다. i 변수는 반복문 내에서 사용되는 카운터 변수입니다. 2. if (i == 5) : if 문을 사용하여 현재의 i 값이 5와 같은지를 확인합니다. 3. break;: break 문을 사용하여 루프를 즉시 종료합니다. 따라서 i 값이 5일 때 루프가 종료됩니다. 4. document.write(i);: document.write() 함수는 i 값을 문서에 출력합니다. break 문을 만나지 못한 경우, i 값이 1부터 4까지 순서대로 출력됩니다. 5. for 루프의 제어 부분(i++)으로 돌아가서 i 값을 1씩 증가시킵니다. 이러한 프로세스가 i가 5일 때 if 조건을 만족하여 break 문이 실행되면 루프가 종료됩니다.
결과 확인하기
10. continue문
continue문은 반복문(whil,do while,for)에서만 사용할 수 있습니다
반복문의 실행 중에 continue 문을 만나면, 현재의 반복을 중지하고 다음 반복으로 이동합니다.
다음 반복에서는 조건을 검사하고, 조건이 참이면 반복문의 나머지 부분을 실행합니다. 조건이 거짓이면 반복문을 종료합니다.
{
for(let i=1; i<10; i++){
if( i == 5){
continue;
}
document.write(i); //12346789
}
}
주어진 코드는 JavaScript에서 for 루프를 사용하여 1부터 9까지의 숫자를 출력하며, if 문과 continue를 사용하여 특정 조건을 만족하는 경우 현재 반복을 건너뛰는 예제입니다.
1. for (let i = 1; i < 10; i++) : for 루프를 시작합니다. 이 루프는 i를 1부터 9까지 증가시키며 반복됩니다. i 변수는 반복문 내에서 사용되는 카운터 변수입니다.
2. if (i == 5) {: if 문을 사용하여 현재의 i 값이 5와 같은지를 확인합니다.
3. continue;: continue 문을 사용하여 현재 반복을 중지하고 다음 반복으로 넘어갑니다. 따라서 i 값이 5일 때 이 부분이 실행되면 루프가 현재 반복을 건너뛰고 다음 반복으로 이동합니다.
4. document.write(i);: document.write() 함수는 i 값을 문서에 출력합니다.
5. for 루프의 제어 부분(i++)으로 돌아가서 i 값을 1씩 증가시킵니다.
6. 이러한 프로세스가 i가 5일 때 if 조건을 만족하여 continue 문이 실행되면 루프가 현재 반복을 건너뛰고 다음 반복으로 이동합니다.
i의 값이 10보다 작을 때까지 위의 과정을 반복합니다.
따라서, 주어진 코드에서는 i 값이 1부터 4까지 출력되고가 5일 때 continue 문을 만나서 건너뛰게 됩니다. 그다음 6부터 9까지 출력되고 i의 값이 10이 되면 for 루프의 조건(i < 10)이 거짓이 되어 루프가 종료됩니다.