5-1. 조건문5-1-1. if, if else 문 5-1-2. switch 문5-1-3. 삼항 연산자5-2. 반복문5-2-1. for 문5-2-2. while 문5-2-3. break 문과 continue 문
5-1. 조건문
조건문은 주어진 특정 조건이 충족되는 때에 따라 코드의 실행을 결정한다. 결괏값으로 true와 false 값으로 출력될 수 있는 식이다.
5-1-1. if, if else 문
if 문과 if else 문은 코드 블록( { } 괄호로 묶은 영역 ) 안의 조건을 확인하여, Truthy 값이면 if 명령문 다음에 오는 실행 명령을 처리하고, Falsy 값이면 else 문 다음에 오는 실행 명령을 처리한다.
// if 문 if (조건식) { // 조건식이 참(truthy)일 때 실행할 코드 } // (false일 때는 아무것도 실행하지 않는다) // if else 문 if (조건식) { // 조건식이 참(truthy)일 때 실행할 코드 } else { // 조건식이 거짓(falsy)일 때 실행할 코드 } // if else 중복 사용문 if (조건식 1) { // 조건식 1이 참(truthy)일 때 실행할 코드 } else if (조건식 2) { // 조건식 2가 참(truthy)일 때 실행할 코드 } else { // 조건식 1, 2가 모두 거짓(falsy)일 때 실행할 코드 }
else if와 else는 옵션 사항으로 조건의 필요에 따라 사용하거나, 사용하지 않아도 된다.
if와 else는 한 번만 사용해야 하며, else if는 중복으로 다양하게 사용이 가능하다.
if else 문에 예시를 적용하여 살펴보기.
let num = 5; if (num < 10) { console.log('num은 10보다 작은 수입니다'); } else { console.log('num은 10보다 큰 수입니다.'); } // 조건식 num < 10이 참이기 때문에, 콘솔 창에 'num은 10보다 작은 수입니다'가 출력된다.
if else 문과 else if 문 모두를 적용하여 살펴보기.
let x = 10; let y = 20; let z = 30; if ( x > z ) { console.log('x는 셋 중 가장 큰 수이다.'); } else if ( y > z ) { console.log('y는 셋 중 두 번째로 큰 수이다.'); } else { console.log('z는 셋 중 가장 큰 수이다.'); } // z는 셋 중 가장 큰 수이다.
if else 문만 적용하여 살펴보기.
let x = 2; if(x % 2) { console.log('x는 홀수이다.'); } else { console.log('x는 짝수이다.'); } // x는 짝수이다.
위에 조건과 같은 값을 삼항 조건 연산자를 사용하여 살펴보기.
// 예제1 let x = 2; let result = x % 2 ? '홀수' : '짝수'; console.log(result); // 짝수 // 예제2 let x = 2; let pos = x ? ( x > 0 ? '양수' : '음수') : '0'; console.log(pos); // 양수
단순하게 값을 변수에 할당할 경우 삼항 조건 연산자가 사용에 용이하다.
다만 조건에 따라 실행해야 는 여러 문이 필요할 때는 if else 문의 가독성이 더 좋기 때문에 필요에 따라 사용하는 것이 좋다.
삼항 연산자에 대한 자세한 내용은 아래에서 다시 한번 다루도록 한다.
5-1-2. switch 문
처리해야 되는 명령이 많다면 if else 문을 다수 사용하는 것보다 switch 문으로 한 번에 표현하는 것이 가독성과 사용에 편리하여 유용하게 사용될 수 있다.
switch (조건식){ case 조건식 1 : // 조건식 1과 일치할 때 실행될 명령문; break; case 조건식 2 : // 조건식 2과 일치할 때 실행될 명령문; break; case 조건식 3 : // 조건식 3과 일치할 때 실행될 명령문; break; default : // 일치하는 조건식이 없을 때 실행될 명령문; break; };
간단한 예시에 적용하여 살펴보기.
let destination = 'ENGLAND'; let airport; switch (destination) { case 'NEWYORK' : airport = 'JFK'; break; case 'ENGLAND' : airport = 'HTR'; break; case 'FRANCE' : airport = 'CDG'; break; case 'CZECH' : airport = 'PRG'; break; case 'HUNGARY' : airport = 'BUD'; break; default : airport = 'UNKNOWN'; } console.log(airport); // HTR
5-1-3. 삼항 연산자
삼항 연산자는 조건 연산자라고도 하며 단항 연산자와 다르게 세 개의 피연산자를 받는 연산자이다.
조건문 ? 조건문이 참일 때 실행할 표현식 : 조건문이 거짓일 때 실행할 표현식
// 예제1 let age = 19; let drivable = (age < 18) ? 'too young':'old enough'; console.log(drivable); // old enough // 예제2 let score = 69; let result = (score >= 70) ? 'pass' : 'fail'; console.log(result); // fail // 예제3 let num = 10; let result = num % 2 ? '홀수' : '짝수'; console.log(result); // 짝수
5-2. 반복문
반복문은 어떤 동작을 여러 번 실행해야 할 경우, 불필요한 명령어의 중복을 피하고 비교적 간단한 식을 통해 식을 만들 때 사용할 수 있다.
5-2-1. for 문
for 반복문은 반복문 중에서 가장 많이 쓰이는 것으로 조건식을 만족할 때까지 for 문은 계속 반복된다.
for (초기화; 조건식; 증감식) { // 조건식을 만족할 때까지 실행될 문; }
for 문의 장점을 한눈에 이해해 볼 수 있는 예제 살펴보기.
// for 문을 사용하지 않았을 때 text += numbers[0] + '<br>'; text += numbers[1] + '<br>'; text += numbers[2] + '<br>'; text += numbers[3] + '<br>'; text += numbers[4] + '<br>'; text += numbers[5] + '<br>'; // for 문을 사용하였을 때 for (let i = 0; i < numbers.length; i++) { text += numbers[i] + '<br>'; }
위에 식을 통해 for 문으로 중복되는 여러 개의 식을 한 줄로 표현할 수 있게 되는 것을 알 수 있다.
간단한 다른 예제를 살펴보기.
for (let i = 0; i < 10; i++) { console.log(i); } // 0 1 2 3 4 5 6 7 8 9
for 문을 이용한 구구단 만드는 방법 살펴보기.
for (var i = 2; i < 10; i++) { for (var j = 1; j < 10; j++) { console.log (`${i} X ${j} = ${i*j}`); } } // 콘솔 값 // 2 X 1 = 2 // 2 X 2 = 4 // 2 X 3 = 6 // 2 X 4 = 8 // 2 X 5 = 10 // 2 X 6 = 12 // 2 X 7 = 14 // 2 X 8 = 16 // 2 X 9 = 18 // ... // 9 X 1 = 9 // 9 X 2 = 18 // 9 X 3 = 27 // 9 X 4 = 36 // 9 X 5 = 45 // 9 X 6 = 54 // 9 X 7 = 63 // 9 X 8 = 72 // 9 X 9 = 81
1부터 100까지의 수에서 3의 배수 합을 구하는 방법 살펴보기.
let s = 0; for(let i = 0; i < 101; i+=3){ // console.log(i) s += i; } console.log(s); // 1683
for 문을 이용한 예제를 살펴보기.
const animals= ['lion', 'tiger', 'monkey', 'rabbit', 'camel', 'giraffe']; let text = ''; for (let i = 0; i < animals.length; i++) { text += animals[i] + '<br>'; } document.write(text); // lion // tiger // monkey // rabbit // camel // giraffe
5-2-2. while 문
while 문의 조건식을 이용하여 결괏값이 true인 동안 명령을 계속하여 반복 실행한다.
// while 문 while (조건식) { // true 일 동안 반복 실행될 명령 } // do while 문 do { // 일단 한번 실행될 명령, 실행 후 while 문에서 조건을 확인하여 반복 여부를 결정한다. } while (조건식)
while 문에 예시를 적용하여 살펴보기.
// 예제1 let num = 0; while (num < 5){ console.log(num); num++; } // 0 1 2 3 4 // 예제2 const colors = ['RED', 'BLUE', 'BLACK', 'PINK']; let i = 0; let text = ''; while (colors[i]) { text += colors[i] + '<br>'; i++; } document.write(text); // RED // BLUE // BLACK // PINK
do while 문 예시를 적용하여 살펴보기.
// 예제1 let num = 0; do { console.log(num); num++; } while (num < 5); // 0 1 2 3 4 // 예제2 let text = ''; let i = 1; do { text += '<br>' + i + '월입니다.'; i++; } while (i < 13); document.write(text); // 1월입니다. // 2월입니다. // 3월입니다. // 4월입니다. // 5월입니다. // 6월입니다. // 7월입니다. // 8월입니다. // 9월입니다. // 10월입니다. // 11월입니다. // 12월입니다. // 예제3 let result = ''; let i = 0; do { i += 1; result += i + ' '; } while (i > 0 && i < 8); console.log(result); // 1 2 3 4 5 6 7 8
5-2-3. break 문과 continue 문
반복되는 명령어의 중복을 방지하고자 사용되는 것이 반복문이다. 주어진 조건에서 반복문은 반복을 멈추거나(break), 앞으로 되돌아가야 할 경우(continue)가 발생한다. break은 단독으로도 사용할 수 있으며, 반복문을 끝내는 조건과 함께 사용된다.
2~9단 식을 2~3단으로 변형하여 살펴보기.
// 기존 2~9단의 구구단 구하는 식 for (var i = 2; i < 10; i++) { for (var j = 1; j < 10; j++) { console.log (`${i} X ${j} = ${i*j}`); } } // 2~3단 구하는 식으로 변형하기 for (var i = 2; i < 10; i++) { for (var j = 1; j < 10; j++) { console.log (`${i} X ${j} = ${i*j}`); } if ( i === 3) break; }
break 문의 예시를 적용해 살펴보기.
// 예제1 let text = ''; for (let i = 0; i < 5; i++) { if (i === 4) { break; } text += 'This is number ' + i + '<br>'; } document.write(text); // This is number 0 // This is number 1 // This is number 2 // This is number 3 // 예제2 const fruits = ['apple', 'banana', 'melon', 'orange']; let text = ''; list: { text += fruits[0] + '<br>'; text += fruits[1] + '<br>'; break list; text += fruits[2] + '<br>'; text += fruits[3] + '<br>'; } document.write(text); // apple // banana
continue 문은 조건식에 만족하는 해당 값에서 반복문을 중단한다. 반복문의 처음으로 다시 돌아가 다음 과정을 실행한다. break처럼 반복문을 끝내는 것이 아니라, 한 구간만 건너뛰는 것으로 생각하면 된다. 아래와 같이 간단한 예시에 적용하여 살펴보기.
// 예제1 let letter = 'good morning everyone'; let find = 'e'; let count = 0; for (let i = 0; i < letter.length; i++){ if (letter[i] !== find) continue; count++; } console.log(count); // 3 // 예제2 for (i = 0; i < 10; i++) { if (i == 5) { continue; } console.log(i); } // 0 // 1 // 2 // 3 // 4 // 6 // 7 // 8 // 9 // 예제3 let text = ''; for (let i = 0; i < 10; i++) { if (i === 3) { continue; } text += '고객님은 ' + i + '번째 손님입니다.<br>'; } document.write(text); // 고객님은 0번째 손님입니다. // 고객님은 1번째 손님입니다. // 고객님은 2번째 손님입니다. // 고객님은 4번째 손님입니다. // 고객님은 5번째 손님입니다. // 고객님은 6번째 손님입니다. // 고객님은 7번째 손님입니다. // 고객님은 8번째 손님입니다. // 고객님은 9번째 손님입니다. (3번째 손님을 제외하고 0~9번째 손님이 나열된다.)