00. 제어문
제어문은 프로그램의 흐름을 제어할 수 있도록 도와주는 문장을 말합니다.
{
//if문
const age = 18;
if (age >= 18) {
console.log("성인입니다.");
} else {
console.log("미성년자입니다.");
}
//else if문
{
const score = 85;
if (score >= 90) {
console.log("A 학점");
} else if (score >= 80) {
console.log("B 학점");
} else if (score >= 70) {
console.log("C 학점");
} else {
console.log("D 학점");
}
}
//switch문
{
const day = "월요일";
switch (day) {
case "월요일":
console.log("주간 회의");
break;
case "수요일":
console.log("프로젝트 업데이트");
break;
case "금요일":
console.log("클라이언트 미팅");
break;
default:
console.log("일정 없음");
}
}
//while문
{
let count = 0;
while (count < 5) {
console.log("카운트: " + count);
count++;
}
}
//for문
{
for (let i = 0; i < 5; i++) {
console.log("카운트: " + i);
}
}
}
제어문에는
1. 조건문(조건을 만족하는지의 여부에 따라 제어한다.)과
2. 선택문(변수에 일치하는 경우의 값에 따라 제어한다.),
3. 반복문(특정 코드를 여러 번 반복해서 실행한다.)으로 3가지가 있다.
각각 다음과 같은 종류가 있습니다.
* 조건문: if문, else문, else if문
- if문: age 변수의 값이 18 이상이면 "성인입니다."를 출력하고, 그렇지 않으면 "미성년자입니다."를 출력합니다.
- else if문: score 변수의 값에 따라 학점을 출력합니다
여러 조건을 순차적으로 검사하며, 첫 번째로 참인 조건에 해당하는 학점을 출력합니다.
* 선택문: switch문
- switch문: switch 문은 여러 가능한 경우 중 하나를 선택하고 해당하는 블록을 실행하기 때문에 day 변수의 값에 따라 해당하는 작업을 출력합니다.
* 반복문: while문, for문
- while문: while 문은 조건이 참인 동안 코드 블록을 반복 실행합니다.
이 코드는 count 변수를 0에서 시작하여 4까지 증가시키면서 카운트를 출력합니다.
- for문: for 문은 초기값, 조건식, 반복 후 실행할 코드를 지정하여 반복을 제어합니다.
이 코드는 0부터 4까지 카운트를 출력합니다.
결과 확인하기
B 학점
주간 회의
카운트: 0 카운트: 1 카운트: 2 카운트: 3 카운트: 4
카운트: 0 카운트: 1 카운트: 2 카운트: 3 카운트: 4
01. if문
if문은 조건을 만족할 경우에만 코드를 실행합니다.
주로 만족하는 데이터가 여러 개일때 사용합니다.
{
if("조건식"){
document.write("실행되었습니다.(true)");
} else {
document.write("실행되었습니다.(false)");
}
}
if 문에서 일반적으로 "false, 0, null, undefined, ""(빈문자열)" 값들은 false가 나옵니다.
이 값들을 제외한 값들은 true가 나옵니다.
if 문을 사용하여 조건을 검사하고, 조건이 참(true)이면 첫 번째 블록이 실행되고, 그렇지 않으면 두 번째 블록이 실행됩니다.
예제의 조건식은 "조건식"으로 주어졌는데, 이것은 문자열로 표현된 조건입니다.
JavaScript에서 문자열은 비어 있지 않으면 항상 참(true)으로 평가됩니다.
따라서 "조건식"은 비어 있지 않은 문자열이므로 항상 참으로 평가되고, 첫 번째 블록이 실행됩니다.
결과 확인하기
02. 다중 if문
다중 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("실행되었습니다.");
}
}
const num = 100;: 변수 num을 선언하고 값을 100으로 초기화합니다.
if (num == 90) { ... }: 첫 번째 if 문에서 num의 값과 90을 비교합니다.
비교 연산자 ==는 값만을 비교하므로 num이 90과 같은지 검사합니다.
만약 같다면, 다음 줄에 있는 문장 "실행되었습니다.(num = 90)"을 실행합니다.
else if (num == 95) { ... }: 첫 번째 if 조건이 거짓인 경우, 두 번째 else if 문에서 num의 값과 95를 비교합니다.
만약 같다면, 해당 문장 "실행되었습니다.(num = 95)"을 실행합니다.
else if (num == 100) { ... }: 첫 번째와 두 번째 조건 모두 거짓인 경우, 세 번째 else if 문에서 num의 값과 100을 비교합니다.
만약 같다면, "실행되었습니다.(num = 100)"을 실행합니다.
else if (num == 105) { ... }: 첫 번째, 두 번째, 세 번째 조건이 모두 거짓인 경우, 네 번째 else if 문에서 num의 값과 105를
비교합니다.
만약 같다면, "실행되었습니다.(num = 105)"을 실행합니다.
lse { ... }: 이전의 모든 조건이 거짓인 경우 실행됩니다.
따라서 마지막 else 블록에 있는 문장 "실행되었습니다."이 실행됩니다.
결과 확인하기
03. 중첩 if문
중첩 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("실행되었습니다.3");
}
}
const num = 100;: 변수 num을 선언하고 값을 100으로 초기화합니다.
if (num == 100) { ... }: 첫 번째 if 문에서 num의 값과 100을 비교합니다.
비교 연산자 ==는 값만을 비교하므로 num이 100과 같은지 검사합니다.
만약 같다면, 다음 줄에 있는 문장 "실행되었습니다.1"을 실행합니다.
if (num == 100) { ... }: 두 번째 if 문은 첫 번째 if 문의 내부에 중첩되어 있습니다.
따라서 첫 번째 if 문의 조건이 참인 경우에만 실행됩니다.
두 번째 if 문은 또한 num의 값과 100을 비교하고, 만약 같다면, "실행되었습니다.2" 문장을 실행합니다.
if (num == 100) { ... }: 세 번째 if 문도 중첩되어 있으며, 이전의 두 번째 if 문의 내부에 있습니다.
따라서 첫 번째와 두 번째 if 문의 조건이 참이고, num의 값이 100과 같을 때만 실행됩니다.
세 번째 if 문의 조건이 참이면 "실행되었습니다.3" 문장을 실행합니다.
else { ... }: 이전의 모든 조건이 거짓인 경우 실행됩니다.
따라서 이 부분은 실행되지 않습니다.
결과 확인하기
04. if문 생략 & 삼항 연산자
if문의 본문이 한 줄인 경우만, 중괄호 {}를 생략할 수 있습니다. 삼항 연산자의 일반적인 구조는 'condition ? value1 : value2'입니다. condition(조건)을 검사하고, 조건이 참이면 value1을 반환하고, 조건이 거짓이면 value2를 반환합니다.
{
const num = 100;
// if(num = 100){
// document.write("실행되었습니다.(true)");
// }
if(num == 100) document.write("실행되었습니다.(true)");
// if(num = 100){
// document.write("실행되었습니다.(true)");
// } else {
// document.write("실행되었습니다.(false)");
// }
// 약식(가독성X)
if(num == 100) document.write("실행되었습니다.(true)");
else document.write("실행되었습니다.(false)");
(num == 100) ? document.write("true") : document.write("false");
}
주석 처리된 첫번째 코드(if문)는 if 문을 사용하여 num 변수의 값이 100과 같은지 검사합니다. 만약 같다면, "실행되었습니다.(true)"를 출력합니다. 첫번째 코드는 주석 처리된 첫번째 코드에서 중괄호를 생략한 if문입니다. 주석 처리된 두번째 코드는 if-else문을 사용하여 num 변수의 값이 100과 같은지 검사합니다. 두번째 코드는 주석 처리된 두번째 코드의 약식 표현으로 중괄호를 생략해서 가독성이 떨어집니다. 세번째 코드는 삼항 연산자로 두번째 주석 처리된 코드와 기능은 비슷하지만 처리 속도가 더 빠릅니다. num이 100과 같으면 "true"를, 그렇지 않으면 "false"를 출력합니다.
결과 확인하기
05. switch문
변수에 저장된 값과 switch문에 있는 경우(case)의 값을 검사하여 변수와 경우의 값에서 일치하는 값이 있을 때 해당하는 코드를 실행합니다.
if문과 용도가 비슷하지만 특정 변수나 표현식의 값에 따라 여러 가지 동작 중 하나를 선택하는 데 사용됩니다.
다음은 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("실행되었습니다.");
}
}
* switch 문은 case 레이블과 해당 case 레이블에 대한 실행 코드를 포함합니다.
* break;: 각 case 블록의 끝에서 사용되며, break를 만나면 switch 문을 종료합니다.
다음 case가 실행되지 않도록 합니다.
break를 사용해서 종료 하지않으면 무한으로 출력합니다.
* default: 어떤 case 조건도 만족하지 않는 경우 실행됩니다.
const num = 100;: 변수 num을 선언하고 값을 100으로 초기화합니다.
switch (num) { ... }: switch 문을 시작합니다.
num의 값에 따라 다른 case를 실행할 것입니다.
case 90: 첫 번째 case는 num이 90일 때 실행됩니다.
case 다음에는 해당 조건을 지정하고 콜론을 붙입니다.
document.write("실행되었습니다.(90)");: num이 90인 경우 이 코드가 실행되고 "실행되었습니다.(90)"을 출력합니다.
document.write("실행되었습니다.(100)");: num이 100인 경우 이 코드가 실행되고 "실행되었습니다.(100)"을 출력합니다.
따라서 num은 100이기 때문에 "실행되었습니다.(100)"을 출력합니다.
결과 확인하기
06. while문
while문은 자바스크립트에선 거의 사용하지 않지만 조건식의 만족 여부를 먼저 검사한 후 중괄호에 있는 코드의 실행 여부를 결정합니다.
조건식을 만족할 때까지 코드를 여러 회 반복하여 실행할 수 있습니다.
조건이 참이면 반복문이 실행되고, 조건이 거짓이면 반복문이 종료됩니다.
다음은 while 반복문을 사용하여 1부터 10까지의 숫자를 출력하는 예제입니다.
{
let num = 1;
while(num<=10){
document.write(num);
num++;
}
}
let num = 1;: 변수 num을 선언하고 초기값을 1로 설정합니다.
이 변수는 반복문에서 사용됩니다.
while (num <= 10) { ... }: while 키워드 다음에 조건을 지정하는 괄호가 시작됩니다.
조건은 num이 10 이하인 동안 반복됩니다.
조건이 참인 동안 반복문의 코드 블록이 실행됩니다.
document.write(num);: 현재 num의 값을 출력합니다.
처음으로 실행될 때 num은 1이므로 1이 출력됩니다.
num++;: num 변수의 값을 1씩 증가시킵니다.
이렇게 하면 반복문이 다시 실행될 때 num 값이 2가 되고, 조건을 다시 확인합니다.
이후 반복문은 계속해서 num을 증가시키고, 조건을 확인하여 10 이하인 동안 반복됩니다.
따라서 1부터 10까지의 숫자가 순서대로 출력됩니다.
결과 확인하기
07. do while문
do while문은 반드시 한 번은 코드를 실행하고 조건식을 검사합니다.
하지만 요즘에는 잘 사용하지 않는 문법입니다.
다음은 do...while 반복문을 사용하여 1부터 10까지의 숫자를 출력하는 예제입니다.
{
let num = 1;
do {
document.write(num);
num++;
} while(num<=10);
}
let num = 1;: 변수 num을 선언하고 초기값을 1로 설정합니다.
do { ... }: 반복문의 시작으로 먼저 실행되고, 그 후에 조건을 확인합니다.
document.write(num);: 현재 num의 값을 출력합니다.
처음으로 실행될 때 num은 1이므로 1이 출력됩니다.
num++;: num 변수의 값을 1씩 증가시킵니다.
이렇게 하면 반복문이 다시 실행될 때 num 값이 2가 되고, 조건을 다시 확인합니다.
while (num <= 10);: do가 실행된 후, while 다음에 조건을 지정하는 괄호가 위치합니다.
조건은 num이 10 이하인 동안 반복을 계속하라는 의미입니다.
do...while 반복문은 일단 한 번은 실행됩니다.
그런 다음 조건을 확인하고, 조건이 참이면 반복을 계속하고, 조건이 거짓이면 반복문을 종료합니다.
결과 확인하기
08. for문
for문은 조건식을 만족할 때까지 특정 코드를 반복하여 실행합니다.
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 j=0; j<num.length; j++ ){
document.write(num[j], + "<br>");
};
}
* 초기값: 반복문이 시작될 때 변수를 초기화합니다.
* 조건식: 각 반복에서 조건을 확인하고, 조건이 참이면 루프가 계속됩니다.
* 증감식: 각 반복 후 변수를 증가 또는 감소시킵니다.
for (let i = 1; i <= 10; i++) { ... }: 1부터 10까지의 숫자를 출력하기 위한 for 반복문입니다.
let i로 루프 변수를 선언하고 초기값을 1로 설정하며, i가 10 이하인 동안 반복됩니다.
i++는 각 반복 후 i를 1씩 증가시킵니다.
document.write(i);: 현재 i의 값을 문서에 출력합니다.
for (let j = 0; j < num.length; j++) { ... }: 배열 num의 각 요소를 출력하기 위한 for 반복문입니다.
let j로 루프 변수를 선언하고 초기값을 0으로 설정하며, j가 num.length(배열의 길이)보다 작은 동안 반복됩니다.
document.write(num[j] + "
");: 현재 num[j]의 값을 문서에 출력하고, 줄 바꿈 <br>을 추가하여 각 요소를 새 줄에
출력합니다.
결과 확인하기
10
20
30
40
50
60
70
80
90
09. break문
break문은 while문 또는 for문에서 특정 조건을 만족하여 반목문을 강제 종료할 때 사용합니다.
하지만 요즘에는 잘 사용하지 않는 문법입니다.
다음은 for 반복문과 if문에서 break문을 사용하여 반복문을 중단하는 예제입니다.
{
for( let i=1; i<10; i++){
if( i == 5 ){
break;
}
document.write(i, "<br>");
}
}
for (let i = 1; i < 10; i++) { ... }: 1부터 9까지의 숫자를 출력하기 위한 for 반복문입니다.
let i로 루프 변수를 선언하고 초기값을 1로 설정하며, i가 9보다 작은 동안 반복됩니다.
i++는 각 반복 후 i를 1씩 증가시킵니다.
if (i == 5) { ... }: 현재 i의 값이 5와 같은지 확인하는 if문입니다.
break;: 만약 i의 값이 5와 같다면 break문을 실행하여 반복문을 즉시 종료합니다.
document.write(i + "
");: 현재 i의 값을 문서에 출력하고, 줄 바꿈 <br>을 추가하여 각 숫자를 새 줄에 출력합니다.
결과 확인하기
2
3
4
10. countinue문
countinue문은 반복문에서만 사용되며 반복문 내에서 실행될 때 현재 반복을 중단하고 다음 반복으로 이동합니다.
다른 반복들은 계속 실행됩니다.
while문에서 사용할 경우 countinue문 다음에 오는 코드는 무시하고 바로 조건식으로 이동해 조건 검사를 합니다.
하지만 요즘에는 잘 사용하지 않는 문법입니다.
다음은 for 반복문과 if 문에서 continue 문을 사용하여 반복 중에 특정 조건을 만족하는 경우 특정 반복을 건너뛰는 예제입니다.
{
for( let i=1; i<10; i++){
if( i == 5 ){
continue;
}
document.write(i);
}
}
for (let i = 1; i < 10; i++) { ... }: 1부터 9까지의 숫자를 출력하기 위한 for 반복문입니다.
let i로 루프 변수를 선언하고 초기값을 1로 설정하며, i가 9보다 작은 동안 반복됩니다.
i++는 각 반복 후 i를 1씩 증가시킵니다.
if (i == 5) { ... }: 현재 i의 값이 5와 같은지 확인하는 if 문입니다.
continue;: 만약 i의 값이 5와 같다면 continue 문을 실행하여 현재 반복을 중단하고 다음 반복으로 이동합니다.
이것은 특정 조건을 만족하는 경우 특정 반복을 건너뛰고자 할 때 사용됩니다.
document.write(i);: 현재 i의 값을 문서에 출력합니다.
따라서 5를 건너뛰고 1, 2, 3, 4, 6, 7, 8, 9까지만 출력됩니다.